关于css的一切(updating...)

1.盒模型

• 从内二外，内容(content),内边距(padding),边框(border),外边距(margin)
• 分为IE怪异盒子模型，W3C标准盒子模型
• 标准盒子模型，box-sizing:content-box；宽高指context区宽高
• IE怪异盒子模型，box-sizing:border-box；宽高 = content + padding + border

2.BFC（块级格式上下文）

浮动元素和绝对定位元素，非块级盒子的块级容器，以及overflow值不为visiable的块级盒子，都为他们的内容创建新的BFC(Block formatting context),特别注意BFC是一块独立的渲染区域。
BFC作用：

1. 清除内部浮动,主要是触发父div的BFC属性，使得子div都处在父div的同一个BFC区域之内。
2. 避免文字环绕
3. 分属于不同的BFC时，可以阻止margin重叠

如何生成BFC：

1. 根元素，即html本身就是一个BFC，遵守默认垂直分布

2. float的值不为none，即浮动元素会形成BFC独立出来

3. position为absolute或fixed

4. overflow的值不会visible，因为内容不会被修剪，会呈现在元素框之外
   BFC的布局规则：

5. 内部的box会在垂直方向排列

6. 内部子元素会发生margin重叠

7. 独立容器，与外界元素互不干扰

3.css选择器

权值越大，优先级越高。
css权重计算规则：

1. 内联样式，权值为1000，
2. ID选择器，权值为0100，
3. class类选择器，伪类和属性选择器，权值为0010
4. 标签选择器和伪元素选择器，权值为0001
5. 加上！import，表示这个样式的优先级是最高的，比内联样式还要高。

css优先级规则：

• css选择规则的权重不同时，权值高的选择器优先
• css选择规则的权重相同时，后定义的选择器规则优先
• css属性后加！import时，无条件绝对优先。

4.css的rem,em,vw,vh

• em。相对长度单位，根据父元素的font-size的倍数
• rem。相对长度单位，相对于根元素(html)font-size的倍数
• vw。相对于视窗的宽度，视窗被均分为100个单位的vw。
• vh。相对于视窗的高度，视窗被均分为100个单位的vh。

5.flex布局

flex布局被称为“弹性布局”。采用flex布局的元素，称为“flex容器”。它的所有子元素自动称为容器成员，称为flex item。容器具有6个属性。

• 1.flex-direction。决定主轴的方向，即item排列方向。
• 2.flex-wrap。item排列在一条线上，若一条线排不下，可选择以下3个值。
  nowrap：默认不换行
  wrap：换行，第一行在上方
  wrap-reverse：换行，第一行在下方。
• 3.flex-flow。是flex-direction和flex-wrap的简写
• 4.justify-content。定义item在主轴上的的对齐方式，可选5个值
  flex-start：靠左对齐
  flex-end：靠右对齐
  center：居中
  space-between：两端对齐，item之间间隔相等
  space-around：每个item两侧的间隔相等。所以，item之间的间隔比item与边框的间隔大一倍。
• 5.align-items。定义item在交叉轴（垂直于主轴的轴）上如何对齐。5个值
  flex-strat：交叉轴起点对齐
  flex-end：交叉轴终点对齐
  center：交叉轴中心对齐
  baseline：item的第一行文字的基线对齐
  stretch（默认值）：如果item尾设置高度或设为auto，将占满整个容器高度
• align-content。定义多根轴线的对齐方式。如果item就一条轴线，该属性不起作用。6个值

项目item的6个属性：

• 1.order。定义项目排列的殊勋，数值越小，排列越靠前，默认为0
• 2.flex-grow。定义item放大的比例，默认为0。即如果存在剩余空间，也不放大。
• 3.flex-shrink。定义项目的缩小比例，默认为1。如果空间不足，项目将缩小。
• 4.flex-basis。定义在分配多余空间之前，item占据主轴的空间，默认为auto，即item的大小 。
• 5.flex。属性是flex-grow，flex-shrink，flex-basis的缩写。
• 6.algin-self。允许单个item与其他item有不一样的对齐方式，可以覆盖aligin-items，默认为auto，即继承父元素的aligin-items属性，如果没有父元素，则等同于stretch。属性值和algin-items一样。

5.css定位

1.static： 所有元素默认状态。没有定位，不能边偏移，即left,top等等不生效。
2.absolute： 绝对定位。向上找一个定位的父元素为基准来定位。否则，以浏览器窗口定位
3.relative： 相对定位。基于默认状态下(static)为基准偏移定位。
4.fixed： 固定定位。以浏览器为基准定位。
5.inherit： 继承父元素的定位置定位。

absolute和fixed的区别：

• 没有滚动条下没有差异；有滚动条，fixed定位不会随滚动条移动而移动，而absolute会。

6.块级元素，行内元素，行内块元素

块级元素（block）：元素呈块状。有自己的宽度和高度

• 每个块级元素都是独自占一行。
• 元素的高度、宽度、行高、边距都是可以设置的。
• 元素的宽度如果不设置的话，就默认为父元素的宽度
• 常见的块元素，例如：div，p，h系列，li，ul，table等等

行内元素（inline）：行内元素不能设置宽度和高度，但可以与其他的行内元素位于同一行。

• 行内元素可与行内元素共享一行，即相邻的行内元素会排列在同一行
• 行内元素的高度、宽度、行高及顶部和底部边距都不可以设置。
• 元素的宽度就是其包含的文字或图片的宽度，不可改变。
• 元素的高度一般有元素内部的字体大小决定。
• 常见的行内元素，例如：a,select,input,span等

行内块元素（inline-block）：既有块级元素的特点，也有行内元素的特点。

• 可以设置高度、宽度、行高、以及边距。
• 和其他行内或行内块级元素防止在同一行。

7.文档流和文本流

文档流：又称常规流（normal flow）

• 指元素按照其在HTML中的位置顺序决定排布的过程。
• 块级元素自上而下排列
• 行内元素从左至右排列

文本流: 大概来说就是文档读取和输出的顺序，通常为从上而下，从左而右。

脱离文档流：float和absolute，fixed会脱离文档流

• float。其他盒子元素会无视这个元素，但其他盒子内的文字依然会为他让出位置，环绕在其周围。
  也就是脱离文档流，但不脱离文本流。

• 绝对定位。脱离文档流和文本流

8.text-aligin属性

水平居中

• 文本
• 行内元素
• 行内块元素

9.清除浮动

为什么要清除浮动？
为了解决父元素因为子级元素浮动引起的内部高度为0的问题。
父元素设置border，不设置高。子元素为big和small。

当我给两个子元素设置float时。

父元素的高度就会变为一条线。
清除浮动的方法

• 给父元素加上overflow：hidden。副作用：超出的内容会被隐藏。

• 额外标签法。在最后一个浮动元素后添加一个额外标签，
  设置clear：both

• 使用伪元素清除浮动
  

10.display、visibility、opacity的区别

display：none

• 元素脱离文档流（包括子元素），即属性会继承
• 绑定事件无法触发
• 但DOM节点存在，也就是还存在于DOM树和CSSOM中，但不在render树中，仍可以用js操作

visibility：hidden

• 元素不可见
• 该属性不会继承。
• 绑定事件不能触发

opacity：0

• 元素透明度为0
• 被强制继承。子元素设置为1，元素仍无法显示
• 绑定事件可以触发。