盒子模型

盒子模型
1.盒子模型=网页布局的基石
由4部分组成：边框（border）、外边距（margin）、内边距、（padding）、盒子中的内容（content）。
2. 边框（border）、外边距（margin）、内边距、（padding）是盒子模型的属性，
有四个方向，可以设定属性值。 顺时针方向设置，为上、右、下、左
3.三个值的属性为： a为上、 b为左右、c为下。
两个值的属性为： a为上下、b为左右。
一个值的属性为： a为上下左右。
4.优先级，就近原则， 行内样式> 内部样式> 外部样式
5.边框三个属性：边框的粗细、样式、颜色、每一个属性值都要有一个空格来个开，空格必须在英文输入法状态下输入才可以，三个属性缺一不可。
6.盒子模型的三维模式的包裹层与ps的模型一样，分为五层：
border为第一层、
content+padding为第二层、
background-image为第三层、
background-color为第四层、
marg为第五层。
7.盒子模型尺寸=边框+外边距+内边距+盒子中的内容尺寸

1.float属性的3个属性值：
                      left-左浮动   right-右浮动  none-不浮动 
特点：元素会左移，或右移，直至碰触到容器为止。
2.设置了浮动的元素，仍旧处于标准文档流中，意味着它仍占据标准文档中的空间，会对它周围的元素产生影响。
3.当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化。
4.当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特质紧邻后面的元素（DOM结构中的紧邻其后面的元素）。

1.清除浮动的常用方法
clear属性-常用clear：both；
clear：left，或者clear：right； 清除元素左侧或右侧的浮动
同时设置width：100%(或固定宽度）+overflow：hidden；也是可以清除浮动的。一般给受到浮动的元素设定的。
p{100%; overflow:hidden}或p{width：both}

一：横向两列布局的实现：这是网页布局最常见的方式之一 主要应用技能： float属性——使纵向排列的块级元素，
横向排列 margin属性——设置两列之间的间距 二：当父包含块缩成一条时，用clear：both方法清除浮动无效，它一般用于紧邻后面的元素的清除浮动
。所以设置父的overflow:hidden ☆div块的高度一般不需要设置，这样高度就会随着内容自动扩展。
若设置了高度，又设置了overflow：hidden，当内容超过高度的时候，就无法正常显示了