盒模型布局详解

Posted 2021-01-09 ageliu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了盒模型布局详解相关的知识，希望对你有一定的参考价值。

一、盒模型之display（显示方式）

一、display组成部分解释

1、块（block）：其可以独行显示并且其自身支持宽高，其中宽可以设置为默认，高可以由子级或内容撑开（可以嵌套所有类型但是其中的p段落标签一般只允许内联嵌套）。

2、内联也叫行（inline）：其可以同行显示并且不支持宽高是因为其宽高是由内容决定的（一般嵌套内联）。

3、内联块（inline-block）：包含块和内联的所有特点，但是如果设置了宽高的话就一定要使用设置的宽高，如果值设置一种则按比例缩放（一般只作为最内层级）。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <!-- 默认值 -->
    <style type="text/css">
        div {
            /*块*/
            display: block;
            /*自适应父级可用content的宽度*/
            /*width: auto;*/
            /*默认0*/
            /*height: 0px;*/
        }
        span {
            /*内联*/
            display: inline;
            /*不支持宽高*/
        }
        img {
            /*内联块*/
            display: inline-block;
            width: auto;
            height: auto;
        }
    </style>
    <!-- 验证宽高设置 -->
    <style>
        .sup {
            /*width: 100px;*/
            /*height: 100px;*/
            background-color: orange
        }
        .sub {
            width: 200px;
            height: 200px;
            background-color: cyan
        }
        .s1, .s2 {
            width: 200px;
            height: 200px;
            background-color: brown
        }
        img {
            /*width: 350px;*/
            height: 350px;
        }
    </style>
</head>
<body>
    <div></div>
    <span></span>
    <img src="./img/icon.jpg" alt="">
    <img src="./img/icon.jpg" alt="">

    <div class="sup">
        <div class="sub"></div>
    </div>
    <span class="s1">123</span>
    <span class="s2">456</span>

</body>
</html>

display演示

二、盒模型之overflow（也为显示方式）

一、overflow基本组成属性

1、hidden：限制显示区域，超出父级区域的内容会被隐藏。

2、scroll：以滚动条的方式显示父级区域被裁剪的内容。

3、auto：将如果被裁剪的内容以滚动条的方式显示。

4、visible：默认值

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>voerflow</title>
    <!-- 显示区域只能由父级大小决定 -->
    <style type="text/css">
        /*子级区域大于父级*/
        .sup {
            width: 100px;
            height: 100px;
            /*默认值*/
            /*border: 3px none black;*/
            /*清除边框*/
            /*border: 0;*/
            /*border: none;*/
            /*最简单的设置*/
            border: solid;
        }
        .sub {
            width: 200px;
            height: 200px;
            background-color: red
        }
        /*对父级进行overflow设置*/
        .sup {
            /*以滚动的方式允许子级所有内容显示*/
            overflow: auto;
            /*overflow: scroll;*/

            /*只运行子级在父级所在区域的部分显示,超出的部分影藏*/
            /*overflow: hidden;*/
        }
    </style>
</head>
<body>
    <!-- display: block大环境下 -->
    <!-- <div class="sup">
        <div class="sub"></div>
    </div> -->
    <div class="sup">
        呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿
    </div>
</body>
</html>

overflow演示

三、盒模型之隐藏

一、隐藏的基本属性

简述：通过opacity（0,1）来设置背景的透明度0表示透明、1表示不隐藏

二、实现隐藏的方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>隐藏</title>
    <style type="text/css">
        /*盒子间会相互影响*/
        div {
            width: 100px;
            height: 100px;
        }
        .d1 {
            background-color: red;
            /*以背景颜色透明度隐藏,不需要掌握*/
            /*盒子还在,内容或子级标签均会被显示*/
            background-color: transparent;
        }
        .d2 {
            background-color: orange;
            /*以盒子透明度隐藏:0~1*/
            /*盒子真正意思上透明,但盒子区域占位还在*/
            opacity: 0;
        }
        .d3 {
            background-color: cyan;
            /*盒子从文档中移除,盒子的区域占位消失*/
            /*当盒子重新获得显示方式,该盒子依旧从消失位置显示*/
            display: none;
        }
        .d4 {
            background-color: yellow;
        }
        /*需求:通过悬浮body让d3重新显示*/
        /*1.明确控制的对象 2.确定对该对象的修饰 3.找出修饰与对象的关系*/ 
        /*body:hover .d3*/
        .d1:hover ~ .d3 {
            display: block;
        }
    </style>
