1: 目标伪类选择器：
:target {
color: red;
font-size: 30px;
}
2: word-spacing: 10px; /* 单词间距 针对于英文 中文无效 */
3: text-indent: 2em; /* 此时2em 就是2个汉字的宽度 */
4: font-weight: normal; /* 让粗体不加粗 */
5: font-style: normal; /* 让斜体 不倾斜 */
6: 选择器
input[type=text] {
color: red;
}/* 属性选择器用中括号 来表示 */
div[class^=font] /* class^=font 表示 font 开始位置就行了 */
div[class$=footer] /* class$=footer 表示 footer 结束位置就行了 */
div[class*=tao] /* class*=tao *= 表示tao 在任意位置都可以 */
p::first-letter { /* 选择第一个字 */ }
p::first-line { /* 选择第1行 */ }
p::selection { /* 当我们选中文字的时候，可以变化的样式(只能是字体颜色与背景颜色) */ }
div::before { /* before 和 after 在盒子div 的内部前面插入或者是内部后面插入 */
content: "俺";
}
p:nth-of-type(-n +3) : 选择前三个
选择第4到7之间的盒子，div:nth-child(n+4):nth-child(-n+7)
7: background-attachment: fixed; /* 默认的是 scroll 滚走的 */
background: #000 url(images/ms.jpg) no-repeat fixed center -25px；／＊ 背景缩写 ＊／
background-size: 50%/contain／cover；
background: url(images/l.jpg) no-repeat left top ,url(images/3.jpg) no-repeat right bottom hotpink; 多背景情况，用逗号隔开
８：凸起的文字 text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
凹下的文字 text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
凸起的盒子：box-shadow: 10px 10px 10px rgba(0, 0, 0, .7);
９：细线表格：
table {
700px;
height: 300px;
border: 1px solid red;
border-collapse: collapse; /* 合并相邻边框 */ }
10:margin: 0 auto; /* 左右一定是auto就可以居中 */
11:border: 1px solid red; /* 解决外边距合并(塌陷)问题 */或者给父元素添加 overflow:hidden;
12:box-sizing: content-box; /* 默认的盒子模型 宽度和高度不包括padding, border */
box-sizing: border-box; /* padding border 不撑开盒子 */
１３：
img {
float: right; /* 浮动可以用来做文字环绕效果 */
}
１４：（１）：浮动的元素不占位置，只会影响后面的元素，不会影响前面的，（２）盒子浮动不会压住父盒子的padding，（３）具有行内块的属性，（４）：浮动元素不占有位置， 父亲没有高度，此时，底下盒子就会跑上来，这时需要清除浮动
清除浮动：
（１）加标签（２）给父元素加overflow:hidden
（３）加伪类
.clearfix:after {
content: "."; /* 内容为小点， 尽量加不要空， 否则旧版本浏览器有空隙 */
display: block; /* 转换为块级元素 */
height: 0; /* 高度为0 */
visibility: hidden; /* 隐藏盒子 */
clear: both; /* 清除浮动 */
}
.clearfix { /* ie6.7浏览器的处理方式 */
*zoom: 1;
/* * 代表ie6.7能识别的特殊符号 带有这个*的属性 只有ie6.7才执行
zoom 就是ie6.7 清除浮动的方法 */
}
（４）加双伪类
.clearfix:before, .clearfix:after {
content: "";
display: block; /* 触发bfc 防止外边距合并 */
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
１５：定位：加了绝对定位的盒子，margin 左右auto 就无效了
１６：
display: none;/*隐藏元素 不是删除 看不见了而已，但是元素一直存在页面中 但是不保留位置 block 显示*/
visibility: hidden; /* 隐藏元素 他和 display none 最大的区别是 他保留位置 visible显示*/
overflow: visible; /*默认的，超出显示 */
overflow: auto; /*自动 超出就显示滚动条，不超出不显示 */
overflow: scroll; /*一直显示滚动条 */
overflow: hidden; /* 溢出隐藏 */
text-indent: -20000px; 隐藏文字
１７：cursor: pointer; 小手 cursor: move; 四角箭头 cursor: text; 插入光标 cursor: default; 小白
１８：表单
轮廓线
input {
/* outline: 5px solid red;
border: 1px solid blue; */
outline: 0; /* 取消轮廓线 */
}
textarea {
resize: none; /* 防止文本域拖拽 */
outline: none;/* 取消轮廓线 */
}
１９：img { /* 行内块 */解决图片与底部有缝隙
/* vertical-align: baseline; 默认的基线对齐 */
vertical-align: middle; /* 手动改为中线对齐 ，对于块级元素无效*/
vertical-align: top; /* 用的最多的 */
}
２０：英文状态下
word-break: break-all; /* 允许单词拆开显示， */
word-break: keep-all; /* 不允许拆开单词显示 除非连字符特殊 连字符： z-index */
汉字状态下：
white-space: nowrap; /* 首先先需要添加这句话 强制一行*/
overflow: hidden; /* 其次必须有这句话 */
text-overflow: ellipsis; /* 超出的部分，省略号代替 clip; 直接裁剪 */
２１：字体图标：一般保存svg格式，前端上传生成兼容性字体文件包，再引用
@font-face { /* 电脑中没有的字体，我们需要声明 */
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
使用方法１：
div::before {
font-family: "icomoon"; /* 一定保证和上面的 font-family: 相同 */
content: "e91b";
font-size: 100px;
color: hotpink;
}
<div></div>
使用方法２：
span {
font-family: "icomoon"; /* 一定保证和上面的 font-family: 相同 */
font-size: 100px;
color: pink;
}
<span>□</span>
22: 低版本的浏览器可以单独做一个页面提示客户升级浏览器
23: html5兼容ie9以上版本
24:height:auto;自动跟随高度一起缩放
２５：div:hover::before { /* 鼠标经过之后 前面插入一个伪元素 */｝
２６：
<meta name="description" content="网站说明" />
<meta name="Keywords" content="关键词" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<!-- 引入css初始化文件 -->
<link rel="stylesheet" href="css/normalize.css" />
<!-- 头部和底部 结构基本相同 我们做基本的公共样式 -->
<link rel="stylesheet" href="css/base.css" />
<!-- 我们做专属的首页样式 -->
<link rel="stylesheet" href="css/index.css" />
２７： ./是当前目录 ../是父级目录 /是根目录
２８： ul: list-style: none
２９:
a,a:hover{
text-decoration: none;
color: #666;
}
３０: <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />网站图标
３１：渐变色： background: linear-gradient(to right, red, blue);