flex 布局
常见用途、为什么要使用flex布局？
编写一些网格布局，复杂的布局等；flex布局使用方便强大，
以上两篇文章 有时间 多看几遍，非常重要。
媒体查询
为什么需要媒体查询？
可以用于适应多种设备和应对不同情况下的页面属性
编写一段代码，实现不同设备适配
- 宽度 < 600px 时，背景为红色
- 宽度 >= 600px 时，背景为粉色
- 宽度 >= 768px 时，背景为紫色
- 宽度 >= 992px 时，背景为蓝色
- 宽度 >= 1200px 时，背景为绿色
<div class="root"></div>
.root {
height: 200px;
}
@media (max-width:600px) {
.root{height: 200px; background-color: red;}
}
@media (min-width:600px) {
.root{height: 200px;background-color: pink;}
}
@media (min-width:768px) {
.root{height: 200px;background-color: purple;}
}
@media (min-width:992px) {
.root{height: 200px; background-color: blue;}
}
@media (min-width:1200px) {
.root{height: 200px;background-color: green;}
}
CSS3新特性
结构(位置)伪类选择器
| 选择器 | 说明 |
|---|---|
| :first-child | 该元素的第一个子元素 |
| :last-child | 该元素的最后一个子元素 |
| :nth-child(n) | 该元素的第n个子元素(正数) |
| :nth-last-child(n) | 该元素的第n个子元素(倒数) |
属性选择器（属性不只是类名）
<div class="font12">属性选择器</div>
<div class="font12">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="24font">属性选择器123</div>
<div class="sub-footer">属性选择器footer</div>
<div class="jd-footer">属性选择器footer</div>
<div class="news-tao-nav">属性选择器</div>
<div class="news-tao-header">属性选择器</div>
<div class="tao-header">属性选择器</div>
</div>
实现以下需求：
/* 1. 类名为 font 开头的元素修改成粉色字 */
div[class^="font"]{color: pink;}
/* 2. 类名为 footer 结尾的元素改成红色字 */
div[class$="footer"]{color: red;}
/* 3. 类名含 tao 的元素改成绿色字 */
div[class*="tao"]{color: green;}
伪元素选择器
::before 和::after，必须结合 content 属性。
使用伪元素选择器清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box1{
background-color: #FFC0CB;
/* width: 800px;
height: 30px; */
line-height: 30px;
}
#box1 p{
float: left;
}
#box1::after{
content: '';
height: 0;
display: block;
visibility: hidden;
clear: both;
}
#box2 p{
line-height: 30px;
}
</style>
</head>
<body>
<div id="box1">
<p>This is a target.</p>
<p>This is a target.</p>
<p>This is a target.</p>
</div>
<div id="box2">
<p>This is a target.</p>
<p>This is a target.</p>
<p>This is a target.</p>
</div>
</body>
</html>
伪类和伪元素有什么区别？
伪类基本都是将一些效果添加入一般的CSS选择器难以找到和不存在于DOM树中的元素之中，伪元素基本都是将虚拟的元素加入到页面之中；
背景缩放（移动端使用广泛）
background-size;通过设置比例来确定背景图片的占所在容器的比例大小从而达到缩放效果
过渡
transition;给一个属性加上过度延时效果，从而在属性变化是达到一定的动画效果
变形
tansform；将元素进行旋转(rotate)，移动(transtate)，缩放(scale)和扭曲(skew)
动画
animation；将元素的CSS属性进行控制所做成的属性变化动画
CSS 高级技巧
overflow
设置块元素等的元素溢出情况，默认值为visible的；
hidden:溢出部分隐藏；
scroll:采用滚动条显示；
auto:如果被裁减，啧自动显示滚动条；
text-overflow
文本如果溢出容器，可以使用该属性进行修剪文本;
clip:单纯的修剪文本不会做任何修改；
ellipsis:使用省略号来代替被修剪的文本；
string:使用给定字符串来代替被修剪的文本；
outline
运行下面代码，点击按钮会发现按钮有一圈蓝线，如何去除？
<style>
.btn {
border: none;
border-radius: 20px;
padding: 14px 20px;
}
</style>
<div class="root">
<button class="btn">add</button>
</div>
在.btn的属性中添加入"outline: none;"这条属性，即可将其祛除
line-height
文字垂直居中，高度等于行高。
.text {
height: 20px;
line-height: 20px;
}
CSS精灵
好处？
减少了对于多个图片的请求，同时减少了图片的字节数；在修改时通过修改一张或者几张的图片信息即可修改整个页面的风格
字体图标
列举几个常用的字体图标
icommon,iconfont,font awesome,glyphicons
BFC
浏览器前缀
干嘛用的？
通过不同的前缀来兼容不同的浏览器渲染引擎；
综合实例：
实现图标和文字垂直居中对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#btn{
width: 62px;
height: 20px;
margin: 0 auto;
/* border: blue 1px solid; */
}
img{
vertical-align: middle;
}
</style>
</head>
<body>
<div id="btn">
<img src="search.svg" />查找</div>
</body>
</html>
