CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型,指在一个网页文档中,每个元素都被呈现为一个矩形的盒子,描述了元素所占空间的内容。盒模型的组成:content(内容区)+padding(填充区)+border(边框区)+margin(外界区)。
2.盒子模型--边框设置1)border-width边框的粗细
2)border-style边框的样式,有三个参数:olid实线dashed虚线dotted点状线条
)border-color边框的颜色
举例:我们有一个高宽均为像素的盒子,将这个盒子的边框粗细设置为2像素、实线,颜色为红色(如下图)
4)盒子边框的复合写法:font:边框粗细、边框样式、边框颜色
.盒子模型--内边距的设置1)padding-left左边距的距离
2)padding-right右边距的距离
)padding-top上边距的距离
4)padding-bottom下边距的距离
5)盒子模型内边距的复合写法:
padding:5px;写一个值代表着上下左右全部是5像素
padding:5px;10px;写两个值代表着上下5像素、左右10像素
padding:5px;10px;5px;写三个值代表着上5像素、左右10像素、右5像素
padding:5px;10px;5px;10px;写四个值代表着上5像素、右10像素、下5像素、左5像素(顺时针)
4.盒子模型--外边距的设置1)margin-left左边框
2)margin-right右边框
)margin-top上边框
4)margin-bottom下边框
5)复合书写模式与内边距的写法一致
5.清除内外边距的方法:*{padding:0;margin:0;}
6.清除li标签中的圆点的方法:list-style:none