display 属性
- block 块级
- inline 行内
- none 隐藏
注意: display:none; 不占用空间,visibility:hidden;占用空间
水平居中
margin: auto;
1 | #main{ |
盒模型
元素的内边距和边框不会再增加他的宽度
box-sizing: border-box
;
1 | .fancy { |
或者
1 | * { |
注意: 仅IE8以上支持.
position
static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”,一个 position 属性被设置为其他值的元素表示它会被“positioned”。
relative 表现的和 static 一样,除非你添加了一些额外的属性。 在一个相对定位(position属性的值为relative)的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。
一个固定定位(position属性的值为fixed)元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。和 relative 一样, top 、 right 、 bottom 和 left 属性都可用。 一个固定定位元素不会保留它原本在页面应有的空隙(脱离文档流)。
注意: 令人惊讶地是移动浏览器对 fixed 的支持很差。 http://bradfrost.com/blog/post/fixed-position/
absolute 是最棘手的position值。 absolute 与 fixed 的表现类似,但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位(position属性的值为absolute)的元素没有“positioned”祖先元素,那么它是相对于文档的 body 元素,并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。
float 可用于实现文字环绕图片
1 | img{ |
clear 控制浮动.
使用 clear 我们就可以将这个段落移动到浮动元素 div 下面。你需要用 left 值才能清除元素的向左浮动。你还可以用 right 或 both 来清除向右浮动或同时清除向左向右浮动。
清除浮动(clearfix hack)
1 | .clearfix { |
注意: zoom: 1;
,针对ie6
inline-block 布局
- vertical-align 属性会影响到 inline-block 元素,你可能会把它的值设置为 top 。
- 你需要设置每一列的宽度
- 如果HTML源代码中元素之间有空格,那么列与列之间会产生空隙
column
1 | .three-column { |
注意: 不被IE9及以下和Opera Mini支持
flexbox
1 | .container { |
- 使用 Flexbox 的居中布局
.vertical-container { height: 300px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
ui框架