CSS 选择器的分类
基本的：
1.id选择器（id="name"）
2.类选择器（class="head"）
3.标签选择器（body, div, ul, li）
4.全局选择器（*）
复杂的：
1.组合选择器（.head .head_logo）
2.后代选择器 （#head .nav ul li 从父集到子孙集）
3.群组选择器 (div, span, img {color:Red} 具有相同样式的标签分组显示)
4.继承选择器
5.伪类选择器（链接样式，a元素的伪类）
6.子选择器（div>p, 带大于号>）
7.CSS相邻相邻兄弟选择器（h1+p, 带加号+）
不同级别：总结排序：!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
BFC
理解：BFC是css布局的一个概念，是一块独立的渲染区域，一个环境，里面的元素不会影响到外部的元素
如何生成BFC：（脱离文档流）
1.根元素，即HTML元素（最大的一个BFC）
2.float的值不为none
3.position的值为absolute或fixed
4.overflow的值不为visible（默认值。内容不会被修剪，会呈现在元素框之外）
5.display的值为inline-block、table-cell、table-caption
BFC布局规则：
1.内部的Box会在垂直方向，一个接一个地放置。
2.属于同一个BFC的两个相邻的Box的margin会发生重叠
3.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此, 文字环绕效果，设置float
4.BFC的区域不会与float box重叠。
5.计算BFC的高度，浮动元素也参与计算
BFC作用：
1.自适应两栏布局
2.可以阻止元素被浮动元素覆盖
3.可以包含浮动元素---清除内部浮动 原理:：触发父div的BFC属性，使下面的子div都处在父div的同一个BFC区域之内
4.分属于不同的BFC时，可以阻止margin重叠
列举不同的清除浮动的技巧
/* 1.添加新元素 */
<div class="outer">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="clearfix"></div>
</div>
.clearfix {
clear: both;
}
/* 2.为父元素增加样式：BFC */
.clearfix {
overflow: auto;
zoom: 1; // 处理兼容性
}
/* 3.:after 伪元素方法 (作用于父元素) */
.outer {
zoom: 1;
&:after {
display: block;
height: 0;
clear: both;
content: ' ';
visibility: hidden;
}
}
移动端 1px 边框的问题
在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。
css中的 px 就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个 css 像素代表多少个物理像素。例如，在 Retina屏的 iphone上，devicePixelRatio的值为2，也就是说1个 css 像素相当于2个物理像素。 移动前端开发之 viewport 的深入理解
伪类 + transform 解决问题
单条border样式设置：
.scale-1px {
position: relative;
border:none;
}
.scale-1px:after {
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
四条boder样式设置：
.scale-1px {
position: relative;
}
.scale-1px:after {
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
圣杯布局和双飞翼布局的区别
圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负 margin 让其跟中间栏div并排，以形成三栏布局。
不同在于解决“中间栏 div内容不被遮挡”问题的思路不一样：
- 圣杯布局，为了中间
div内容不被遮挡，将外层div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间 div。 - 双飞翼布局，为了中间
div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。css布局
圣杯布局
<style>
* {
margin: 0;
padding: 0;
}
.left,
.center,
.right {
position: relative;
float: left;
height: 300px;
}
.wrapper {
padding: 0 300px;
overflow: hidden;
}
.left {
left: -300px;
margin-left: -100%;
width: 300px;
background: red;
}
.right {
right: -300px;
margin-left: -300px;
width: 300px;
background: green;
}
.center {
width: 100%;
background: blue;
}
</style>
双飞翼布局
<style>
* {
margin: 0;
padding: 0;
}
.center {
float: left;
width: 100%;
height: 300px;
overflow: hidden;
background-color: springgreen;
}
.content {
margin: 0 300px;
height: 100%;
background-color: purple;
}
.left {
float: left;
width: 300px;
height: 300px;
background-color: pink;
margin-left: -100%;
}
.right {
float: left;
width: 300px;
height: 300px;
background-color: pink;
margin-left: -300px;
}
</style>
<body>
<div class="wrapper">
<div class="center">
<div class="content"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
