重学前端之CSS(五)CSS布局的属性:浮动、定位、flex

  这一篇文章主要是记录CSS布局属性,涉及到的有display、float、position、flex、Grid布局的API的使用和其中遇到问题的解决方式。

CSS布局之display

  这里只介绍 display属性值为inline、inline-block、block的区别，别的就不介绍了。

一、display定义
  display: CSS属性指定了元素的显示类型。

二、display的属性值及其特点
  1) block: 元素类型被定义为块级元素。
   特点：
    a. 块级元素会独占一行,默认情况下宽度100%
    b. 可以设置width、height、padding、margin、border
  2) inline-block: 元素类型被定义为行内块级元素。
   特点：
    a. 同一行显示
    b. 可以设置width、height、padding、margin、border
  3) inline: 元素类型被定义为行内块级元素。
   特点:
    a. 同一行显示
    b. 不能设置width、height、margin的上下,可以设置margin-left、margin-right、padding、border

参考链接: MDN---display

三、如何消除display:inline-block元素之间的间距？
  间距产生的原因: 元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。

  消除间距的方法:
    1) 元素间留白间距出现的原因就是标签之间的空格，因此去掉HTML中的空格或使用HTML注释符将子元素连接起来从而消除间距。
    2)父元素的font-size设置为0，基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1px的间距)

.clear-space {
    font-size: 0;
}

    3) 设置子元素的margin为负值，但是每个浏览器行内块级元素的空隙大小不同，所以这个行不通
    4) 设置父元素的样式

.wrap {
    display: table;
    width: 100%; /* 兼容IE、opear、firefox浏览器(safari没有测试),不然没有高度 */
    word-spacing:-1em; /* 兼容IE、opear、firefox浏览器(safari没有测试),不然会有间隙 */
}

参考来源: display:inline-block元素之间空隙的产生原因和解决办法

CSS布局之浮动

一、定义
  float: float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常移动(文档流)中移除，尽管仍然保持部分的流动性。

二、float的属性的值
  1) none: 表明元素不进行浮动的关键字。
  2) inherit: 从父元素继承float属性的值。IE8支持。
  3) left: 表明元素必须浮动在其所在的块容器左侧的关键字。
  4) right: 表明元素必须浮动在其所在的块容器右侧的关键字。
  5) inline-start: 关键字，表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧。默认情况下就是向左浮动(只有火狐有用)
  6) inline-end: 关键字，表明元素必须浮动在其所在块容器的结束一侧，在ltr脚本中是右侧，在rtl脚本中是左侧。默认情况下就是向右浮动(只有火狐有用)
  来源: MDN---float

三、float的特点:
  1) 在float不为none的情况下，会创建BFC，没有margin合并
  2) 浮动元素会脱离文档流，导致父元素高度塌陷，因此需要清除浮动
  3) 浮动元素会像一个块级行内元素一样可以，设置宽高且不独占一行；当一行之上只有极小的空间可供浮动元素，那么这个元素会调至下一行，整个过程会持续到某一行拥有足够空间为止

四、清除浮动
  1) 父元素设置合适的高度
  优点：简单、代码少、容易掌握
  缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级不一样时，会产生问题
  建议：不推荐使用，只建议高度固定的布局时使用
  2) 结尾处添加空的元素，将其样式设置为 {clear: both; height: 0;}
  原理：利用CSS的clear:both清除浮动，让父级能自动获取到高度
  优点：简单、代码少、浏览器支持好、不容易出现怪问题
  缺点：会增加很多无用标签，不利于维护
  建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法
  3) 父元素通过伪元素和zomm来清除浮动

.clearfix { zoom: 1; } /* 兼容IE6/7,触发haslayout */
.clearfix:after {
    display: block;
    height: 0;
    content: "";
    visibility: hidden;
    clear: both;
}

  原理：IE8及以上和非IE浏览器才支持:after，原理也是利用了clear:both清除浮动，通过zoom(IE专有属性)来解决IE6、IE7浮动问题
  优点：浏览器支持好
  缺点：代码代码多
  建议：推荐使用，建议定义为公共类，以提高复用和便于维护
  4) 父级元素设置样式 voerflow:hidden
  原理：利用overflow:hidden触发BFC，BFC属于文档流，浏览器在布局时会计算其高度
  优点：简单、代码少、浏览器支持好
  缺点：不能和position配合使用，因为超出的尺寸会被隐藏
  建议：对没有使用position的元素使用
  5) 父元素一起浮动
  原理：float不为none时会触发一个BFC
  优点：没有优点
  缺点：会产生新的浮动问题
  建议：只做了解
  6) 了解的方法：
  a. overflow: auto/scroll
  原理：触发BFC，使浏览器计算其高度
  b. display: inline-block
  c. display: table/table-cell/table-row/table-caption
参考文章: 使用css清除浮动七种方法的优缺点

CSS定位

一、定位
  position: CSS的position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性决定了该元素的最终位置。
