ie安全设置相对应得值_重学前端：CSS的定位机制是什么?position有哪些值？弹性布局呢...

学习布局前须知道 CSS 中的定位机制。

标准文档流(Normal Flow)

浮动(Float)

绝对定位(Absolute Positioning)

标准文档流：从上到下，从左到右的输出文档内容。它由块级(block)元素和行级元素组成，且它们都是盒子模型。

布局是指浏览器将元素以正确的大小摆放在正确的位置上。

display：

设置元素的显示方式

display:block

• 默认宽高为父元素宽高
• 可设置宽高
• 换行显示
• 默认为block的元素：
  ,

  ,

  ~

  ,

  • ,

  display:inline

  • 默认宽度为内容宽度
  • 不可设置宽高
  • 同行显示(元素内部可换行)
  • 默认为inline的元素：, , , ,

  display:inline-block

  • 默认宽度为内容宽度
  • 可设置宽高
  • 同行显示
  • 整块换行
  • 默认为inline-block的元素：, , ,

  display:none

  • 设置元素不显示

  display:none 与 visibility:hidden 的区别为 display:none 不显示且不占位，但 visibility:hidden 不显示但占位。

  position

  position 用于设置定位的方式与top right bottom left z-index 则用于设置参照物位置(必须配合定位一同使用)。

  三种定位形式

  • 静态定位(static)
  • 相对定位(relative)
  • 绝对定位(absolute、fixed)

  position: static | relative | absolute | fixed/* 默认值为 static */

  position:relative

  • 相对定位的元素仍在文档流之中，并按照文档流中的顺序进行排列。
  • 参照物为元素本身的位置。

  最常用的目的为改变元素层级和设置为绝对定位的参照物。

  

  position:absolute

  建立以包含块为基准的定位，其随即拥有偏移属性和 z-index 属性。

  • 默认宽度为内容宽度
  • 脱离文档流
  • 参照物为第一个定位祖先或根元素( 元素)

  

  position:fixed

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

  NOTE：宽高的100%的参照依然为视窗(例：网页遮罩效果)

  

  top/right/bottom/left

  

  其用于设置元素边缘与参照物边缘的距离，且设置的值可为负值。在同时设置相对方向时，元素将被拉伸。

  z-index

  其用于设置 Z 轴上得排序，默认值为 0 但可设置为负值。(如不做设置，则按照文档流的顺序排列。后面的元素将置于前面的元素之上)

  

  z-index 栈

  父类容器的 z-index 优于子类 z-index 如图

  

  float

  CSS 中规定的定位机制，其可实现块级元素同行显示并存在于文档流之中。浮动仅仅影响文档流中下一个紧邻的元素。

  float: left | right | none | inherit

  • 默认宽度为内容宽度
  • 脱离文档流(会被父元素边界阻挡与position脱离文档流的方式不同)
  • 指的方向一直移动

  

  float 元素在同一文档流中，当同时进行 float 时它们会按照文档流中的顺序排列。(当所有父元素中的所有元素脱离文档流之后，父元素将失去原有默认的内容高度)

  

  注意：float 元素是半脱离文档流的，对元素是脱离文档流，但对于内容则是在文档流之中的(既元素重叠但内容不重叠)。

  

  clear

  clear: both | left | right | none | inherit

  • 应用于后续元素
  • 应用于块级元素(block)

  使用方法：

  优先级自上而下

  1. clearfix 于父元素
  2. 浮动后续空白元素 .emptyDiv {clear: both}
  3. 为受到影响的元素设置 width: 100% overflow: hidden 也可
  4. 块级元素可以使用
     不建议使用，影响 HTML 结构

  /* clearfix */.clearfix:after { content: "."; /* Older browser do not support empty content */ visibility: hidden; display: block; height: 0; clear: both;}.clearfix {zoom: 1;} /* 针对 IE 不支持 :after */

  flex

  

  弹性布局可用于多行自适应，多列自适应，间距自适应和任意对齐。

  创建 flex container

  display: flex/* 弹性容器内的均为弹性元素*/

  flex item

  只有弹性容器在文档流中的子元素才属于弹性元素。

  Block Element

  Inline Element

  Absolute Block Element

  flex 方向

  flex-direction

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

  

  flex-wrap

  flex-wrap: nowrap | wrap | wrap-reverse

  

  flex-flow

  flex-flow 为 flex-wrap 与 flex-direction 的简写，建议使用此属性(避免同时使用两个属性来修改)。

  flex-flow:  || 

  

  order

  order 的值为相对的(同被设置和未被设置的值相比较)，当均为设置时默认值为 0 则按照文档流中的顺序排列。

  order: 

  

  

  flex 弹性

  flex-basis

  其用于设置 flex-item 的初始宽高(并作为弹性的基础)。如果 flex-direction 是以 row 排列则设置宽，如以 column 排列则设置高。

  flex-basis: main-size | 

  flex-grow

  伸展因子，其为弹性布局中最重要的元素之一，flex-grow 设置元素可用空余空间的比例。flex-container 先安装宽度(flex-basis)进行布局，如果有空余空间就按照 flex-grow 中的比例进行分配。

  Width/Height = flex-basis + flex-grow/sum(flow-grow) * remain

  flex-grow: initial: 0

  

  

  

  flex-shrink

  收缩因子，用于分配超出的负空间如何从可用空间中进行缩减。

  flex-shrink: initial: 1

  Width/Height = flex-basis + flow-shrink/sum(flow-shrink) * remain

  remain 为负值，既超出的区域。

  

  flex

  其为 flex-grow flex-shrink flex-basis 的值缩写。

  flex:  ||  || initial: 0 1 main-size

  flex 对齐

  justify-content

  其用于设置主轴(main-axis)上的对其方式。弹性元素根据主轴(横向和纵向均可)定位所以不可使用 left 与 right 因为位置为相对的。(行为相似的属性有 text-align)

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

  

  align-items

  其用于设置副轴(cross-axis)上的对其方式。(行为相似的属性有 vertical-align)

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

  

  align-self

  其用于设置单个 flex-item 在 cross-axis 方向上的对其方式。

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

  

  align-content

  其用于设置 cross-axis 方向上的对其方式。

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