前端总结·基础篇·CSS（三）补充

前端总结系列



一、移动端

	1.1 视口（viewport）

	1.2 媒体查询（media query）

	1.3 相对字体大小（rem/em）

二、选择器

	2.1 常用

	2.2 关系

	2.3 伪元素

	2.4 伪类

	2.5 优先级

三、样式重置（reset）

	3.1 常用重置

	3.2 重置插件（Normalize.css）

四、浏览器前缀

	4.1 前缀由来

	4.2 解决方案

五、兼容性

	5.1 IE条件注释

	5.2 IE hack

	5.3 指定渲染模式

五、CSS库

一、移动端

移动端还没有上车。先来总结一下三个基本的移动端开发特性：视口（viewport）、媒体查询（@media）和相对字体大小。

1.1 视口（viewport）

加上视口之后，页面将会自动裁剪成适合移动页面的大小。



<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

width=device-width  // 把页面宽设置成设备一样

initial-scale=1.0  // 初始缩放为1.0

user-scalable=no  // 不允许用户缩放（此处有坑，有时会无效）

1.2 媒体查询（media query）

以下只是对媒体查询使用的一个演示。实际中我们常用媒体查询来根据不同宽度的设备显示不同的布局。



/* HTML */

<div class="media">meida</div>

/* CSS */

.media {

    background-color: gray;

    color: white;

}

@media screen and (max-width:1000px) {

    .media {

        background-color: red;

    }

}

@media screen and (max-width:800px) {

    .media {

        background-color: orange;

    }

}

1.3 相对字体大小（rem/em）

rem是相对于根字体的大小，em是相对于父级的字体大小。



/* HTML */

<div class="rem">rem</div>

/* CSS */

/* 根字体在html而不是body中 */

html {

    font-size: 60px;  /* 修改根字体，对应div中的字体会改变 */

}

.rem {

    font-size: 1.2rem;

}

二、选择器

2.1 常用

标签（tag）、id和类（class）都是常用的选择器。其中class最为常用。



// id在页面中是唯一的，class的属性可以有多个

<p id="mark" class="mark important">mark</p>

<p class="mark todo">have a lunch</p>

p {color:red;}  // 标签选择器

#mark {color:red;}  // id选择器

.mark {color:red;}  // 类选择器

2.2 关系

后代（parent child-child）子代（parent>child）兄弟（+）相邻（~）。

兄弟选择器常用来制作，导航栏中间的一条边框线。



<ul>

  <li class="brother"><a>one</a></li>

  <li>two</li>

  <li>three</li>

</ul>

ul li {color:red;}  // 后代选择器，one、two和three都变成红色

ul>li {color:red;}  // 子代选择器，two和three变成红色

.brother+li {color:red;}  // 兄弟选择器，two变成红色

.brother~li {color:red;}  // 相邻选择器，two和three变成红色

中间线示例

li {

    float: left;

    list-style-type: none;

    padding: 5px;

}

li+li {

    border-left: 1px solid red;

}

2.3 伪元素

伪类有::before、::after、::selection、::first-line、::first-letter。

其中::before常用来制作三角形和登陆框左边的图标。更多请见kingkit。



/* HTML */

<div class="triangle">triangle</div>

/* CSS */

.triangle {

    position: relative;

    border: 1px solid red;

    padding: 2px 4px;

    width: 60px;

    height: 20px;

    margin-left: 10px;

    border-radius: 10%;  // 设置矩形圆角

}

.triangle::before,.triangle::after {

    content: "";

    position: absolute;

    top: 7px;

    left: -10px;

    width: 0;

    height: 0;

    border-style: solid;

    border-color: transparent red transparent transparent;  // 右边框设置为红色

    border-width: 5px 10px 5px 0;  // 左边框设置为0

}

.triangle::after {

    left: -9px;

    border-right-color: white;  // 设置三角形内容为白色

}

.triangle::selection {

    color: red;  // div内选中的部分会变成红色

}

2.4 伪类

LVHA（:link,:visited,:hover,:active）、:focus、lang、first-child（last-child,nth-child(n)）



div:first-child {}

div:nth-child(5) {}

div:last-child {}

2.5 优先级

优先级最高的是设置了!important的元素，其次看元素的权重。权重相同时看谁离HTML更近（内嵌>内链>外链），近的优先级更高。

权重分配是attr：1000，id：100，class：10，tag：1。当有多种选择器组合的时候，他们的权重之和就是总权重。权重大的优先级高。



