盒模型

一.标准盒模型(浏览器默认)

1. 盒模型有哪些属性构成

盒子模型涉及到的四个区域,包含5个属性

1. width/height 内容大小:这两个属性决定元素内容的大小

2. padding 内边距:元素的内容边界到边框之间的距离

3. border 边框:元素的边框

4. margin 外边距: 边框以外是外边距，外边距默认是透明的，因此不会遮挡其后任何元素。

注意:

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸，

就是把整个占地给撑大了

2 边框 border

2.1 边框三要素:

单样式写法:

1. 边框大小(粗细) border-width

2. 边框样式 border-style

3. 边框颜色 border-color

复合写法:

? border :1px solid #000;

2.2 边框的大小

大小 就是像素值 px

border-width: 20px

边框大小可以继续细分

因为盒子有四个边

所以边框大小细分

1. border-top-width: 10px;

2. border-right-width: 10px;

3. border-bottom-width: 10px;

4. border-left-width: 10px;

2.3 边框的样式

border-style:solid;

边框的样式值:

1. none 无边框

2. solid 实线

3. dashed 虚线

4. dotted 点状线

5. double 双线

边框样式细分:

1. border-top-style: solid;

2. border-right-style: solid;

3. border-bottom-style: solid;

4. border-left-style: solid;

2.4 边框颜色

1. 十六进制颜色值 #CC00FF

2. 英文单词: red blue

边框颜色细分

1. border-top-color: #000;

2. border-right-color: #000;

3. border-bottom-color: #000;

4. border-left-color: #000;

2.5 单独定义某条边的综合样式

1. border-top:1px solid #CC00FF;

2. border-right:5px solid red;

3. border-bottom:10px dotted #660033;

4. border-left:15px double blue;

3. 内边距 padding

元素内容到边框之间的距离

3.1 内边距的复合样式(可以设置4个值)

padding:10px 20px 30px 40px;

padding:; 可以设置多个值

1. 四个值

   padding:上 右 下 左;

2. 三个值

   padding: 上 左右 下;

3. 两个值

   padding: 上下 左右;

4. 一个值

   padding: 上下左右;

注意: 内边距不允许使用负值

3.3 内边距单样式

1. padding-top 上面(顶部)内边距. padding-right 右边内边距

2. padding-bottom 下面(底部)内边距. padding-left 左边内边距

4. 外边距 margin

margin 元素边框外,元素与元素 或元素与浏览器之间的距离

4.1 外边距复合样式

margin:10px 20px 30px 40px;

4.2 外边距复合样式的不同值

margin:; 可以设置多个值

1. 四个值

   margin:上 右 下 左;

2. 三个值

   margin: 上 左右 下;

3. 两个值

   margin: 上下 左右;

4. 一个值

   margin: 上下左右;

4.3 外边距单样式

1. margin-top 上面(顶部)外边距. margin-right 右边外边距

2. margin-bottom 下面(底部)外边距. margin-left 左边外边距

5. 那个属性决定我们盒模型的类型呢

<style>
    div{
        box-sizing:content-box;
    }
</style>

二. 怪异盒模型

怪异盒模型需要手动设置属性

box-sizing:border-box;

1. 怪异盒模型的原理

1. width/height padding * 2 + border * 2 + content(内容大小)

2. padding 内边距:元素的内容边界到边框之间的距离

3. border 边框:元素的边框

4. margin 外边距: 边框以外是外边距，外边距默认是透明的，因此不会遮挡其后任何元素。

2. 怪异盒模型和标准盒模型的对比

2.1 所设置的width/height 值作用的区域不同

1. 标准盒模型

   width/height 是作用在content区域内

2. 怪异盒模型

   width/height 是作用在content区域+padding区域+border区域     就看成是整个border的宽高

2.2 盒子的大小计算不同

1. 标准盒模型

   盒子的占位 = width + padding(左右) + border(左右) + margin(左右)

   盒子的占位 = height+ padding(上下) + border上下) + margin(上下)

　　　 盒子的宽度= width + padding(左右) + border(左右)

　　     盒子的高度= height+ padding(上下) + border上下)

2. 怪异盒模型

   盒子的占位 = width + margin(左右)

   盒子的占位 = height+ margin(上下)

　　　 盒子的宽度 = width

　　　 盒子的高度 = height

三.外边距合并

1. 同级元素发生外边距合并

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图:

?

2. 父子级之间发生外边距合并

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

3. 外边距并的规则

1. 正正取最大值 =====> 50 60 取60. 正负值相加 =====> 50 -60 取-10. 负负取最负 =====> -50 -60 取-60

4. 外边距合并的解决办法

1. 同级元素给第二个元素浮动,添加绝对定位,单独设置某一个元素inline-block

2. 父子级元素外边距合并解决办法

   • 给父级设置内边距代替子级的外边距 记住

   • 给父级加边框

   • 给父级overflow:hidden;

   • 设置绝对定位

   • 设置绝对定位\

记住所有的外边距的触发都是在垂直方向上

必须是在普通文档流的块级元素才会触发外边距合并,这是大前提!!!

盒模型

原文：https://www.cnblogs.com/aorange/p/10906956.html