盒子模型

块标签都具备盒子标签的特征

内填充（padding），和边框的距离右四个方向

div{

padding-top:20px;

padding-right:10px;

padding-bottom:15px;

padding-left:30px;

}



外边距（margin） 距离也有四个方向



外边框（border）距离也有四个方向

div{border-bottom:1px solid red;}

border-bottom

border-top

border-left

border-right

div{

border-width:2px;

border-style:solid;

border-color:red;

}

也可以div{

border:2px solid red;

}

border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）



css内定义的宽（width）和高（height），指的是填充以里的内容范围。

div{

width:200px;（块状元素的特点就是如果不设定宽度，显示为父容器的100%）

height:30px;

padding:20px;

border:1px solid red;

margin:10px;

}



伪代码：(a:hover{color:red;})

在网页中，元素有三种布局模型：

1、流动模型（Flow）

2、浮动模型 (Float)

3、层模型（Layer）

层模型有三种形式：

1、绝对定位(position: absolute)

2、相对定位(position: relative)相对于之前的位置

3、固定定位(position: fixed)固定在窗口