<hr> 水平线标签 不常用，可用盒子模型代替
text-indent:2em/*如果此时写了2em 则是缩进当前元素 2个文字大小的距离*/
text-decoration:/*
underline:下划线
line-through:删除线
overline:上划线
none
line-height:20px 行间距
text-align:对齐
font-weight:字体粗细 eg 700,400(不加粗)
font-style:文字样式(风格) eg normal/italic;
font-size:文字大小
emmet语法
ul>li
div+p
.nav == <div class="nav"></div>
#nav 同理
p.one 也可
div.demo$ * 5:即生成demo1,demo2....demo5
复合选择器
有简单选择器组合而成
(1)后代选择器
元素1 元素2 ..... 元素n{
样式声明
}
(2)子元素选择器
元素1>元素2>....>元素n{
}
(3)并集选择器
元素1，元素2......{
}
(4)伪类选择器
a:link {
color: #333;
text-decoration: none;
}
/*2. a:visited 选择点击过的(访问过的)链接 */
a:visited {
color: orange;
}
/*3. a:hover 选择鼠标经过的那个链接 */
a:hover {
color: skyblue;
}
/* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
a:active {
color: green;
}
focus伪类选择器
/* // 把获得光标的input表单元素选取出来 */
input:focus {
background-color: pink;
color: red;
}
CSS的元素显示模式
行元素和块元素
display:block 转成块级元素 inline 转成行级元素
文字垂直居中的技巧：height = line-height
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米</title>
<style>
a{
display: block;
width: 230px;
height: 40px;
background-color: #55585a;
font-size: 14px;
color: #fff;
text-decoration: none;
text-indent: 2em;
line-height: 40px;
}
a:hover{
background-color: #ff6700;
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
</body>
</html>
CSS的背景
背景颜色：background-color,默认为transparent
background-image:none|url(url)
背景平铺：background-repeat:repeat|no-repeat|repeat-x|repeat-y
可利用background-position:x,y修改图片在背景中的位置
center|top|left|right|bottom 前后顺序无关系
分为精确单位和混合单位
背景图像固定（背景附着）background-attachment:scroll|fixed
背景也可进行复合连写：无顺序要求
半透明效果：rgba(0,0,0,0.3) a即alpha透明度（仅盒子半透明）
选择器权重
!important:最重要的
继承的权重为0
权重叠加：
盒子模型
border 边框（宽度 border-width，样式 border-style(solid,dashed,dotted)，颜色）
content 内容
padding 内边距
margin 外边距
border-top
border-bottom
border-left
border-right
细线边框：
border-collapse:collapse;
边框会影响盒子实际大小
padding-left(right)
padding-top(bottom)
padding复合属性
上下左右
上下 左右
上 左右 下
上 右 下 左
padding会影响实际盒子大小
margin-left(right,bottom,top)
margin简写方式与padding相同
应用：
块级盒子水平居中 1、指定宽度2、左右外边距设置成auto
eg margin: 0 auto
行内元素和行内块元素水平居中给其父元素添加text-align:center即可
清除内外边距：
*{
padding:0;
margin:0;
}
list-style:none;:去掉li的小圆点
圆弧：border-radius
盒子阴影：box-shadow:水平阴影，垂直阴影，模糊距离，阴影大小，颜色，也可rgba();
文本阴影：text-shadow:
浮动：普通流（标准流），浮动和定位
为什么需要浮动？
float:创建浮动框，将其移动到一边，直到左边缘或右边缘及包含块或另一个浮动框的边缘
left|right|none
浮动特性：
浮动元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的性质
脱标，不再保留原先的位置
清除浮动
clear:both;
定位：
定位可以让盒子自由在盒子内移动位置，并且可以压住其他盒子
将盒子定在某一个位置
定位 = 定位模式 + 边偏移
定位方式：position:static（无定位）|relative|absolute|fixed
边偏移：top|left|right|bottom(标准流和移动不能使用该属性)
相对定位没有脱标
绝对定位：如果没有祖先元素或祖先元素没有定位，则以浏览器为准，不再占有原先的位置
z-index:控制盒子的前后次序
绝对定位的盒子设置水平居中：
left:50% margin-left:-100;
行内元素设置定位，可以直接设置高度和宽度
块级元素设置定位，默认是内容的大小
定位的拓展
浮动只会压住盒子，不会压住文字（图片）
绝对定位（固定定位）会
元素的显示和隐藏：
display:none
visibility:visible:可见，hidden不可见
但会继续占有原来的位置
溢出隐藏：overflow:hidden,scroll,auto
CSS高级技巧
1、精灵图
2、字体图标
transform:scale(2);:缩放
2D转换：transform：translate(移动)，rotate(45deg)，scale(缩放)
calc(100% - 30)
CSS3过渡属性：
transition:要过度的属性 时间 曲线 何时开始
