css布局
display
margin:auto
max-width 所有的主流浏览器包括IE7+在内都支持 max-width
,所以放心大胆的用吧。
盒模型
box-sizing:border-box; box-sizing
是个很新的属性,目前你还应该像我之前在例子中那样使用 -webkit-
和 -moz-
前缀。这可以启用特定浏览器实验中的特性。 同时记住它是支持IE8+
position
float Float 可用于实现文字环绕图片
clear clear
属性被用于控制浮动
清除浮动(clearfix hack) :overflow:auto
百分比宽度 百分比是一种相对于包含块的计量单位。它对图片很有用:如下我们实现了图片宽度始终是容器宽度的50%。
媒体查询 “响应式设计(Responsive Design)”是一种让网站针对不同的浏览器和设备“响应”不同显示效果的策略,这样可以让网站在任何情况下显示的很棒!
媒体查询是做此事所需的最强大的工具。
inline-block 你可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用 float
是一种选择,但是使用 inline-block
会更简单。你得做些额外工作来让IE6和IE7支持 inline-block
。有些时候人们谈到 inline-block
会触发叫做 hasLayout
的东西,你只需要知道那是用来支持旧浏览器的。
可以使用 inline-block
来布局。有一些事情需要你牢记:
vertical-align
属性会影响到inline-block
元素,你可能会把它的值设置为top
。- 你需要设置每一列的宽度
- 如果HTML源代码中元素之间有空格,那么列与列之间会产生空隙
column:实现文字的多列布局;CSS columns是很新的标准,所以你需要使用前缀,并且它不被IE9及以下和Opera Mini支持。
flexbox 目前只能在支持 flexbox 的 Chrome 浏览器中运行