嗯...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
注: 当网页没有添加文档声明时,就会触发某些浏览器的怪异模式
本文链接:http://so.lmcjl.com/news/1674/