CSS----盒子模型与浮动

 盒模型（框模型）

页面上任何一个元素我们都可以看成是一个盒子，盒子会占用一定的空间和位置他们之间相互制约，就形成了网页的布局

w3c的盒模型的构成：content border padding margin

padding:内边距（内部填充距）

padding-right:50px/10%;
padding-left:50px/10%;
padding-top:50px/10%;
padding-bottom:50px/10%;

缩写：
padding: 上 右 下 左;----从十二点钟方向开始，顺时针
padding: 50px;表示四个方向的值都设置成50px
padding: (上下) (左右);表示上下的值一样，左右的值一样
padding: 上 (左右) 下;

margin:外边距，元素与元素之间的距离

margin-right:50px/10%;
margin-left:50px/10%;
margin-top:50px/10%;
margin-bottom:50px/10%;

缩写：
margin: 上 右 下 左;----从十二点钟方向开始，顺时针
margin: 50px;表示四个方向的值都设置成50px
margin: (上下) (左右);表示上下的值一样，左右的值一样
margin: 上 (左右) 下;

如果让一个容器水平方向居中：margin: px/% auto;

margin值在垂直方向会有重叠的现象，在取值的时候取较大值

九 浮动
文档流：正常的文档流是块级元素从上到下，行内元素从左到右的顺序展示
给一个元素赋值浮动后，该元素就会脱离正常的文档流进行左右浮动，直到它本身的外边缘碰到包含框或另一个浮动框的左右

float:left/right;
left---向左浮动
right---向右浮动

加了浮动过后的元素会导致父元素高度陷塌，由加了浮动过后的元素导致的，脱离了正常文档流

如果将多个同辈元素设置成向右浮动过后，会让这些元素倒着排序

解决父元素高度陷塌的方法：

1 设置父元素的高度
2 清除浮动

浮动的作用：可以让块级元素同行显示