css基础知识小结

1.盒子模型

在文档中，每个元素都被当成一个盒子模型，描述元素在文档内所占的空间。
每个盒子都由四部分组成：content，padding ，border，margin。
所以我们说， 一个盒子所占的空间大小应该是由这四部分相加的和。

但元素实际所占的宽度，应该是由border+padding+content组成的。其中的content也就是width值。

盒子模型分为IE盒模型和标准盒模型，他们之间唯一的区别是:
IE盒模型中：元素实际所占宽度=width=border+padding+content
标准盒模型中：元素实际所占宽度=width+padding+border

说到这里，就不的不提一下box-sizing属性：
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。也就是说，你可以通过这个属性选择你对某一元素要采取什么样的盒模型。
box-sizing有两个属性值：content-box（对应标准盒模型）和border-box（对应IE盒模型）。
还有一点需要注意，使用这个属性，不同的浏览器有不同的属性名的写法：

div{box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */width:50%;float:left;}

2.BFC

BFC我们可以通俗的理解为一个独立的布局环境，也是页面中的一块渲染区域，并且有着一套自己的渲染规则，他决定了其子元素将如何定位，以及与其他元素的关系和相互作用。

BFC是页面元素里一个独立存在作用块，它不影响它外面的布局，外面的元素也不会影响到BFC里面的布局。我们可以把他想象成一个大的包含块，对于其内部的成员，他有着自己的布局规则。(说道这里有木有感觉有点熟悉，好像和弹性布局的感觉优点像哦)

那么，BFC对与其内部的成员有那些布局规则呢？

1. 内部的Box会在垂直方向，从顶部开始一个接一个地放置。(包括inline-block box)
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加(垂直外边距叠加)
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. 计算BFC的高度时，浮动元素也参与计算。

BFC在处理与其他元素的关系时，又有什么规则呢？

1. BFC的区域不会与float box叠加。
2. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

我们可以利用BFC解决哪些问题呢？

1. 解决margin叠加问题 。(形成新的BFC)
2. . BFC 可以包含浮动的元素，清除浮动(解决父元素高度塌陷的问题)
3. BFC 可以阻止元素被浮动元素覆盖(两栏自适应布局)

我们要如何触发BFC呢
1. body 根元素
2. 浮动元素：float 除 none 以外的值
3. 绝对定位元素：position (absolute、fixed)
4. display 为 inline-block、table-cells、flex
5. overflow 除了 visible 以外的值 (hidden、auto、scroll)

3.浮动

使用浮动会带来那些影响呢

1. 设置了浮动的元素会脱离普通流。
2. 浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。
3. 元素同时应用了position: absolute及float属性，则float失效。
4. 设置浮动的元素只会对它后一个元素造成影响，不会对它前面的元素造成影响 。
5. 设置浮动的元素display值会变成block。
6. 文字环绕
7. 高度塌陷

怎样清除浮动
a.触发BFC，闭合浮动。(看上面)
b.通过在浮动元素的末尾添加一个空元素，设置 clear：both属性。

• 在浮动元素末尾添加新标签。
• 使用 br标签和其自身的 html属性。
• after 伪元素（最优）

4.水平垂直居中

相对于父元素绝对定位+top,left 50%+margin-left margin-top -50%

6.background-*系列属性

https://jsbin.com/xoruwiwipa/edit?html,css,output
css3新添加：http://www.w3school.com.cn/css3/css3_background.asp

7.选择器的优先级和选择器的效率

读取选择器的原则是从右到左。因此，我们书写的右边的最后一个选择器，被称作关键选择器，对于效率有决定性影响。很显然根据ID查找元素比根据className查找效率要高的多。

优先级高的选择器不一定效率高。
优先级判断方法：https://segmentfault.com/a/1190000003860309

8.伪类，伪元素

伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

转载自AlloyTeam：http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/

9.css动画

@keyframes创建动画
animation（动画名称+时长）执行动画

10.css3新特性

1.CSS3 边框(border-radius，box-shadow，border-image)
2.CSS3背景
background-size:规定背景图片的尺寸
background-origin:规定背景图片的定位区域，背景图片可以放置于 content-box、padding-box 或 border-box 区域。
background-clip:规定背景的绘制区域。border-box，padding-box ，border-box
3.CSS3文字效果
text-shadow：文本阴影
word-wrap：规定文本的换行规则。
….
http://www.w3school.com.cn/css3/css3_text_effect.asp
4.CSS3字体
@font-face：可以选择自己喜欢的字体。
您必须首先定义字体的名称（font-family比如 myFirstFont），然后指向该字体文件。
5.CSS3 的 Transitions(过渡), Transforms(转换) 和 Animation(动画)

6.CSS3 的多列布局
7.新增伪类选择器
elem:nth-child(n)
elem:nth-last-child
elem:only-child
elem:nth-of-type(n)
elem:first-of-type和elem:last-of-type
elem:only-of-type
elem:empty
8.可变更的盒模型
box-sizing属性
9.可伸缩的布局方式
弹性布局

11.响应式布局

流式布局+媒体查询+viewport

12.弹性布局

简便、完整、响应式地实现各种页面布局
使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。
https://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html

13.css hack

选择器hack 属性hack 条件hack
http://blog.csdn.net/freshlover/article/details/12132801