布局的三个常用属性：
display:inline-block
vertical-align: top; 《深入理解CSS：line-height、vertical-align》
float:left
元素脱离正常流，但是文字依环绕它，浮动元素没有脱离文字流。
清楚浮动的方法：1、clear：both/left/right/,另外一类是创建BFC
position:absolute 、relative、fixed 用完定位后马上要接位置间距
top：
left：
right：
bottom：
display
另一个常用的display值是 none 。一些特殊元素的默认 display 值是它，例如 script 。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。
它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。
display:none ，通过F12可以看到，元素不可见且元素不占据空间。
visibility：hidden；通过F12可以看到，元素不可见，单元素依然占据空间。
常见的例子是：把 li 元素修改成 inline，制作成水平菜单。
BFC ( Block Formatting Context) 也就是块级格式化上下文，创建BFC有以下情况：
float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。
BFC的特性就是包裹浮动的元素。按照我的理解，当你创建BFC之后元素就会把里面的东西视为自己的东西，包括浮动元素，然后创建一个私有领域给包裹进来
width/max-width
设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。
box-sizing
响应式设计
“响应式设计（Responsive Design” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！
网友评论