CSS布局

元素的显示方式

display:none | inline | block | inline-block 

• block:块级元素
• inline:内联元素
• inline-block:内联块元素

说明：

• 如果display设置为none，float及position属性定义将不生效；

• IE6,7支持inline元素转换成inline-block，但不支持block元素转换成inline-block，所以非inline元素在IE6,7下要转换成inline-block，需先转换成inline，然后触发hasLayout，以此来获得和inline-block类似的效果；你可以这样：

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

display:none vs visibility:hidden

display:none:元素不显示，不占据位置
visibility:hidden:元素不显示，还占着原位置

块级元素水平居中

<style>
    content{
        margin:auto;
    }

    ul{
        text-align:center;
    }
    li{
        display:inline-block;
    }
</style>

<div>
    <div class="content">content area</div>
</div>

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

元素定位

position：static | relative | absolute | fixed 

• 默认值：static
• 当position的值为非static时，其层叠级别通过z-index属性定义。
• z-index auto： 元素在当前层叠上下文中的层叠级别是0。
  • z-index用于确定元素在当前层叠上下文中的层叠级别，并确定该元素是否创建新的局部层叠上下文。
  • 每个元素层叠顺序由所属的层叠上下文和元素本身的层叠级别决定（每个元素仅属于一个层叠上下文）。
  • 同一个层叠上下文中，层叠级别大的显示在上面，反之显示在下面。
  • 同一个层叠上下文中，层叠级别相同的两个元素，依据它们在HTML文档流中的顺序，写在后面的将会覆盖前面的。
  • 不同层叠上下文中，元素的显示顺序依据祖先的层叠级别来决定，与自身的层叠级别无关。
• relative: 相对定位，不脱离文档流
• absolute: 绝对定位，脱离文档流，默认宽度为内容宽度，参照物为第一个非static定位的祖先元素或者根元素
• fixed: 固定定位 与absolute一致，宽度为内容宽度，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。

三行自适应布局

<style>
    .head{position:absolute;top:0;left:0;width:100%;height:100px}
    .body{position:absolute;top:100px;left:0;bottom:100px;right:0}
    .foot{position:absolute;bottom:0;left:0;width:100%;height:100px}
</style>

<div class="head"></div>
<div class="body"></div>
<div class="foot"></div>

float布局

float：none | left | right

• float在绝对定位和display为none时不生效。
• 默认宽度为内容宽度
• 半脱离文档流
  • 对元素脱离文档流，对文档不脱离文档流
• float 的元素在同一文档流当中

清除浮动

clear:none | left | right | both

• 默认值：none
• 适用于：块级元素
  常用清除浮动方式

.clearfix::before,
.clearfix::after{
    content:"";
    display:block;
    clear:both;
}
.clearfix{zoom:1}

弹性布局

flex ie9及以下不支持

创建 flex container 弹性容器

 display:container

弹性容器内在文档流中的子元素称为弹性元素 flex item

flex-direction 弹性元素排列方向

flex-direction:flex-direction：row | row-reverse | column | column-reverse

• 默认值：row
• 适用于：flex容器
• row： 主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
• row-reverse： 对齐方式与row相反。
• column： 主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
• column-reverse： 对齐方式与column相反。

flex-wrap 弹性元素换行

flex-wrap：nowrap | wrap | wrap-reverse

• 默认值：nowrap
• 适用于：flex容器
• nowrap： flex容器为单行。该情况下flex子项可能会溢出容器
• wrap： flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
• wrap-reverse： 反转 wrap 排列。

flex-flow：<' flex-direction '> || <' flex-wrap '>

flex-direction和flex-wrap的合并

order

order：<integer>

• <integer>： 用整数值来定义排列顺序，数值小的排在前面。可以为负值

---

flex-basis

flex-basis：<length> | <percentage> | auto | content

• 定义弹性元素的宽度
• 默认值：auto
• 适用于：flex子项

flex-grow

flex-grow：<number>

• 用于分配容器空余空间比例
• 默认值：0
• 适用于：flex子项

flex-shrink

flex-shrink：<number>

• 当弹性元素内容超出容器时，用于分配每个元素的收缩比率
• 默认值：1
• 适用于：flex子项

---

flex缩写

flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>

• 默认值：看各分拆属性
• 适用于：flex子项

复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。

• 如果缩写「flex: 1」, 则其计算值为「1 1 0%」
• 如果缩写「flex: auto」, 则其计算值为「1 1 auto」
• 如果「flex: none」, 则其计算值为「0 0 auto」
• 如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

---

justify-content 分配剩余空间，主轴方向的对齐方式

justify-content：flex-start | flex-end | center | space-between | space-around

• 默认值：flex-start
• 适用于：flex容器
• flex-start： 弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
• flex-end： 弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
• center： 弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。
• space-between： 弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start'。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
• space-around： 弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

align-items 辅轴方向的对齐方式

align-items：flex-start | flex-end | center | baseline | stretch

• 默认值：stretch
• 适用于：flex容器
• flex-start： 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
• flex-end： 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
• center： 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
• baseline： 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
• stretch： 如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

align-self 设置单个弹性元素在辅轴方向上的对齐方式

align-self：auto | flex-start | flex-end | center | baseline | stretch

• 默认值：auto
• 适用于：flex子项

align-content 多行的情况下弹性元素的对齐方式

align-content：flex-start | flex-end | center | space-between | space-around | stretch

• 默认值：stretch
• 适用于：多行的弹性盒模型容器