盒子模型、浮动、定位

盒子模型

边框

语法：border ： length || style || color

style:

1. none (默认值)没有边框

2. solid 单实线

3. dashed 虚线

4. dotted 点线

5. double 双实线

表格的细线化 border-collapse ：collapse；

边距

内边距padding

padding属性用于设置内边距。是指边框与内容之间的距离。

• padding-top:上内边距

• padding-right:右内边距

• padding-bottom:下内边距

• padding-left:左内边距

外边距margin

1. 塌陷：相邻块元素垂直外边距的合并

2. 合并：嵌套的块元素在垂直外边距的合并

   三种解决外边距合并的方法：

   1. padding-top: 10px

   2. border: 1px solid transparent

   3. overflow: hidden

Content宽度和高度

• 宽/高 + 内边距2 + border2 + 外边距*2

• 优先使用顺序：width > padding > margin

浮动

浮动

1. 标准流：一个网页内标签元素正常从上到下， 从左到右排列顺序的意思

2. 浮动的分类

   属性值	描述
   left	不允许左侧有浮动元素（清除左侧浮动的影响）
   right	不允许右侧有浮动元素（清除右侧浮动的影响）
   both	同时清除左右两侧浮动的影响

3. 特征：浮动脱离标准流，不占位置，会影响标准流，浮动只有左右浮动

4. 总结

   1. 浮动后的元素会漂浮在其他元素上边

   2. 浮动后的元素是不占原来的位置

   3. 浮动后的元素不能超出父元素的范围

   4. 浮动后的元素在同一水平线上显示

   5. 浮动后的元素会自动的转化为行内块元素

   6. 浮动后的元素不能超出父元素的内边距和边框

清除浮动

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。

清除浮动的方法：

1. 额外标签法

   • 优点： 通俗易懂，书写方 便

   • 缺点： 添加无意义的标签，结构化语义化较差

   <div style="clear:both"></div>

2. 父级添加overflow属性方法

   • 优点： 代码简洁

   • 缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

   overflow:hidden || auto || scroll

3. 为元素清除浮动

   • 优点： 符合闭合浮动思想 结构语义化正确

   • 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

   .clearfix:after {  
   content: "."; 
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;  
   }
   .clearfix {*zoom: 1;}   /* IE6、7 专有 */

4. 双伪元素清除浮动

   • 优点： 代码更简洁

   • 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

   .clearfix:before,.clearfix:after { 
     content:"";
     display:table;  /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
   }
   .clearfix:after {
    clear:both;
   }
   .clearfix {
     *zoom:1;
   }

定位

定位模式

position属性的常用值：

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

位偏移

描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离