css布局总结

自己在使用css来美化页面时，总会不由自主的用到bootstrap的样式，总是会把css和bootstrap混着用，为了自己对于css的样式更加清楚，写一篇有关css布局的内容。

基本内容

1.display

• none：display:none 表示此元素不会显示
• block：块级元素，元素前后会带有换行符，独占一段内容， 例：div , p , form
  • 特点： 总是在新行上开始，高度，行高以及顶和底边距都可控制
• inline：行内元素，一个行内元素可以在段落中加入一些文字而不会打乱段落的布局，例：span
  • 特点： 和其他元素都在一行上，高，行高及顶和底边距不可改变，宽度默认为100%
• inline-block
  • 特点：元素显示为内联对象，拥有块元素的属性，但可以设置宽度和高度地块元素的属性

举例来说

<div>
    apple<span>行内元素</span>apple2
    <div>块级元素</div>
    apple3
</div>

结果

2.position（定位）

• static : 默认值。元素不会被特殊的定位

• relative : 相对定位，原本的空间依然在，使用top，right，bottom 和 left 属性设置，使其偏离其正常位置，其他的元素的位置则不会受该元素的影响发生位置变化。

• absolute : 绝对定位，脱离普通流，不会占据原本空间，元素相对于最近的“positioned”祖先元素进行定位。无论块级元素还是行内元素都会生成一个块级框。
  元素的位置通过 "left", "top", "right" 以及 "bottom" 属性设置

• fixed : 固定定位。脱离普通流，元素会相对于浏览器窗口来定位，页面滚动，它还是会停留在相同的位置

• 包含块（containing block）

很多框的定位和尺寸的计算，都取决于一个矩形的边界，这个矩形，被称作是包含块。

判定规则：

• 页面中的根元素所存在的包含块，被称为初始包含块（initial containing block）
• 如果一个元素的’position’为’relative’或’static’，那么其包含块则是由最近的块级或单元格或行内块级元素的内容区创建
• 如果一个元素’position’为’fixed’，那么其包含块为当前屏幕的可视窗口
• 如果一个元素的’position’为’absolute’，那么其包含块则是最近的’position’为’relative’ 或’absolute’或 ‘fixed’的祖先元素,有如下几种情况：
  • 如果其祖先元素是行内元素，则包含块取决于其祖先元素的 “direction” 特性
  • 其他情况下，如果祖先元素不是行内元素，那么包含块的区域应该是祖先元素的内边距边界。

3.float（浮动）

• none: float:none 不使用浮动
• left: float:left 靠左浮动
• right: float:right 靠右浮动

4. 'display'、'position' 和 'float' 的相互关系

• display:none： ** position 和 float 不起作用**，元素不产生框。因此浮动和定位无效。
• 'position' 的值是 'absolute' 或 'fixed'：框就是绝对定位的，'float' 计算后的值应该是 'none'，并且，'display' 会被按照表设置。
• 'float' 的值不是 "none"，该框浮动并且 'display' 会被按照转换对应表设置

说明：浮动或绝对定位的元素，只能是块元素或表格。

5.margin（外边距）

使用方法：margin:10px，值可以是 数字+px，auto（自适应）,百分比，对于行内非替换元素（例如 SPAN），垂直方向的 margin 不起作用。
垂直方向上的不同元素的相邻的 margin 在某些情况下，会发生折叠的现象

• 四个线同的外边距
  margin:10px表示四边间距为10px

• 上下相同，左右相同的外边距
  margin:10px,20px表示上下10px，左右20px

• 四个外边距
  margin-left 对象左边外延边距
  margin-right 对象右边外延边距
  margin-top 对象上边外延边距
  margin-bottom 对象下边外延边距

• Collapsing margins（外边距折叠）

指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距。
注意：

1. 浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠
2. 元素自身的 margin-bottom 和 margin-top 相邻时也会折叠
3. 创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠
   参考：http://www.w3help.org/zh-cn/kb/006/

格式化上下文

指的是初始化元素定义的环境。包含两个要点，一个是元素定义的环境，一个是初始化。

• 块格式化上下文( Block formatting context )
  1. 创建新的块格式化上下文: 浮动元素、绝对定位元素，'display' 特性为 "inline-block"，"table-cell"， "table-caption" 的元素，以及 'overflow' 不是 "visible" 的元素，会创建新的块格式化上下文。但它们本身不是块格式化上下文。
  2. 注意： display:table 产生匿名框
  3. 在 CSS3 中：对块格式化上下文这个概念做了改动，将 "Block formatting context" 叫做 "flow root"。
  4. 块格式化上下文作用于包含块（box）内的块（box）的
  5. 特点： 阻止边距折叠，可包含内部元素的浮动，防止元素被浮动元素覆盖

<!--Block Formatting Context会阻止边距折叠-->
<div style="width:400px;background-color:#0000ff;">
    <div style="background:gray;margin:20px;">没创建BLK不同流div</div>
</div>
<div style="width:400px;background-color:#8a2be2;overflow:hidden;_zoom:1">
    <div style="background:gray;margin:20px;">创建BLK，IE通过类似BLK的layout，IE通过zoom:1触发layout</div>
</div>

<!--Block Formatting Context可以包含内部元素的浮动-->
<div style="width:400px;background-color: mediumspringgreen;">
    <div style="float: right">没创建BLK不同流div</div>
</div>
<div style="width:500px;background-color:#0000ff;overflow:hidden;_zoom:1">
    <div style="float: right">创建BLK，IE通过类似BLK的layout，IE通过zoom:1触发layout</div>
</div>

<!--Block Formatting Context可以阻止元素覆盖浮动盒模型-->
<div style="background:skyBlue;float:left;width:180px;">
    leftside
</div>
<div style="background:yellow;float:right;width:180px;">
    rightside
</div>
<div style="background:pink;overflow:hidden;_zoom:1;_margin:0 -3px 0 0;border:5px solid teal;">
    middele
</div>

• 行内格式化上下文( Inline formatting context )
  在行内格式化上下文中，框( boxes )一个接一个地水平排列，起点是包含块的顶部。

1. 行框的宽度 由它的子孙集和其中的浮动元素决定。高度的确定由行高度计算规则决定。
2. 行框的左边接触到其包含块的左边，右边接触到其包含块的右边。然而，浮动元素可能会处于包含块1边缘和行框边缘之间

参考：http://www.html5jscss.com/box-context.html
http://www.w3help.org/zh-cn/kb/010/

---

6.border（边框）

• 四个边框
  border-left 设置左边框，
  border-right 设置右边框，
  border-top 设置上边框，
  border-bottom 设置下边框，

• 四边相同的边框
  border:1px solid #00F：设置1px像素蓝色实线边框

• 边框的三个样式
  边框颜色:border-color:#000，边框宽度：border-width:1px，border边框样式：border-style:solid，适用于任何元素。

7.padding（内边距）

• 四个内边距
  padding-left ：设置对象距离左边的边距
  padding-right ：设置对象距离右边的边距
  padding-top ：设置对象距离上边的边距
  padding-bottom ：设置对象距离下边的边距

• 对象距离四边边距相同的间隔
  padding:5px 四边边距为5px间隔

---

margin，border，padding的关系图

---