CSS基础笔记

1.标准的CSS的盒子模型，与低版本IE的盒子模型的不同

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin

低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

2.box-sizing属性

用来控制元素的盒子模型的解析模式，默认为content-box
context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽

border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

3.可以继承的属性

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

4.position

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；

fixed(固定定位)：所固定的参照对像是可视窗口。

5.元素竖向的百分比设定

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

6.全屏滚动的原理

原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现。

overflow：hidden；transition：all 1000ms ease；

7.::before 和 :after中双冒号和单冒号

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

8.让Chrome支持小于12px 的文字

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

9.position:fixed;在android下无效

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

10.li与li之间有看不见的空白间隔

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
解决方法：
可以将<li>代码全部写在一排
浮动li中float：left

在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

另：display:inline-block 显示间隙时

有空格时候会有间隙 解决：移除空格
margin正值的时候 解决：margin使用负值

使用font-size时候 解决：font-size:0、letter-spacing、word-spacing