有一些 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