display: none!important;  // 优先级最高，IE6不支持同一选择符中的!important

.parent > div {}  // 权重计算 10+1=11

同级的按照就近原则（内嵌>内连>外链），越近优先级越高

优先级最高

三、样式重置（reset）

3.1 常用重置



* {box-sizing:border-box;}  /* IE8+ */

body {margin:0;}  /* 去除边距 */

ul {margin:0;padding-left:0;}  /* 去除边距和左填充 */

li {list-style-type:none;}  /* 去除列表的圆点 */

a {text-decoration:none;}  /* 去除下划线 */

3.2 重置插件（Normalize.css,IE8+）

当然，你也可以不自己写重置样式，使用插件制动帮你完成。

四、浏览器前缀

想要使用未标准化的新特性，往往伴随着一大堆兼容前缀。各浏览器使用自己的私有前缀实现新功能，我门在写完了兼容属性之后，还要加上一条标准属性。等到属性标准化之后我们就不需要重新添加标准属性了。



div

{

	transition: width 2s;

	-moz-transition: width 2s;	/* Firefox 4 */

	-webkit-transition: width 2s;	/* Safari 和 Chrome */

	-o-transition: width 2s;	/* Opera */

}

4.1 前缀由来

在实验性功能尚未标准化之前，浏览器厂商为了开发者能尽快的体验这些新特效。通过带前缀的CSS属性使得这些功能可以直接被使用。

待到标准化之后，则可以通过不带前缀的属性设置样式。但是对于没有更新浏览器的用户来说，样式依旧需要通过私有属性访问。

这样，你不得不写N条兼容代码。chrome（-webkit-）、firefox(-moz-)和opera(-o-)。safari和chrome一样，私有属性前缀也是-webkit-。

4.2 解决方案

这时，你需要的是一个Autoprefixer或者-prefix-free。

五、兼容性

除了手写IE兼容性，你也可以直接使用IE9.js自动处理IE6-9的bug。另外，让IE6-9支持的支持圆角、背景渐变、边框图片、盒阴影、rgba等可视化的功能可以用CSS3PIE。让IE6-8支持媒体查询可以使用Respond.js。IE6-7支持CSS3 box-sizing可以使用borderBoxModel.js。IE6-8支持:first-child等高级CSS选择符，可以用selectivizr。让IE8及以下的浏览器支持H5新元素，可以用html5shiv.js。

5.1 IE条件注释

这类代码只有IE会解析，其他浏览器会作为注释处理。更多请见天堂的旋转木马。



<!--[if IE 6]>

	<script type="text/javascript" scr="IE6.js"></script>

<![endif]-->

if <条件> IE <版本>

条件：gt/gte/lt/lte/!（大于/大于等于/小于/小于等于/非）

版本：5.5/6/7/8

!IE 通常连在一起

5.2 IE hack

为针对不同IE浏览器进行样式修改，可以使用css hack。更多请见freshlover。



指定版本：IE6(_),IE7(+),IE8(/),IE9(:root 9)

指定范围：IE6-7(*),IE8-10(\0),IE9-10(\9\0),IE All(\9)

.hack{

	_color:red;  /* IE6 */

	color:red\0;  /* IE8-10 */

}

:root .hack{color:red\0;}  /* IE9 */

5.3 指定渲染模式

你可以为IE指定渲染模式，当用户安装谷歌插件GCF之后，将会强制页面使用chrome模式渲染。更多请见脚本之家。



<meta http-equiv="X-UA-Compatible" content="IE=7" />  // IE8-9使用IE7模式渲染

<meta http-equiv="X-UA-Compatible" content="IE=8" />  // IE8-9使用IE8模式渲染

<meta http-equiv="X-UA-Compatible" content="edge" />  // IE8-9使用IE最高版模式渲染

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  // 安装GCF之后，IE使用chrome模式渲染

五、CSS库

为了方便快速的再次实现需要的效果，把常用的功能封装起来。通过设置class的方式，使用封装好的css库。更多请见深度开源。

CSS3悬浮效果（Hover.CSS）、提示（HINT.css）、进度（progress.js）、加载动画（css-loaders）、按钮（Buttons）、预处理（less,sass）、界面（Bootstrap）。

总结

这一节主要参考的书籍有：《CSS设计指南》和《CSS揭秘》。主要参考的网站和博客有梦之都、脚本之家、W3School、深度开源、kingkit、天堂的旋转木马和freshlover。另外还有一些平时的积累。

未来半个月的更新频率不能保证了，快与慢完全说不准。