CSS:盒子模型(框模型)

盒子

css处理网页时,他认为每个元素都包含在一个不可见的盒子里.

盒子组成:
内容区(content)
内边距(padding)
边块(border)
外边距(margin):与其他盒子的距离

1.给盒子设置边框
为一个元素设置边框必须指定三个样式,缺一不可
border-width:边框宽度
border-color:边框颜色
border-style:边框的样式(实线还是虚线)

通过border-left,border-right,border-top,border-bottom可以设定盒子上下左右的边框大小

可以使用border:属性同时设置上面三个属性,顺序不限,这样边框的上下左右就只能相同了

2.给盒子的内容设置大小
width:宽度
height:高度
只会影响盒子内容的大小

3.给盒子设置内边距padding(盒子内容与边框的距离)
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距

同样适用padding:属性可以同时设置上下左右四个内边距

4.给盒子设置外边距margin(盒子与其他盒子的距离)
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距

margin:可以同时制定上下左右外边距

其中:设置左和上时是盒子自己移动.设置下和右时是挤其他的盒子
可以为负值,就是向相反的方向移动.

margin-left和margin-right还有auto值,单个设置表示最大值,同时加上就是水平居中.对上下无效