二、position属性的值
  1) static: 默认值，该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
  2) inherit: 规定应该从父元素继承position属性的值。w3school上说任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"，我测试了一下，IE8及以上都支持。
  3) relative: 该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。IE5上支持。
  4) absolute: 不为元素预留空间(脱离文档流)，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并(BFC)。IE5上支持。
  5) fixed: 不为元素预留空间(脱离文档流)，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。fixed 属性会创建新的层叠上下文。**当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先**。IE7支持。
  6) sticky: 盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。Edge16支持。

注:
  1) 大多数情况下，height和width 被设定为auto的绝对定位元素，按其内容大小调整尺寸。但是，被绝对定位的元素可以通过指定top和bottom ，保留height未指定（即auto），来填充可用的垂直空间。它们同样可以通过指定left 和 right并将width 指定为auto来填充可用的水平空间。在IE7及以上可以通过top/bottom、left/right来获取到想要的尺寸。
  2) 如果 top 和 bottom 都被指定（严格来说，这里指定的值不能为 auto ），top 优先。
  3) 如果指定了 left 和 right ，当 direction设置为 ltr（水平书写的中文、英语）时 left 优先， 当direction设置为 rtl（阿拉伯语、希伯来语、波斯语由右向左书写）时 right 优先。
参考来源: MDN--position

CSS布局之弹性布局(flex)

一、定义
  flex: 是Flexible Box的缩写，意为"弹性布局"，用来为盒模型提供最大的灵活性。在IE10使用前缀的情况下，可以使用flex。IE10需要加前缀-ms-才被支持。

  采用Flex布局的元素称为Flex容器(flex container)，简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目(flex item)，简称"项目"。

二、指定flex容器
  flex: 将对象作为弹性盒展示，类似于块级元素，独占一行，width默认100%。
  inline-flex: 将对象作为内联块级弹性盒显示，类似于行内块级元素，不独占一行。

三、容器属性
flex-direction: 决定主轴的方向(即项目的排列方向)。
  可选值为：
    row（默认值）：主轴为水平方向，起点在左端。
    row-reverse：主轴为水平方向，起点在右端。
    column：主轴为垂直方向，起点在上沿。
    column-reverse：主轴为垂直方向，起点在下沿
flex-wrap: 决定一条轴线排不下，如何换行。
  可选值为:
    nowrap（默认）：不换行。
    wrap：换行，第一行在上方。
    wrap-reverse：换行，第一行在下方。
flex-flow: 是flex-direction和flex-wrap的简写形式，默认值为 row nowrap。
justify-content: 定义了项目在主轴上的对齐方式。
  可选值为:
    flex-start（默认值）：左对齐
    flex-end：右对齐
    center： 居中
    space-between：两端对齐，项目之间的间隔都相等。
    space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items: 定义项目在交叉轴上如何对齐。
  可选值为:
    flex-start：交叉轴的起点对齐。
    flex-end：交叉轴的终点对齐。
    center：交叉轴的中点对齐。
    baseline: 项目的第一行文字的基线对齐。
    stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content: 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
  可选值:
    flex-start：与交叉轴的起点对齐。
    flex-end：与交叉轴的终点对齐。
    center：与交叉轴的中点对齐。
    space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
    space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    stretch（默认值）：轴线占满整个交叉轴。

四、项目属性
order: 该属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。可以为负数。值为<integer>。
flex-grow: 该属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。值为<number>。
flex-shrink: 该属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。值为<number>。
flex-basis: 该属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。值可以设为跟width或height属性一样的值，则项目占据固定空间。
flex: 该属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值
align-self: 该属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。可选值为: auto 、flex-start、flex-end、center、baseline、stretch。

注：设为Flex布局以后，子元素的flex、clear和vertical-align属性将失效。
来源:
  阮一峰flex布局: 语法篇
  flex布局教程:实例篇

Grid布局

网格布局(Grid): 将网页划分为一个个网格，可以随意组合不同的网格，做出各种各样的布局。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。IE不支持，Edge16支持。
这个API有点多，就不整理了，直接看阮一峰大佬的教程比较好。
学习资料:CSS Grid 网格布局教程

CSS布局之多列布局

一、定义
  多列布局: 一种多列组织内容的方式。
二、相关属性
  column-count： CSS属性，描述元素的列数。值为auto或者<integer>,用来描述元素内容被划分的理想列数。IE10支持。
  column-width： 设置在多列布局的理想列的宽度，column-width容器将具有可容纳的尽可能多的列，而它们的宽度均小于该column-width值。如果容器的宽度小于指定的值，则单列的宽度将小于声明的列的宽度。值为auto或<length>。为<length>时，值必须为正，否则声明无效。百分比值也无效。IE10支持。
  column-gap：该 CSS 属性用来设置元素列之间的间隔 (gutter) 大小。IE10支持。
  column-rule：该CSS是column-rule-width、column-rule-style、column-rule-color的简写，用来设置多列布局中列之间的线条的宽度、样式和颜色。IE10支持。
来源: MDN--多列布局

以上内容如有不对,希望大家指出,谢谢。