有一些CSS的冷门款式太多了，然而又想记住，能够看这篇文章，这篇文章包含了一些css须要记忆的一些属性，不包含平时常常应用的（置信你曾经接触的太多了）

伪类选择器

文字暗影

简写：
text-shadow:程度地位 垂直地位 含糊间隔 暗影色彩;

text-indent：首行缩进 ;
word-spacing: 单词间距;
letter-spacing:字间距;

link答疑

type="text/css"在link中能够疏忽不写，写了比拟标准,rel定义以后文档和被链接文档之间的关系，在这里须要指定为“stylesheet”，示意被链接的文档是一个款式文件

行内元素&块级元素

行内元素：高宽有效，程度的padding和margin无效，但垂直方向有效

常见的行内元素：<a> <strong> <b> <i> <del> <s> <ins> <u> <span>

块级元素：高宽无效，都能够自定义

选择器

交加选择器

p.one{color:red;font-size:14px;}

是“即...又...的意思”，p.one抉择的是类名为.one的 段落标签

并集选择器(逗号宰割)

.one,p,#test{color:red;}

伪元素选择器

E::first-letter 文本的第一个单纯或字

E::first-line 文本第一行

E::selection 扭转文本选中的款式（有点好用）

E::befor和E::after 该元素是行内元素 联合content应用

“:”和“::”在于辨别伪类和伪元素

背景（background）

background-image:none/url(url)

