css页面布局
css页面布局
一、display
二、margin: 0 auto;水平居中
三、max-width: 600px;
在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧！
四、box-sizing(支持ie8)：设置这个，则加入内边距和边框不会增加它的宽度。
用法：
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
五、position（子绝父相）
1）position: static;不会被特殊定位
2）position: relative;（相对定位）
例：设置 top、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。
3）position: fixed;固定定位（是指相对于视窗来定位，所以页面滚动还是会停留在相同位置，即脱离文档流）。
注：移动浏览器对 fixed 的支持很差
4）position: absoult;绝对定位（不是相对于视窗而是相对于最近的一个“positioned”元素，没有则相对于文档的body元素，而且会随着页面的滚动而滚动）注：一个“positioned”元素是指 position 值不是 static 的元素。
六、float 浮动（可实现文字环绕图片）
七、clear 清除浮动
1）控制浮动：clear:left/right/both;
2）clearfix hack 清除浮动：overflow: auto;(若想支持IE6，则加上zoom: 1;)
八、百分比宽度：相对于包含块的计量单位
九、媒体查询（针对不同浏览器，不同设备进行呈现不同效果上午策略）
例：@media screen and (min-width:600px) { //表示屏幕 >= 600px时才会应用到下面样式；若为max-width，则<= 600px才会应用到
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
十、inline-block
当使用inline-block布局时:
- vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。//把元素的顶端与行中最高元素的顶端对齐
- 你需要设置每一列的宽度
- 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙
十一、column 设置列宽和列数
column-width 列的宽度
column-rule 规定列之间的宽度、样式和颜色。
-moz-column-count: 3; //设置三列
-moz-column-gap: 1em; //列间的间隔
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
-moz-column-rule:4px outset red; /* Firefox */
-webkit-column-rule:4px outset red; /* Safari and Chrome */
column-rule:4px outset red;
十二、弹性布局 flexible box
好处：第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局；
第二，可以指定项目沿着主轴或侧轴按比例分配额外空间（容器额外空间），从而调整伸缩项目的大小；
第三，可以指定项目沿着主轴或侧轴将伸容器额外空间，分配到项目之前、之后或之间；
第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
第五，可以控制元素在页面上的布局方向；
第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
1.任何容器都可以指定为Flex布局；行内元素也可以；webkit内核的浏览器必须加上-webkit前缀
.box{display: flex;display: -webkit-flex;}
注：设为Flex布局后，子元素的float、clear和vertical-align属性将失效。
2.容器的属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
(1)flex-direction决定项目的排列方向（默认按row排列）
.box { flex-direction: row | row-reverse | column | column-reverse;}
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
