嗯...ps随便大概画了一个参考图，色彩有点...见谅
CSS盒模型的概念及组成
css盒模型概念——css盒模型是css的基石，每个html元素都可以看作是一个盒模型。
css盒模型的组成——内容（content）、补白或填充（padding）、边框（border）、外边距（margin）
1.内容（content）
语法:
width: 数值+单位; height: 数值+单位;
eg:
.box{
width: 300px;
height: 300px;
}2.补白或填充（ content 和 border 之间的距离）
①设置一个值
padding: 20px; （上下左右均为20px）
②设置两个值
padding: 15px 25px; （上下为15px、左右为25px）
③设置三个值
padding: 10px 5px 20px; （上下为10px、左右为5px、下为20px）
④设置四个值（顺时针方向）
padding: 20px 10px 5px 0px; （上为20px、右为10px、下为5px、左为0px）
⑤还可以单独设置某一个方向的padding值
padding-left: 20px; （left 还可以设置为 top、bottom、right）
注:
①当给元素设置了padding值后，要在原来的宽高上减去设置的padding值，保证总宽高不变;
②当需要调整子元素在父元素中的位置关系时，给父元素设置padding属性;
③padding不允许设置负值;
④背景可以延伸到padding区域。
3.边框（设置 padding和margin 之间的部分）
语法:
①边框类型
border-style: solid（实线） | dashed （虚线） | dotted （点线） | double （双线）;
②边框颜色
border-color: 颜色值;
③边框宽度
border-width: 数值+单位;
④border简写方式
border: 宽度 线型 颜色;
eg:
border: 5px solid black;
⑤还可以单独设置某一方向的边框
border-top: 2px solid black; /*注: top可更改为 bottom、right、left*/
注：
①背景可以延伸到border区域，当边框为实线时会遮挡住背景色
③当元素设置了border时，要在原来宽高的基础上减去设置的border值，保证总宽高不变
4.外边距
语法：
margin: 数值+单位;
注:margin属性值的设置方法同padding
①背景不能延伸到margin区域
②margin可以设置负值
③当需要调整元素之间的位置关系或子元素在父元素中的位置关系时，给本元素添加margin属性
注:
标准盒模型的总宽高 = width + 左右padding + 左右border + 左右margin
标准盒模型的总高度 = height + 上下padding + 上下border + 上下margin
标准盒模型 = content + padding + border + margin
怪异盒模型 = content + margin
注: 当网页没有添加文档声明时，就会触发某些浏览器的怪异模式
本文链接：https://my.lmcjl.com/post/20969.html
4 评论