标准盒模型和怪异盒模型

最新推荐文章于 2023-03-20 19:19:10 发布

is______

最新推荐文章于 2023-03-20 19:19:10 发布

阅读量117

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/is______/article/details/127586494

版权

盒模型

什么是盒模型？

网页是由很多模块构成，这些模块可以看成是一个个盒子，每个模块里还分为几部分，每部分都可以看成一个小盒子，而我们把这些大大小小的盒子就叫做盒模型。

标准盒模型的结构

content：代表内容区域，指存放内容的空间
padding：内边距，盒子内部的空间，其实就是内容到边框的距离，相当于生活中快递中的泡沫
border：盒子的边框，四条边框可以设置样式
margin：外边距，盒子与盒子之间的间距（兄弟关系，父子关系）

标准盒子大小的计算

在布局的时候，我们一定会认真计算盒子的大小，不然会影响的布局

标准盒子真正的大小：

width=content+padding*2(代表左右两边)+border * 2(左右两边的border)

height=content+padding *2 +border * 2 （2代表上下的padding或border）

标准盒子所占空间的大小：

width=content+padding*2(代表左右两边)+border * 2(左右两边的border) +margin *2

height=content+padding *2 +border * 2 +margin *2

注意：在标准盒子中，css样式中的width和height并不是盒子真正的大小，只是盒子中content（内容区域）的大小

怪异盒子（IE盒子）

怪异盒子width宽度和height高度是包含content+pading+border，一般常用于移动端布局

box-sizing：设置盒子类型
- border-box：怪异盒子
- content-box：标准盒子

怪异盒子的大小：其实就是width的大小，包含了content+padding+border

怪异盒子所占空间的大小：width(包含了content+padding+border)+margin*2

宽度=width+margin*2
高度=height+margin *2

边框border

设置盒子的边框的样式，包括宽度（边框的粗细）、类型、颜色。

语法：

边框的三要素
border-方位-width：宽度；（边框线条粗细）
    border-方位-style：solid | dashed | dotted |double;
border-方位-color：颜色值；

复合属性：
控制一条边框的复合属性
border-方位：宽度   类型   颜色值；
控制四条边
border：宽度  类型  颜色；

solid：实线
dashed：虚线
dotted：点线
double：双边线

注意：
- 如果颜色默认不写，显示黑色，浏览器渲染
- 至少需要写两个值：宽度和类型
- 两条边框相接区域斜均分（按照对角线的区域均分）
  - 可以绘制一个三角形
    1. 四条边框，设置宽高都为0
    2. 其中三条边颜色透明 transparent
    - transparent：颜色透明，可以用于文字颜色透明、边框透明、input背景设置透明

练习：

内边距padding

盒子边框和内容之间的距离

语法：

padding-left
padding-top
padding-right
padding-bottom

复合属性：
padding
1. 设置四个值：上  右   下   左  （顺时针方向）
2. 设置三个值：上  左右  下
3.设置两个值：上下  左右
4. 设置一个值：上下左右四个方向

注意：
- padding设置了之后可以将盒子撑大（怪异盒子除外）
- padding区域有背景颜色
应用场景
- 处理内容距离边框的距离，留白，调整盒子内容的显示位置
- 用于导航模块的内容四周留白，可以根据内容多少控制大小

外边距margin

盒子和盒子之间的距离

使用方式和padding一样

盒子和盒子之间兄弟关系
盒子和盒子之间是父子关系

盒模型注意事项：

上下外边距会存在重叠

盒子和盒子之间是兄弟关系，margin重叠只出现在垂直方向上，以值大的为准。

解决方案：将相邻的两个盒子中的一个盒子放在一个新的BFC区域里，(设置overflow:hidden)就可以解决margin重叠的问题。

    <style>
        body{
            margin: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: tomato;
            margin-top: 20px;
            margin-bottom: 80px;
            margin-right: 30px;
            /* 设置浮动可以让盒子同行显示 */
            /* float: left; */
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* margin-top和margin-bottom重叠性 也叫外边距重叠*/
            /* 盒子和盒子之间兄弟关系，margin会在垂直方向上发生重叠，以值大为准 */
            /* 水平方向不会发生重叠 */
            margin-top: 50px;
            margin-left: 50px;
            /* 设置浮动 */
            /* float: left; */
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

margin-top传递性（盒子和盒子之间是父与子关系）

盒子和盒子之间是父子关系，整个margin的属性只有margin-top会有传递性，子元素找不到父元素的边界（参考位置），将这个margin-top属性会传递给父元素

解决方案：

父元素设置border，会改变父元素盒子的大小， border：1px solid transparent;（不推荐）
父元素设置padding，也会改变父元素盒子的大小，padding可以作为margin-top的参考（不推荐）
父元素设置overflow:hidden，产生BFC容器，这个容器内所有内容有自己的排列规范，不会影响盒子外面的元素`

 <style>
        body{
            margin: 0;
        }
        .box1{
            width: 400px;
            height: 400px;
            background-color: tomato;
            /* margin-top: 50px; */
            /* margin-top解决方案 */
            /* border: 1px solid transparent; */
            /* padding: 1px; */

            /* 超出部分隐藏 */
            /* 设置overflow：hidden：产生一个BFC容器，这个容器内所有内容的排列不会影响盒子外面的排列 */
            /*overflow: hidden;*/
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* margin-top传递性：盒子和盒子之间是父子关系，只有margin-top有传递性 */
            /* 子盒子找不到父盒子的边界(参考位置)时，就会发生传递性 */
            margin-top: 50px;
           
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>     
    </div>
</body>

扩展知识

子元素盒子width默认不设置和设置100%的区别：

默认不设置，auto自适应，在父元素区域里面自适应，盒子大小计算方式为：
- 子盒子的大小=内容区域+padding * 2+border * 2
- 子盒子所占空间的大小=大盒子的宽度
100%是参考父元素的宽度，折算下来内容区域是固定值，盒子大小计算方式为：
- 子盒子的真正大小=父盒子的width值为大小+子盒子padding *2+border *2；
- 子盒子所占空间的大小：子盒子的真正大小+margin