盒模型（标准盒模型，ie盒模型）
盒子由四个部分（或称区域）组成,每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。
- 标准盒模型（css->box-sizing:content-box）: 比如你设置盒子宽度为100px,那么content的宽度就是100px,不包含padding、margin、border;
- ie(box-sizing:border-box):比如设置宽度为100px,这里的100px包含元素内容content、padding、border（ps：不包含margin）；
css伪类选择器
- p:first-of-type 选择属于其父元素的首个元素
- p:last-of-type 选择属于其父元素的最后元素
- p:only-of-type 选择属于其父元素唯一的元素
- p:only-child 选择属于其父元素的唯一子元素
- p:nth-child(2) 选择属于其父元素的第二个子元素
- :enabled :disabled 表单控件的禁用状态。
- :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
<div class="vertical-center boxs bgcolor">
<div class="child bgcolor2">内部元素</div>
</div>
postion属性
-
static（默认）：按照正常文档流进行排列； -
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位； -
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位； -
fixed(固定定位)：所固定的参照对像是可视窗口。
常见的兼容性 附：css属性兼容性表
清空margin、padding (*{margin:0;padding:0;})
双倍边距bug：块状元素设置了float属性后，又设置了横向的margin值，在IE6下显示的margin值要比设置的值大；解决方案：
给float的元素添加 display:inline;将其转换为内联元素；IE6（默认16px为最小）不识别较小高度的标签（一般为10px）。解决方案：
给标签添加：overflow:hidden;给标签添加font-size:0;图片添加超链接时，在IE浏览器中会有蓝色的边框：解决方案：
border:0或者border：none;min-hieght 不兼容ie6。 解决方案：
min-height:100px;_height:100px;min-height:100px;height:auto!important;height:100px;IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
display:none与visibility：hidden的区别
- display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
- visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
BFC(Block Formatting Context)块级格式化上下文
- 定位方案：
内部的Box会在垂直方向上一个接一个放置。
Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的margin box 的左边，与包含块border box的左边相接触。
BFC的区域不会与float box重叠。
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
计算BFC的高度时，浮动元素也会参与计算。
- 下列方式会创建块格式化上下文
- 根元素，即HTML标签
- 浮动元素：float值为left、right
- overflow值不为 visible，为 auto、scroll、hidden
- display值为
inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid - 定位元素：position值为 absolute、fixed
注意 display:table也可以生成BFC的原因在于Table会默认生成一个匿名的table-cell，是这个匿名的table-cell生成了BFC。
媒体查询
<head>里边<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>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无效
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
