CSS盒子模型

盒子模型

border边框

边框宽度：border-width
边框颜色：border-color
边框样式：border-style: solid 实线
dashed 虚线
dotted 点线

div {
width: 30px;
height: 200px;
border-width: 5px;
border-style: solid;
border-color: pink;
}

边框复合写法

border: 1px solid red;

边框分开写法

border-top: 5px solid pink;
border-bottom: 5px solid pink;
border-right: 5px solid pink;
border-left: 5px solid pink;

表格细线边框

td{
	border: 1px solid pink;
	border-collapse: collapse;

表示相邻边框合并到一起。

注意：边框会影响盒子的大小

padding内边距

用于设置内边距，即边框与内容的距离。
如果没有边框，按照盒子边计算内边距。

padding复合写法

padding: 5px;/*上下左右*/
padding: 5px 10px;/*上下5像素，左右10像素*/
padding: 5px 10px 20px/*上5像素，左右10像素，下20 像素*/
padding: 5px 10px 20px 30px/*顺时针，上5像素，右10像素，下20像素，左30像素*/

内边距影响盒子的大小，如果盒子已经指定了宽度和高度，此时在指定内边距，撑大盒子。
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

Content内容

margin外边距

控制盒子与盒子之间的距离。

margin: 5px;/*上下左右*/
margin: 5px 10px;/*上下5像素，左右10像素*/
margin: 5px 10px 20px/*上5像素，左右10像素，下20 像素*/
margin: 5px 10px 20px 30px/*顺时针，上5像素，右10像素，下20像素，左30像素*/

外边距典型应用

外边距可以实现让块级盒子水平居中。
但必须满足两个条件：
1.盒子必须指定了宽度
2.盒子左右的外边距都设置为auto

.header {
width: 90px;
height: 40px;
margin: 0 auto;
}

注意：行内元素或者行内元素水平居中给其父元素添加text-align: center即可。

外边距合并

主要有两种情况：
1.相邻块元素垂直外边距的合并。
2.嵌套块元素处置外边距的塌陷。
塌陷解决方案：
（1）为父元素定义上边框
（2）为父元素定义内边距
（3）位父元素添加overflow:hidden

清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的页不一样。因此我们在布局前，首先要清除网页元素的内外边距。

*{
/*这句话也是我们CSS的第一行代码*/
	margin: 0;
	padding: 0;
}

注意：行内元素为了照顾兼容性，尽量值设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了。

如何去掉li前面的项目符号（小圆点）

li {
	list-style: none;
}