CSS布局

CSS

---

布局：页面元素的摆放模式

1、display

display:block
默认宽度为父级元素宽度
可设置宽高
换行显示
默认display：-div p h1-h6 ul form...
display:inline
默认宽度为内容宽度
不可设置宽高
同行显示，在元素内部可以换行
默认inline:span a lable cite em

block vs inline

dispaly	默认宽高	可设置宽高	起始位置
block	父元素宽度	是	换行
inline	内容宽度	否	同行

display:inline-block
默认宽度为内容宽度
可设置宽高
同行显示
整块换行
默认inline-block：input textarea select button...
display:none
设置元素不显示

display:none vs visibility:hidden
前者隐藏不占空间，后者占有空间

text-align只对行级元素起作用

如何实现浏览器兼容版的inline-block显示
解决IE6、IE7兼容性的方法：
  1、首先设置inline-block触发块元素，具有了layout的特性，然后设置display:inline使块元素呈现内联元素，此时layout的特性不会消失。
  2、直接设置display:inline，使用zoom:1触发layout。

{
display:inline-block;
*display:inline;
*zoom:1;
}

2、position

position：static | relative | absolute |fixed
position-设置定位方式
top，right，bottom，left，z-index - 设置位置
元素边缘参照物边缘距离

z-index
元素在Z轴上的排序
z-index栈：父级元素的z-index影响子元素的z-index。

position:relative
仍在文档流中
参照物为元素本身
使用场景：绝对定位的参照物

position:absolute
默认宽度为内容宽度
脱离文档流
参照物为第一个定为祖先/根目录

position:fixed
默认宽度为内容宽度
脱离文档流
参照物为视窗

布局案例：轮播头图、固定顶栏、遮罩、三行自适应布局

position:fixed 在ie6及以下不支持

3、float

 float:left|right|none|inherit
 默认宽度为内容宽度
 脱离文档流
 向指定的方向一直移动，直到被挡住
 float元素在同一个文档流中
 float元素半脱离文档流（对元素脱离文档流，对内容在文档流中）

clear清除浮动

clear:both|left|right|none|inherit
应用于块级元素、后续元素

1、增加空白元素清除浮动
<div class="cb"></div>
.cb{
clear:both;
height:0;
overflow:hiddden;
visibility:hidden;}

2、利用clearfix
<div class="body clearfix">
    <div></div>
    <div></div>
</div>
.clearfix:after{
content:',';
display:block;
clear:both;
height:0;
overflow:hiddden;
visibility:hidden;
}
IE下：clearfix{zoom:1;}

案例：两列布局

4、flex弹性布局

flex container

• flex item
• flex item
• ...

flex item 排列方向为main axis, 与主轴垂直的方向为cross axis(辅轴)。

flex container

display:flex;

flex item
在文档中的子元素（不能是孙元素，不能脱离文档流元素）
方向

flex-direction
flex-direction：row(行，从左向右)|row-reverse|column(列)|column-reverse

flex-wrap
flex-wrap：nowrap(不换行)|wrap|wrap-reverse(反向换行)

flex-flow
flex-flow：<'flex-direction'>(default:row)||<'flex-wrap'>(default:nowrap)

order
order:<interger>
initial:0

弹性

flex-basis
flex-basis:main-size|<width>
设置flex item的初始宽/高

flex-grow
flex-grow:<number>
initial:0
设置元素所能分配到的空余空间的比例
width = flex-basis + flow-grow/sum(flow-grow)*remain

flex-shrink
flex-shrink:<number>
initial:1
设置当容器空间不足时如何压缩子元素。
width = flex-basis + flow-shrink/sum(flow-shrink)*remain(负值)

flex
flex:<'flex-grow'>||<'flex-shrink'>||<'flex-basis'>
initial:0 1 main-size

对齐

justify-content(like text-align把剩余的空间分配)
justify-content:flex-start(0对齐)|flex-end(+→对齐)|center(居中)|space-between(将间隔平均分配首尾不分配)|space-around(首尾也分配)
设置main-axis方向上的对齐方式

align-items(like vertical-align）
align-items：flex-start(0对齐)|flex-end(+→对齐)|center(居中)|baseline(基线对齐)|stretch(拉伸充满)
设置cross-axis方向上的对齐方式

align-self
align-self：auto|flex-start|flex-end|center|baseline|stretch
设置单个flex item 在cross-axis方向上的对齐方式

align-content
align-content：flex-start|flex-end|center|space-between|space-around|stretch
设置cross-axis方向上行的对齐方式

flex ie9及以下不支持，目前主要用于移动web页面中