关于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作用：

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

如何生成BFC：

根元素，即html本身就是一个BFC，遵守默认垂直分布
float的值不为none，即浮动元素会形成BFC独立出来
position为absolute或fixed
overflow的值不会visible，因为内容不会被修剪，会呈现在元素框之外
BFC的布局规则：
内部的box会在垂直方向排列
内部子元素会发生margin重叠
独立容器，与外界元素互不干扰

3.css选择器

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

内联样式，权值为1000，
ID选择器，权值为0100，
class类选择器，伪类和属性选择器，权值为0010
标签选择器和伪元素选择器，权值为0001
加上！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，元素仍无法显示
绑定事件可以触发。