个别应用习惯(参考):

  .img {            width: 400px;            height: 400px;            border: 1px solid #fff;            background: #fff url(1111.jpg) no-repeat;            background-position: 30px 50px;            background-size: 200px 210px;        }

文本润饰

`text-decoration`   润饰文本

盒子模型

应该都比拟相熟，只讲几个比拟容易遗记的属性

border-style

表格table的边框

table{border-collapse:collapse;}collapse单词是合并的意思。示意边框合并在一起

外边距实现盒子居中

能够让一个盒子实现程度居中：

.header{width:960px; margin:0 auto;}

文字居中:text-align:center;

相邻块元素垂直外边距的合并（容易呈现的bug）

1.高低相邻的元素，上:margin-bottom，下:margin-top,会产生合并（外边距塌陷），合并的边距值等于其中大的那者

解决办法：防止

2.嵌套元素垂直外边距的合并

解决方案：
1.为父元素定义1像素的上边框
2.能够为父元素增加:overflow:hidden（触发BFC）

CSS盒模型

box-sizing:content-box;默认

box-sizing:border-box;盒子大小为width，也就是说padding和border都蕴含到了width外面

盒子暗影

box-shadow:程度 垂直 含糊间隔 暗影尺寸 色彩 内/外暗影;

想要内暗影就用inset

理论用法:box-shadow:0 15px 30px rgba(0,0,0,.4);

CSS定位

CSS的定位机制有三种:一般流（规范流）、浮动、定位

革除浮动

解决父级元素因为子浮动引起的外部高度为0的问题
利用场景：比方文章，做瀑布流布局等等，很多时候咱们不须要给父盒子高度，因为比方文章的内容你是无法估量其高度的，咱们须要自适应地撑开盒子。所以才会革除浮动。

解决办法：

1.选择器{clear:both;}

2.父级增加overflow:hidden;，触发BFC的形式实现革除浮动成果

3.:after 案例：百度 淘宝网 网易

 .clearfix::after{            content: ".";            display: block;            height: 0;            clear: both;            visibility: hidden;        }        .clearfix{            *zoom: 1;        }

4.before和after 案例：小米 腾讯 代码更简洁

  .clearfix::after,.clearfix:before {            content: ".";            display: table;/* 这句话能够触发BFC */        }        .clearfix::after {            clear: both;        }        .clearfix {            *zoom: 1;        }

给父盒子的class属性增加clearfix就能够应用了

定位

Tip:“子绝父相”牢记于心

相对定位中的盒子程度/垂直居中

相对定位的盒子margin有效

解决办法:

1. left:50%
2. 走本人外边距负的一半:margin-left

z-index

默认是0，属性越大，定位元素地位越居上。

只有relative,absolute,fixed能够应用这个属性

元素的显示暗藏

overflow display visibility比拟常见

display

visibility

overflow

CSS高级技巧

鼠标cursor

cursor:default 小白  |  pointer 小手  |  move 挪动  |  text 文本;

尽量不要用pointer，火狐不反对 pointer ie6以上反对

轮廓outline

outline:outline-color || outline-style  ||  outline-width

个别不会关怀设置多少，去掉就好:outline:0;或outline:none;
（比方在点击表单input时候会默认有一个彩色轮廓，咱们能够去掉，也能够用 outline-color: red;扭转轮廓色彩）

避免拖拽文本域resize

resize:none能够避免 火狐 谷歌 等浏览器随便拖拽textarea毁坏布局

vertical-align垂直对齐

它不影响块级元素的内容对齐，只针对行内和行内块元素，通常用来管制图片/表单与文字的对齐

MDN文档讲述这个属性很棒：

   链接：[https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align](https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align)

去除图片底侧空白缝隙

图片或表单等行内元素，它的底线和父级盒子的基线对齐。这样会造成一个问题，图片底侧会有一个空白缝隙。

解决办法：

1. 给img vertical-align:middle | top;等等。让图片不要和基线对齐
2. 给img增加display:block;

溢出的文字暗藏

word-break

次要解决英文单词

white-space

text-overflow文字溢出

设置一个省略标记（...）显示文本的溢出

留神首先要强制一行内显示，而后搭配overflow:hidden;应用

CSS精灵图

很多图片汇合到一张内，缩小服务器承受和发送申请的次数，进步页面加载速度

应用:用到CSS的background-image,background-repeat,background-position进行背景定位，也能够简写操作

字体图标iconfont

长处：有文字的属性，体积小，简直反对所有浏览器，挪动端必备

格局：.svg

程序员举荐图标字体网站：http://icomoon.io（iconmoon字库，容许用户自定义抉择图标使它们生成字型，品种很多，国外网站关上速度比较慢）

如何引入？

1. 创立fonts文件夹，外面蕴含了字体文件

2. 在款式内申明字体

   @font-face {  /* 申明字体 */  font-family: 'icomoon'; /* 本人申明的字体包 */  src:  url('../fonts/icomoon.eot?8qhwk5'); /* 门路 */  src:  url('../fonts/icomoon.eot?8qhwk5#iefix') format('embedded-opentype'),    url('../fonts/icomoon.ttf?8qhwk5') format('truetype'),    url('../fonts/icomoon.woff?8qhwk5') format('woff'),    url('../fonts/icomoon.svg?8qhwk5#icomoon') format('svg');  font-weight: normal;  font-style: normal;}

3. 给盒子应用字体

   font-family:"icomoon";

4. 盒子里增加构造

   span::before{    content:"\e900";}或者<span>□<spam>/* □是从网站复制过去的（无奈看见）*/

   滑动门技术

设置导航栏时候，字数不一样多，比方图里的，怎么适应外部的文本内容呢？

办法：利用CSS（背景地位）和盒子padding撑开宽度。

<li> <li>           <a href="#">               <span>导航栏内容</span>           </a>       </li>

 a {            margin: 100px;            display: inline-block;            height: 33px;            background: url() no-repeat;            padding-left: 15px;            color: #fff;            text-decoration: none;            line-height: 15px;        }        a span {            display: inline-block;            height: 33px;            background: url() no-repeat right;            padding-right: 15px;        }

1. a设置背景左侧padding-left:15px;,padding撑开适合宽度
2. span设置背景右侧padding-right:15px;剩下由文字本身撑开宽度
3. 之所以a蕴含span是因为整个导航都是能够点击的

动画(太多，零碎学习参考文档)

CSS3中应用transition能够实现补间动画（过渡成果）

语法格局：transition:要过渡的属性 破费工夫 静止曲线 何时开始;

属性太多，看MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition

flex弹性布局

这块学习比拟艰难，能够参考我之前写的一篇文章
链接：https://segmentfault.com/a/1190000023520335