目录概览：
- 浏览器调试工具
- css选择器
- 盒模型
- 雪碧图
- 选择器优先级
- css重置样式
- 单行省略号
- background属性
- 渐变
- table样式
- 表单样式
- 进一步探讨单位
一、浏览器调试工具
打开调试工具
快捷键：
- windows:：f12
- mac：cmd + option + i
二、css选择器
- 简单选择器： 通过元素类型、
class或id匹配一个或多个元素。（类型选择、id选择、class选择及通用选择器。） - 属性选择器：通过 属性 / 属性值 匹配一个或多个元素。
-
[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。 -
[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。 -
[attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。 -
[attr|=val]：选择attr属性的值是val或值以val-开头的元素（注意，这里的 “-” 不是一个错误，这是用来处理语言编码的）。 -
[attr^=val]：选择attr属性的值以val开头（包括val）的元素。 -
[attr$=val]：选择attr属性的值以 val 结尾（包括 val）的元素。 -
[attr*=val]：选择attr属性的值中包含子字符串 val 的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是 字符串 ”caterpillar“ 的子字符串）。
-
- 伪类：匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是DOM树中一父节点的第一个子节点。
例子:
.todo-list .todo-item:not(.item--done):hover .icon-todo {
background-position: 0 -20px;
}
/* odd为奇数*/
.table-report tr:nth-child(even) {
/* 设置偶数行背景色 */
background-color: #f5f5f5;
}
-
伪元素：匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。
-
组合器：这里不仅仅是选择器本身，还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如，你可以只选择divs的直系子节点的段落，或者直接跟在headings后面的段落。
组合器.png -
多重选择器：这些也不是单独的选择器；这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面， 以将一组声明应用于由这些选择器选择的所有元素。
参考资料：
三、盒模型
盒模型.png
四、雪碧图
雪碧图.png
通过修改background-position属性，更改显示图片的内容。
图片起始点(0, 0)，向上或向左移动均为负值。
五、选择器优先级
!important > style > id选择器 > 类选择器 > 元素选择器 > * > 浏览器默认 > 继承
六、CSS重置
normalize.css 纠正
Eric Meyer's "Reset CSS" 2.0 清零
七、单行省略号
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
八、background属性
-
background-clip 设置元素到背景(背景图片或颜色)是否延伸到边框下面。
- border-box: 初始值 背景延伸到边框外沿（但是在边框之下）。
- padding-box: 即背景延伸到内边距外沿。
- content-box: 背景裁剪到内容区(content-box)外沿。
-
background-color 背景色
-
background-image
- none 无背景图
- url()
-
background-origin 指定背景图片background-image 属性的原点位置的背景相对区域。（注意：当使用background-attachment为fixed时，该属性将被忽略不起作用。）
- padding-box: 初始值 背景图片的摆放以padding区域为参考
- border-box 以border区域为参考
- content-box 以content区域为参考
-
backgrund-position 初始位置
-
background-repeat 定义背景图像的重复方式。
屏幕快照 2018-10-23 16.47.06.png
-
background-size 设置背景图片大小。
屏幕快照 2018-10-23 17.01.05.png
-
background-attachment 决定背景是在视口中固定还是随包含它的区块滚动的。
屏幕快照 2018-10-23 17.04.00.png
九、渐变
background或background-image属性可使用渐变
linear-gradient()
默认颜色从上到下变化
屏幕快照 2018-10-23 23.29.21.png
屏幕快照 2018-10-23 23.30.45.png
屏幕快照 2018-10-23 23.35.41.png
屏幕快照 2018-10-23 23.33.04.png
屏幕快照 2018-10-23 23.33.40.png
radial-gradient()
屏幕快照 2018-10-23 23.46.15.png
屏幕快照 2018-10-23 23.47.52.png
屏幕快照 2018-10-23 23.48.42.png
十、table
屏幕快照 2018-10-24 16.25.50.png
屏幕快照 2018-10-24 16.26.51.png
十一、表单样式
盒模型计算方式
不同的表单元素盒模型的计算方式不太一样，多数是默认的“content-box”，但是还有些是“border-box”，如 chrome 浏览器对按钮就设置 border-box。所以为了以后的计算方便，还是统一设置为border-box方便。
* {
box-sizing: border-box;
}
focus样式
webkit 内核浏览器会自动添加 focus 样式, 效果如下：
屏幕快照 2018-10-26 16.48.08.png
而这一般在项目中都是要去掉的，代码如下：
input,
select,
textarea,
button {
outline: 0;
}
样式不可控
- 单选框（radio）及复选框（checkbox）的大小，颜色等都不可控，现在一般流行使用伪元素来设置该样式，覆盖默认的丑陋样式（如），或者使用 JS 来模拟单选框及复选框
- select 选项样式没法设置样式，所以如果不使用默认的又得用 JS 来搞
上传文件（file）各个浏览器表现不一致，而且几乎不可以美化（最多只能搞成一个按钮形式） - placeholder IE9- 不支持，如果要兼容 IE9- 则需要 JS 来实现兼容
- 行高及高度未解之谜。有些元素某些浏览器设置行高无效，同样有些是高度无效，所以要实现一个高度且文字垂直居中最保险的办法是设置上下padding
- 更多 HTML 5 新加的各种表单元素的兼容问题
当然这还不是全部，所以对于表单，掌握基础的，了解些常用解决办法，能搞则搞，再不行就上 JS。
参考资料：
进一步探讨单位
CSS 中的单位有很多，这里主要介绍目前常用的及未来必备的几个单位。
px
px 是 pixels（像素）的缩写，是一种绝对单位，用于屏幕显示器上，传统上一个像素对应于计算机屏幕上的一个点，而对于高清屏则对应更多。任何现代显示屏，不管是手机，平板，笔记本还是电视都是由成千上万的像素组成的，所以我们可以使用这些像素来定义长度。
另外 CSS 将光栅图像(如照片等)的显示方式定义为默认每一个图像大小为“1px”。 一个“600x400”解析度的照片的长宽分别为“600px”以及“400px”，所以照片本身的像素并不会与显示装置像素(可能非常小)一致，而是与 px 单位一致。如此就可以将图像完整的与网页的其它元素排列起来。
下面我们使用 px 单位设置下元素的大小，如下：
.box {
width: 200px;
font-size: 16px;
}
%
%（百分比）应该是我们最好理解的单位了，这里就不多解释了，主要有一点需要注意：
- 如果对 html 元素设置 font-size 为百分比值，则是以浏览器默认的字体大小16px为参照计算的（所有浏览器的默认字体大小都为 16px），如62.5%即等于10px（62.5% * 16px = 10px）。
em
em 也是一种相对单位，既然是相对单位，那么肯定有一个参照值。不过其参照值并不是固定不变的，而是不同的属性有不同的参照值。
font-size
对于字体大小属性（font-size）来说，em 的计算方式是相对于父元素的字体大小，1em 等于父元素设置的字体大小。如果父元素没有设置字体大小，则继续往父级元素查找，直到有设置大小的，如果都没有设置大小，则使用浏览器默认的字体大小。
下面我们举几个简单的例子说明下：
.parent {
font-size: 14px;
}
.child1 {
font-size: 1em; /* 1em = 1*14px*/
}
.child2 {
font-size: 1.5em; /* 1.5em = 1.5*14px */
}
/* 父级元素都没有设置大小的 */
.no-parent-font-size {
font-size: 0.8em; /* 0.8em = 0.8*16px */
}
其他属性（border, width, height, padding, margin, line-height）
在这些属性中，使用em单位的计算方式是参照该元素的 font-size，1em 等于该元素设置的字体大小。同理如果该元素没有设置，则一直向父级元素查找，直到找到，如果都没有设置大小，则使用浏览器默认的字体大小。
下面我们举几个简单的例子说明下：
p {
font-size: 14px;
width: 20em; /* 20em = 20*14px */
padding: 1.5em; /* 1.5em = 1.5*14px */
}
/* 元素本身没有设置字体大小且父级元素也没有设置 */
.no-font-size {
width: 40em; /* 40em = 40*16px */
margin-bottom: 2em; /* 2em = 2*16px */
}
总之em的计算单位相对来说比较复杂，现在已经不建议使用，如果你要兼容的浏览器是现代浏览器的话，那么可以使用下面要介绍的 rem 单位。
rem
和 em 一样，rem 也是一种相对单位，不过不一样的是 rem 是相对于根元素 html 的 font-size 来计算的，所以其参照物是固定的。（rem的r就是表示root，虽然rem相对em进步了很多，但是由于是新技术，不支持IE8以下（包括IE8）,不过幸喜的是移动端可以放心使用）
由于 rem 是基于跟元素 html 的 font-size 来计算的，所以如果改变 html 的 font-size 值，那么所有使用的 rem 单位的大小都会随着改变，这对于移动端适应各种屏幕大小来说还是有点作用的。
html {
font-size: 625%; /* 相当于100px = 625% * 16px */
}
div {
font-size: 20px;
width: 2rem; /* 2rem = 2 * 100px(根元素的font-size) */
height: 4rem; /* 4rem = 4 * 100px(根元素的font-size) */
padding: 0.1rem; /* 0.1rem = 0.1 * 100px(根元素的font-size) */
}
如果我们改变了 html 的 font-size 值，如设置为 80px，则相应的我们的 div 的 width，height 和padding 大小也随着改变了。
相对于 em 来说，rem 只需要修改 html 的 font-size 值即可达到全部的修改，即所谓的牵一发而动全身。
vw, vh, vmin, vmax
最后要介绍的这四个单位属于 v 系单位，它们也是相对单位，是基于视窗大小（浏览器用来显示内容的区域大小）来计算的。
网页中我们很多时候都需要用到满屏，或者屏幕大小的一半等，尤其是移动端，屏幕大小各式各样，而这个时候我们现有的单位就显得有点捉襟见肘，于是就诞生了这四个单位。
- vw：基于视窗的宽度计算，1vw 等于视窗宽度的百分之一
- vh：基于视窗的高度计算，1vh 等于视窗高度的百分之一
- vmin：基于vw和vh中的最小值来计算，1vmin 等于最小值的百分之一
- vmax：基于vw和vh中的最大值来计算，1vmax 等于最大值的百分之一
下面我们实例说明实现一个宽度为视窗宽度的 25%，高度为视窗高度 50% 的一个盒子：
.box {
height: 50vh; /* 视窗高度的50% */
width: 25vw; /* 视窗宽度的25% */
background: red;
}
同样由于是新技术，还是有些浏览器不兼容，哪怕在移动端安卓4.3 以下也是不兼容，不过长远来说这也是必备的。
单位运算
除了设置以上的单位之外，我们还可以使用 calc 来进行单位运算，单位运算时可以使用各种单位进行加减乘除运算。
简单示例如下：
.box {
height: calc(50vh - 20px); /* 50% 的视窗高度减掉20px */
width: calc(100% / 3); /* 三分之一的父容器宽度 */
background: red;
}
可惜的是，calc 也存在兼容问题，详细介绍可参考：calc | MDN
注：chrome 浏览器最小的字体为 12px，如果设置 10px 也会渲染成 12px 。
网友评论