css整理

盒模型（标准盒模型，ie盒模型）

盒子由四个部分（或称区域）组成,每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

1. 标准盒模型（css->box-sizing:content-box）: 比如你设置盒子宽度为100px,那么content的宽度就是100px,不包含padding、margin、border;
2. ie(box-sizing:border-box):比如设置宽度为100px,这里的100px包含元素内容content、padding、border（ps：不包含margin）；

css伪类选择器

1. p:first-of-type 选择属于其父元素的首个元素
2. p:last-of-type 选择属于其父元素的最后元素
3. p:only-of-type 选择属于其父元素唯一的元素
4. p:only-child 选择属于其父元素的唯一子元素
5. p:nth-child(2) 选择属于其父元素的第二个子元素
6. :enabled :disabled 表单控件的禁用状态。
7. :checked 单选框或复选框被选中。

垂直水平居中

• css

.vertical-center{
    position: relative;
}
.vertical-center>div{
    position: absolute;
    top: 0;left: 0;bottom: 0;right: 0;
    margin: auto;
}
// 方法二、
.vertical-center{
    position: relative;
}
.vertical-center>div{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
// 方法三
.vertical-center{
    display: flex;
    align-items: center;
    justify-content: center;
}
// 方法四
.vertical-center{
    position: relative;
}
.vertical-center>div{
    position: absolute;
    top: calc(50% - 25px); // 减去当前元素的一半  前提（需要知道当前元素宽高）
    left: calc(50% - 25px);
}
//五
.vertical-center{
    text-align: center;
    line-height: 300px;
}
.vertical-center>div{
    display: inline-block; 
    vertical-align: middle;
    line-height: initial; 
    text-align: left;
}

• html

    
内部元素

postion属性

1. static（默认）：按照正常文档流进行排列；
2. relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
3. absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
4. fixed(固定定位)：所固定的参照对像是可视窗口。

常见的兼容性 附：css属性兼容性表

1. 清空margin、padding (*{margin:0;padding:0;})

2. 双倍边距bug：块状元素设置了float属性后，又设置了横向的margin值，在IE6下显示的margin值要比设置的值大；解决方案： 给float的元素添加 display:inline;将其转换为内联元素；

3. IE6（默认16px为最小）不识别较小高度的标签（一般为10px）。解决方案：给标签添加：overflow:hidden;给标签添加font-size:0;

4. 图片添加超链接时，在IE浏览器中会有蓝色的边框：解决方案：border:0或者border：none;

5. min-hieght 不兼容ie6。 解决方案：min-height:100px;_height:100px;min-height:100px;height:auto!important;height:100px;

6. IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。

7. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

8. 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

display:none与visibility：hidden的区别

1. display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
2. visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

BFC(Block Formatting Context)块级格式化上下文

• 定位方案：

1. 内部的Box会在垂直方向上一个接一个放置。

2. Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。

3. 每个元素的margin box 的左边，与包含块border box的左边相接触。

4. BFC的区域不会与float box重叠。

5. BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

6. 计算BFC的高度时，浮动元素也会参与计算。

• 下列方式会创建块格式化上下文

1. 根元素，即HTML标签
2. 浮动元素：float值为left、right
3. overflow值不为 visible，为 auto、scroll、hidden
4. display值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
5. 定位元素：position值为 absolute、fixed

注意 display:table也可以生成BFC的原因在于Table会默认生成一个匿名的table-cell，是这个匿名的table-cell生成了BFC。

媒体查询

1. 里边

2. CSS : @media only screen and (max-device-width:480px) {/css样式/

css 优化

避免后代选择符、使用紧凑写法、避免不必要的重复、语义命名类、精简规则（合并重复样式）

元素竖向的百分比

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

line-height

行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
多行文本垂直居中：需要设置display属性为inline-block。

让页面里的字体变清晰，变细用CSS怎么做

-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

postion:fixed android无效

参考原文：https://www.itcodemonkey.com/article/2853.html、http://www.fly63.com/article/detial/3303、https://segmentfault.com/a/1190000013023485