实现三栏布局（两侧定宽，中间自适应）
采用了 absolute，导致父元素脱离了文档流，那所有的子元素也需要脱离文档流。如果页面复杂，那开发的难度可想而知
利用浮动 当中间内容高于两侧时，两侧高度不会随中间内容变高而变高
弹性盒子布局(flex)
利用负边距和浮动,实现起来比较复杂
利用网格布局
.container {
display: grid;
grid-template-columns: 100px auto 200px;
}
CSS选择器及其优先级
- !important
- 内联样式style=""
- ID选择器#id
- 类选择器/属性选择器/伪类选择器.class.active[href=""]
- 元素选择器/关系选择器/伪元素选择器html+div>span::after
- 通配符选择器*
rem原理
rem布局的本质是等比缩放，一般是基于宽度，假设将屏幕宽度分为100份，每份宽度是1rem，1rem的宽度是屏幕宽度/100,，然后子元素设置rem单位的属性， 通过改变html元素的字体大小，就可以设置子元素的实际大小。
对比em
rem相对于根元素，em相对于氟元素
rem布局加载闪烁的问题
解决方案，媒体查询 设置根元素字体大小，比如设计稿是750px;对应的开发方式是1rem=100px,那375px的font-size 大小就是100/(750/375) = 50px
比rem更好的方案
vw(1vw是视口宽度的1%，100vw就是视口宽度),vh(100vh就是视口高度)
div垂直居中
- 行内元素
.parent {
height: 高度;
}
.son {
line-height: 高度;
}
- table
.parent {
display: table;
}
.son {
display: table-cell;
vertical-align: middle;
}
- flex
.parent {
display: flex;
align-items: center;
}
- 绝对定位定高
.son {
position: absolute;
top: 50%;
height: 高度;
margin-top: -0.5高度;
}
- 绝对定位不定高
.son {
position: absolute;
top: 50%;
transform: translate( 0, -50%);
}
top/bottom: 0;
.son {
position: absolute;
height: 高度;
top: 0;
bottom: 0;
margin: auto 0;
}
css3新特性总结
1.圆角边框
border-radius:5px;
2.多背景图
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
3.颜色和透明度(由原来的rgb到现在的rgba)
background: rgba(0,0,0,.5);
4.多列布局和弹性盒模型
display: flex; 5.盒子的变幻（2D、3D）
transform: translate(50px,100px);//移动
transform: rotate();//旋转
transform: scale();//缩放
transform: skew();//倾斜
用于元素的直接或者鼠标感应变化，没有其他变幻参数（如延时，持续时间，变幻曲线），立即改变。
6.过渡和动画
transition: width 1s linear 2s;
过渡效果，transition通过指定某些属性和变幻参数，以原始定义为开始状态，通过鼠标操作变化(hover)，hover状态定义结束状态，实现过渡效果。
animation: myfirst 5s;
@keyframes myfirst {
0% {background: block;}
25% {background: red;}
50% {background: yellow;}
100% {background: green;}
}
动画效果，加强版的过渡效果，通过animation指定动画名和动画参数，@keyframes定义动画内容，根据参数自动触发。
7.引入web字体（在服务器端存储）
@font-face {
font-family: myfirstfont;
src: url(sansation_light.woff);
}
div {
font-family: myfirstfont;
}
8.媒体查询
body{
background: yellow;
}
@media screen and (max-width: 480px){
background: red;
}
9.阴影
h1 {//文字阴影
text-shadow: 5px 5px 5px red;
}
div {//盒子阴影
box-shadow: 10px 5px 5px yellow;
}
BFC（块级格式化上下文）
BFC 的原理
其实也就是 BFC 的渲染规则。包括：
1.BFC 内部的子元素，在垂直方向，边距会发生重叠。
2.BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。
3.BFC区域不与旁边的float box区域重叠。（可以用来清除浮动带来的影响）。
4.计算BFC的高度时，浮动的子元素也参与计算。
如何生成BFC
1：overflow: 不为visible，可以让属性是 hidden、auto。【最常用】
2：浮动中：float的属性值不为none。意思是，只要设置了浮动，当前元素就创建了BFC。
3：定位中：只要posiiton的值不是 static或者是relative即可，可以是absolute或fixed，也就生成了一个BFC。
4：display为inline-block, table-cell, table-caption, flex, inline-flex
BFC应用
阻止margin重叠
可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)
自适应两栏布局
可以阻止元素被浮动元素覆盖
盒模型
css的盒模型由content(内容)、padding(内边距)、border(边框)、margin(外边距)组成。 在w3c盒模型中，设置的width/height是content的宽度/高度，在怪异模式中width/height设置的是content+padding+border宽度/高度。 在w3c盒子模型中盒子的大小由content、padding、border决定，在在怪异模式中盒子大小由width和height决定。
flex
| 属性名 | 属性值 | 备注 |
|---|---|---|
| display | flex | 定义了一个flex容器，它的直接子元素会接受这个flex环境 |
| flex-direction | row,row-reverse,column,column-reverse | 决定主轴的方向 |
| flex-wrap | nowrap,wrap,wrap-reverse | 如果一条轴线排不下，如何换行 |
| flex-flow | [flex-direction] , [flex-wrap] | 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap |
| justify-content | flex-start,flex-end,center,space-between,space-around | 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式 |
| align-items | flex-start,flex-end,center,baseline,stretch | 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式 |
伪类和伪元素
伪类
css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素都是用来修饰不在文档树中的部分。
1.获取不存在与DOM树中的信息。比如a标签的:link、visited等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取；
2.获取不能被常规CSS选择器获取的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child 来获取到。
伪元素
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
常见的伪元素有：::before，::after，::first-line，::first-letter，::selection、::placeholder等
因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。
::after和:after的区别
在实际的开发工作中，我们会看到有人把伪元素写成:after，这实际是 CSS2 与 CSS3新旧标准的规定不同而导致的。
CSS2 中的伪元素使用1个冒号，在 CSS3 中，为了区分伪类和伪元素，规定伪元素使用2个冒号。所以，对于 CSS2 标准的老伪元素，比如:first-line，:first-letter，:before，:after，写一个冒号浏览器也能识别，但对于 CSS3 标准的新伪元素，比如::selection，就必须写2个冒号了。
CSS画圆半圆扇形三角梯形
div{
margin: 50px;
width: 100px;
height: 100px;
background: red;
}
/* 半圆 */
.half-circle{
height: 50px;
border-radius: 50px 50px 0 0;
}
/* 扇形 */
.sector{
border-radius: 100px 0 0;
}
/* 三角 */
.triangle{
width: 0px;
height: 0px;
background: none;
border: 50px solid red;
border-color: red transparent transparent transparent;
}
/* 梯形 */
.ladder{
width: 50px;
height: 0px;
background: none;
border: 50px solid red;
border-color: red transparent transparent transparent;
}
