1.17盒子模型

 --------------------------------------CSS盒子模型-----------------------------------
1. 什么是盒子模型?
       盒子模型可用于元素定位和网页布局.
       盒子模型中,每个元素(不论是块级还是内嵌元素)都会产生一个矩形盒子围绕在元素的内容之外,我们称这个盒子为元素盒.
       由三部分组成: 元素里面的实际内容   元素(如p/div等等)   元素盒(包裹元素的矩形框).
       
2. width和height
       width和height属性可以设置块级元素和内嵌可替换元素(如图片)的大小;
       对于内嵌的不可替换元素(如文本)可以设置width和height的大小,但无效;
       在样式中设置元素的宽度和高度值时,只是设置了元素的内容区域的宽度和高度,而不是整个元素的宽度;通常元素的高度是自动计算的,并且只是大到足够容纳元素的内容.所有通常很少指定元素的高度;
       对于图像元素,最好同时指定其高度和宽度较好.

3. margin(外边距)
       含义: 是元素边框到元素盒外边缘的距离(上,下,左,右);
       margin 可以使用负值,这样做可以起到元素重叠的作用;
       例 margin-top=-10px;
       分析: 当margin-top=0时,说明元素的顶部边框与该元素的元素盒的顶部边框重合.
            当margin-top为正数时,使元素下移.
            当margin-top为负数时,使元素上移.
            故当margin-top为负数时,可使下面的元素重叠在上面的元素上.

       块级元素的margin在垂直方向会重合,并取大的值作为margin值.
       (不可替换的内嵌元素)文本类的内嵌元素的margin在垂直方向无效,内嵌元素的高度由其文本字体的高度来控制.
       浮动元素,绝对定位元素的margin都不会重合.

4. border(边框)
       含义: 是元素的边框;
       常用边框样式的设置: border-style-top: solid 实线
                         border-style-right: dotted 点状
                         border-style-left: dashed 虚线
                         border-style-bottom: double 双线

                         border-style: 上 右 下 左;
                         border-color: 上 右 下 左;
                         border: 1px solid red; (宽度 样式 颜色)

5. padding(内边距)
       含义: 元素的实际内容到元素边框的距离,不允许有负值;
       用法跟margin类似,文本类的内嵌元素的padding值无效;
       若想让一个元素出现在一个彩色盒子中,可采用padding来实现.
 
6. float 浮动(常用于实现文本环绕着图像的布局)
       在CSS中可以浮动任何元素(段落,列表,div,图像等),使用float可以创建多列的网页布局,不使用table也能使元素对齐; 其属性值只有三种: none(不浮动)  left(向左浮动)  right(向右浮动).

       注意: 当元素浮动时,元素会被视为块级元素;
            当浮动一个文本类型元素时,必须指定该元素的width 宽度,否则元素内容的宽度可能会被置为最小宽度;
            浮动元素停留在包含它的父级元素的内容区域,不会穿过padding区域;
            浮动元素的margin不会重叠;
            浮动的元素可以覆盖下一个元素的背景和边框,但不会覆盖里面的文字内容,而是把文字内容挤到旁边的位置;
            
       浮动的行为: 在源文档中相邻的浮动元素不允许重叠;
                  如果元素向同一个方向浮动,每个后续的浮动元素必须向该方向移动,直到碰到父级元素的内边缘或者上一个浮动元素;
                  如果没有足够的空间让浮动元素肩并肩地并排,第二个浮动元素将向下移,直到有足够的空间来显示它而不覆盖第一个浮动元素;

       
       清除浮动: 使用clear属性阻止一个元素出现在浮动元素的后面,其只能应用于块级元素;
                其属性值: none   允许两边都可以有浮动元素 (不清楚浮动);
                         left   清除左边的浮动元素;
                         right  清除右边的浮动元素;

                例 p {clear: left;} 这个代表清除p元素左边的浮动,让p元素可以重左边开始布局,而不是从它前面的浮动元素布局.