</head>
<body>
    <div class="d1">内容</div>
    <div class="d2">内容</div>
    <div class="d3"></div>
    <div class="d4"></div>
</body>
</html>

实现隐藏的方式

四、盒模型之border用法与margin用法

一、border用法

border用法

二、margin用法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>margin</title>
    <style type="text/css">
        /*前提:sup显示区域宽全屏,高200px, sub显示区域宽高个100px*/
        /*需求1:sup左上右顶格显示*/
        html, body {
            /*body默认具有margin: 8px*/
            margin: 0;
        }
        .sup {
            width: auto;
            height: 200px;
            background-color: red;
        }
        .sub {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        /*需求2:sub在sup的水平中央显示*/
        /*.sup { 错误
            text-align: center;
        }*/
        .sub {
            /*上下0,左右auto*/
            /*auto:左右auto,自适应(平方)剩余可布局空间*/
            margin: 0 auto;
        }
        /*需求3:sub在sup的垂直中央显示*/
        /*垂直会遇到margin父子坑*/
        /*.sub { 不行
            margin: auto;
        }*/
        .sup {
            height: 100px;
            padding: 50px 0;
        }
        /*.sup {
            height: 100px;
            border-top: 50px solid red;
            border-bottom: 50px solid red;
        }*/
        /*需求4:sub在sup的水平居右显示*/
        .sub {
            margin-left: auto;
            /*margin-right: 0;*/
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="sup">
        <div class="sub"></div>
    </div>
</body>
</html>

margin用法

五、盒模型之样式支持与层级结构

一、样式支持用法

、盒模型<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>样式支持</title>
    <!-- 认识a标签一般怎么操作 -->
    <!-- 需求:具有页面转跳功能的图片 -->
    <style type="text/css">
        a {
            color: #333;
            text-decoration: none;
            display: block;
        }
    </style>
    <!-- 需求:图片在sup水平垂直中央显示 -->
    <!-- part1 -->
    <style type="text/css">
        .sup {
            width: 500px;
            /*height: 500px;*/
            background-color: red;
        }
        /*水平居中*/
        /*display对margin的支持*/
        /*block支持所有margin布局*/
        /*inline与inline-block只支持margin上下布局*/
        .sub {
            display: block;
            margin: 0 auto;
        }
        /*垂直居中*/
        .sup {
            /*去除高度设置*/
            padding: 50px 0;
        }
    </style>
    <!-- part2 -->
    <style type="text/css">
        .box {
            width: 500px;
            height: 500px;
            background: url(‘img/icon.jpg‘) no-repeat center orange;
        }
    </style>
</head>
<body>
    <!-- 认识a标签一般怎么操作 -->
    <!-- 需求:具有页面转跳功能的图片 -->
    <!-- <a href="">
        <img src="img/icon.jpg" >
    </a> -->

    <!-- 需求:图片在sup水平垂直中央显示 -->
    <!-- part1 -->
    <div class="sup">
        <img class="sub" src="img/icon.jpg" alt="">
    </div>
    <!-- part2 -->
    <div class="box"></div>
</body>
</html>

盒模型样式支持

二、层级结构

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>层级结构</title>
    <style type="text/css">
        .d5 {
            width: 200px;
            height: 180px;
            background: red;
        }
        .d2, .d3, .d4 {
            width: 80px;
            height: 40px;
            background: orange
        }
        .d4 {
            margin-left: 160px;
            margin-top: -80px;
        }
    /*    .d3 {
            margin-left: 80px;
            margin-top: -40px;
        }*/
        /*.d4 {
            margin-left: 160px;
            margin-top: -40px;*/
    /*    }*/
        /*没有层级结构情况下:*/
        /*1.盒子布局间相互影响程度很大*/
        /*2.要严格遵循从上至下布局顺序进行布局*/
        /*问题点:牵一发动全身*/
    </style>
    <style type="text/css">
        /*.menu {
            width: 200px;
            height: 100px;
            background: red;
        }
        .html, .css, .js {
            width: 80px;
            height: 40px;
            background: orange
        }
        .nav {
            width: calc(80px * 3);
            height: 40px;
        }
        .css {
            margin-top: -40px;
            margin-left: 80px;
        }
        .js {
            margin-top: -40px;
            margin-left: 160px;*/
        }
        /*menu的布局只与nav有连带关系,与实际显示内容的html,css,js不具有任何连带关系*/
    </style>
</head>
<body>
    <!-- 无层次结构 -->
    <div class="d1">w3c</div>
    <div class="d2">html</div>
    <div class="d3">css</div>
    <div class="d4">js</div>
    <div class="d5">menu</div>
    
    <!-- 有层次结构 -->
<!--     <div class="title">w3c</div>
    <div class="nav">
        <div class="html">html</div>
        <div class="css">css</div>
        <div class="js">js</div>
    </div>
    <div class="menu">menu</div> -->
</body>
</html>

盒模型层级结构

三、作业

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>w3c</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/top.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <div class="wrap">
        <div class="top">
            <div class="start">
                <h1 class="title"></h1>
                <div class="search">
                    <div class="sc_position">
                        <div class="s_p_border"></div>
                        <div class="s_p_btn">GO</div>
                    </div>
                </div>
            </div>
            <div class="nav">
                <ul class="nav_list">
                    <li class="n_l_1"></li>
                    <li class="n_l_2"></li>
                    <li class="n_l_3"></li>
                    <li class="n_l_4"></li>
                    <li class="n_l_5"></li>
                    <li class="n_l_6"></li>
                    <li class="n_l_7"></li>
                </ul>
            </div>
        </div>
        <div class="main">
            <div class="m_left">
                <div class="nav_box">
                    <h2>html&nbsp;教程</h2>
                    <ul>
                        <li>html</li>
                        <li>html5</li>
                        <li>xhtml</li>
                        <li>css</li>
                        <li>css3</li>
                        <li>tcp/ip</li>
                    </ul>
                </div>
                <div class="nav_box">
                    <h2>浏览器脚本</h2>
                    <ul>
                        <li>javascript</li>
                        <li>jQuery</li>
                        <li>Ajax</li>
                    </ul>
                </div>
            </div>
            <div class="m_center">
                <div class="ct_box ct_intr">
                    <div class="ct_intr_box">
                        <h2>领先的 Web 技术教程 - 全部免费</h2>
                        <p>在w3school，你可以找到你所需要的所有的网站建设教程。</p>
                        <p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、php 和 ASP.NET。</p>
                        <p>从左侧的菜单选择你需要的教程！</p>
                    </div>
                </div>
                <div class="ct_box">
                    <div class="c_b_1">
                        <div class="c_b_txt">
                            <h2>完整的网站技术参考手册</h2>
                            <p>我们的参考手册涵盖了网站技术的方方面面。</p>
                            <p>其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。</p>
                        </div>
                    </div>
                    <div class="c_b_2">
                        <div class="c_b_txt">
                            <h2>在线实例测试工具</h2>
                            <p>在 w3school，我们提供上千个实例。</p>
                            <p>通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="m_right">
                
            </div>
        </div>
        <div class="end"></div>
    </div>
</body>
</html>

w3c基本框架演示

以上是关于盒模型布局详解的主要内容，如果未能解决你的问题，请参考以下文章

弹性盒布局display:flex详解

#yyds干货盘点#愚公系列2022年11月微信小程序-Flex布局详解

布局HTML&CSS05_CSS盒模型属性

彻底搞懂flex弹性盒模型布局

最流行的布局方案 Flex 弹性盒布局详解

前端盒模型布局浮动布局