CSS

[tanxukun]

BFC Block Formatting Context

块格式化上下文，具有BFC特性的元素可以看做隔断的独立容器，容器里面的元素不会影响外面的元素

触发方式

• 根元素
• 浮动元素 float: left | right
• overflow不为visible，即为auto | scroll | hidden
• display: inline-block | table-cell | table-caption | table | inline-table | flex | inline-flex | grid | inline-grid
• position: absolute | fixed

  特性

• 页面上的独立容器，子元素不会影响外面的元素
• 内部的块级盒会在垂直方向上一个接一个排列
• 属于同一个BFC的两个相邻容器的上下margin会重叠，不同BFC容器不会发生边距重叠
• 计算BFC高度时浮动元素也参于计算
• BFC的区域不会与浮动容器发生重叠
• 元素的margin-left与其包含块的border-left相接触

[tanxukun]

盒模型

包裹的就是一个盒模型，然后里面又包含了很多盒模型 盒模型分为W3C标准盒模型和IE盒模型 #### W3C盒模型： 1. width = 内容宽度 2. 实际宽度 = width + border + padding #### IE盒模型： 1. width = 内容宽度 + border + padding 1. 实际宽度 = width DOCTYPE声明的话可以统一每个浏览器的盒模型标准 通过box-sizing: 'content-box' | 'border-box'可以设置

[tanxukun]

Flex布局

• flex-direction: row(默认) | row-reverse | column | column-reverse 主轴方向
• flex-wrap: nowrap(默认不换行) | wrap(换行) | wrap-reverse(换行，从下往上)
• flex-flow: 为简写，默认为row nowrap
• justifi-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 多根轴线的垂直对齐方式，属性痛align-items

项目(元素)属性

• order: number 数值越小排列越靠前
• flex-grow: number 放大比例，默认为0，即即使存在剩余空间也不放大；如果所有项目的flex-grow: 1，他们将等分
• flex-shrink: number 缩小比例，默认为1，即空间不足时该空间将缩小，为0时即使空间不够也不缩小
• flex-basis: 默认为auto 项目占据主轴的size，根据主轴方向判定为width或height,会覆盖本身的width或height
• flex: 简写，默认为0 1 auto，后两个属性可选 flex:1 代表flex: 1, 1, 0%
• align-self: auto(默认，继承父元素align-items,如果没有父元素则等同于stretch) | flex-start | flex-end | center | baseline | stretch

[tanxukun]

文字省略号

• 单行: overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
• 多行: overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3

[tanxukun]

不要使用display: inline-block

example: 行块盒和行块盒直接会把所有的空格合并成一个空格，会有间隙，但是生产环境会压缩代码，没有了空格UI显示会不一致