css布局

1."display"属性

是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

 

block：

div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。给block元素指定width防止它撑满容器，使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。

 

inline：    

span 是一个标准的行内元素。一个行内元素可以在段落中 <span> 像这样 </span>包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素，它可以被用作链接。

 

none：

另一个常用的display值是 none 。一些特殊元素的默认 display 值是它，例如 script 。display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。

它和 visibility 属性不一样。把 display 设置成 none 不会保留元素本该显示的空间，但是 visibility: hidden; 还会保留。

元素默认display的重写，常见的例子是：把 li 元素修改成 inline，制作成水平菜单。

撑爆盒子问题：

box模型中margin ，padding ，border 会把盒子撑大，所以当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。代码如下，只支持ie8+

2.position属性

1. static：
2. relative：在一个相对定位（position属性的值为relative）的元素上设置 top、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。
3. fixed：一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和left 属性都可用。移动浏览器支持差解决办法（）
4. absolute：absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，除了它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指p osition 值不是 static 的元素，这个元素是相对定位的。如果父元素是 position: static; ，那么它的绝对定位子元素会跳过它直接相对于body元素定位。

 3.float属性

当元素浮动时，一个元素的位置依赖于放置在他周边的其他元素。那么围绕在他周边的是哪个元素呢？这个元素会换行吗？这一切都取决于围绕于他的元素的DOM（文档对象模型）。页面的内容设置了一个宽度，子元素的浮动确定了他们的位置，但浮动元素不会影响父元素的宽度。这样做会让父元素塌陷，从而使父元素的高度为“0”，以及忽略其他的属性。有几种不同方法可以用来清除浮动，而其中用得最多的是“overflow”技巧和"clearfix"技巧（更好）。用“overflow:auto;”,在IE浏览器中会给元素添加滚动条，这样一来，最好是直接使用“overflow:hidden;”来清除浮动。

“clearfix”技巧是基于在父元素上使用“:before”和“:after”两个伪类。使用这些伪类，我们可以在浮动元素的父容器前面和后面创建隐藏元素。“:before”伪类是用来防止子元素顶部的外边距塌陷，使用“display: table”创建一个匿名的“table-cell”元素。这也确保在IE6和IE7下具有一致性。“:after”伪类是用来防止子元素的底部的外边距塌陷，以及用来清除元素的浮动。

一个常见的方法是将定义一个类名，把这个类名加到需要清除浮动的容器上。例如使用“clearfix”清除浮动，Dan Cederholm为容器设置了一个类名“group”。在需要清除浮动的容器上添加这个类名“group”

1. 另一个布局中常用的CSS属性是 float 。Float 可用于实现文字环绕图片
2. clear：左浮动必须左clear
3. 
4. .clearfix:当图片比包含它的元素(父元素)还高时， 而且它是浮动的，于是它就溢出到了容器外面！使用如下css，（ie6可用 加 zoom：1；）http://bradfrost.com/blog/mobile/fixed-position/
5. 

 

4.百分比宽度：百分比是一种相对于包含块的计量单位。它对图片很有用。但当窗口宽度很窄时 有些的内容会以一种不太友好的方式被包裹起来。总而言之，选一种最合适你的内容的方式。

 

5.inline-block布局：多个小网格填满页面的设计可用可 display 属性的值 inline-block 来实现相同效果（比较简洁）。

inline-block布局注意事项：

• vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top
• 你需要设置每一列的宽度
• 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙

 

6.column：一系列新的CSS属性，可以帮助你很轻松的实现文字的多列布局。很新的标准，所以你需要使用前缀，并且它不被IE9及以下和Opera Mini支持。

刻意使用z-index效果实现图层效果

7.居中效果实现

水平居中：

行内元素inline：text-align: center;

块级元素block：margin: 0 auto;

多个块级元素居中：放入一个父块中并使他们为行内块级元素。

上下居中：

单行：设置相等的padding，或者使line-height与块高度相同

多行：单行的居中策略也能用。如果不行，文本很有可能是在一个table cell里，用vertical-align属性解决。如果还不行试试 flexbox

块级元素的上下居中：

1. 知道块元素高度：50%浏览器高度减去一半高度
2. 不知道块元素高度时：

　　3.使用flexbox

水平居中加上下居中：

　　1.如果宽高指定：50%完美搞定

　　2.不知道宽高：使用transform

使用flexbox属性：