使用css时的一些技巧及注意事项

<!-- TITLE: 使用css时的一些技巧及注意事项 -->

# CSS推荐书写顺序:

1. 位置属性(position, top, right, z-index, display, float等)
2. 大小(width, height, padding, margin)
3. 文字系列(font, line-height, letter-spacing, color- text-align等)
4. 背景(background, border等)
5. 其他(animation, transition等)

# 连字符CSS选择器命名规范
1. 长名称或词组可以使用中横线来为选择器命名。
2. 不能用“_”下划线来命名CSS选择器，为什么呢？
一些浏览器已经不允许使用下划线来命名CSS选择器（就是不兼容）；
能良好区分JavaScript变量命名.

# css优先级

**选择器的优先权**
1. 内联样式表的权值最高 1000；
2. ID 选择器的权值为 100
3. Class 类选择器的权值为 10
4. HTML 标签选择器的权值为 1

**CSS 优先级法则：**
A 选择器都有一个权值，权值越大越优先；
计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照“就近原则”来判断。
B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
C 即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
D 继承的CSS 样式不如后来指定的CSS 样式；
E 在同一组属性设置中标有“!important”规则的优先级最大；
F 优先级顺序:!important>style(行内)>id>伪类>属性选择器>class(类名)>tag(标签)>声明先后顺序>全局选择器

# CSS中可以和不可以继承的属性

**一、无继承性的属性**
1. display：规定元素应该生成的框的类型
2. 文本属性：
vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向
3. 盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
4. 背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
5. 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
6. 生成内容属性：content、counter-reset、counter-increment
7. 轮廓样式属性：outline-style、outline-width、outline-color、outline
8. 页面样式属性：size、page-break-before、page-break-after
9. 声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

**二、有继承性的属性**
1. 字体系列属性
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。
2. 文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
3. 元素可见性：visibility.
4. 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout.
5. 列表布局属性：list-style-type、list-style-image、list-style-position、list-style.
6. 生成内容属性：quotes.
7. 光标属性：cursor.
8. 页面样式属性：page、page-break-inside、windows、orphans.
9. 声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation.

**三、所有元素可以继承的属性**
1. 元素可见性：visibility
2. 光标属性：cursor

**四、内联元素可以继承的属性**
1. 字体系列属性
2. 除text-indent、text-align之外的文本系列属性

**五、块级元素可以继承的属性**
1. text-indent、text-align.

# 一些注意事项:

* **避免使用多类选择符。** IE6以及更古老的浏览器对类似.foo.bar的多类选择符解析不正确，参考IE6下的多类选择符一文。
* **移除空的css规则。** 这个规则不包含任何属性，空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。
* **正确使用display的属性。** 由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。CSS Lint会检查一下几点:
display:inline后不应该再使用width、height、margin、padding以及float。 <br>display:inline-block后不应该再使用float。
display:block后不应该再使用vertical-align。
display:table-\*后不应该再使用margin或者float。
* **不滥用浮动。** 虽然浮动不可避免，但不可否认很多css bug是由于浮动而引起。CSS Lint一旦检测出样式文件中有超过10次的浮动便会提示警告。
* **不滥用web字体。** 对于中文网站来说Web Fonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。
* **不声明过多的font-size。** 这是设计层面的问题，设计精良的页面不会有过多的font-size声明。
* **不在选择符中使用ID标识符。** 主要考虑到样式重用性以及与页面的耦合性。
* **不给h1~h6元素定义过多的样式。** 全站统一定义一遍heading元素即可，若需额外定制样式，可使用其他选择符作为代替。
* **值为0时不需要任何单位**
* **标准化各种浏览器前缀。** 通常将浏览器前缀置于前面，将标准样式属性置于最后
* **使用CSS渐变等高级特性，需指定所有浏览器的前缀**
* **避免让选择符看起来像正则表达式**
* CSS3添加了一些类似~=等复杂属性，也不是所有浏览器都支持，需谨慎使用。
* **利用CSS继承减少代码量。** 有一部分CSS代码是可以继承的，如果父元素已经设置了该样式，子元素就不需要去设置该样式

# inline-block 间距问题解决

1. 去除标签段之间的空格，自然间距就木有了,考虑到代码可读性，显然连成一行的写法是不可取的
2. 使用margin负值。margin负值的大小与上下文的字体和文字大小相关，由于外部环境的不确定性，以及最后一个元素多出的父margin值等问题，这个方法不适合大规模使用。
3. 设置父元素的font-size:0；。子元素font-size设置成合适大小，如果不设置子元素font-size，子元素会继承父元素的0；
这个方法，基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器，就是Chrome, 其默认有最小字体大小限制，因为，考虑到兼容性，我们还需要添加
4. 设置父元素的letter-spacing为-4px或-8px，除谷歌是-8px外，其余是-4px。同样要设置子元素的letter-spacing:0；否则会继承父元素，造成子元素内文字变形。

# 写CSS时input标签的注意事项

input标签跨浏览器样式不统一的表现主要有以下两个:
　　一是input标签的高度不能统一，其表现为Firefox和IE中的高度始终不能一致。
　　二是在IE浏览器中属性为text的input标签中的输入文字不是垂直居中显示，而是靠输入框的左上角显示。

1.input标签在type为text时情况
　　在Firefox和Safari中的默认高度为22像素（包括上下边框）宽度为146像素（包括左右边框），而在IE中的默认高度为24像素，而宽度与Firefox和Safari是一样的，也是146像素。
2.input标签在type为submit时情况
　　在Firefox中的高度为23像素（包括阴影），宽度为75像素。在Safari中高度为21像素，宽度为73像素，在IE中高度为25像素、宽度为73像素。
给input标签写CSS时需要注意的事项：
　　1.不要给属性为text的input标签设置高度。如果你设置了高度，后果是IE浏览器输入框中的文字不能垂直居中显示。或许你觉得可以通过设置padding属性来解决问题，但在实际操作中你会发现根本没法让它在Firefox和IE中取得一致的效果。正确的解决之道是直接给input标签设置padding属性，通过内边距属性来调节input标签的高度。
　　2.input标签不会继承父元素的字体样式和大小，需要直接给input标签声明font-family和font-size属性。
　　3.给属性为text的input标签设置合适的width属性和padding属性，确保其中的文字在合适的范围内出现。尤其是使用了背景图片后，要让文字框的大小和背景图片的大小相当，这样看上去更加美观。

# a 标签

a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 鼠标移动到连接上 */
a:active /* 选定的链接 */
注意:
a:hover 必须置于 a:link 和 a:visited 之后，才是有效地。
a:active 必须置于 a:hover 之后，才是有效地；

# calc()

**calc()的运算规则**
* 使用“+”、“-”、“*” 和 “/”四则运算；
* 可以使用百分比、px、em、rem等单位；
* 可以混合使用各种单位进行计算；
* 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
* 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

# 表格宽度被撑开

在使用表格布局时，经常会用到给表格设置固定宽度，表格内容超出时强制换行或者省略，但是发现并没有生效
这种问题的原因是，表格默认列宽度由单元格内容设定，并不受设置的宽度限制
解决方法为：`table { table-layout:fixed; }`，使列宽由表格宽度和列宽度设定
超出省略设置
```css
td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
```

# 优化css代码建议：

1. 不要写不需要的样式

这样可以：
- 减少 CSS 文件的长度，这样更容易在 CSS 文件中定位代码位置。
- 明确 CSS 类实际需要做什么，而不是定义一堆已有的垃圾样式。

例如：在任何地方写 display:block 时都需要注意。因为许多元素默认都有这种样式。
再比如，定义继承了你定义过字体大小的元素的字体大小。
一个常见问题是有许多不再使用的 CSS 样式没有清理掉，为了简洁起见，这些 CSS 样式可以完全删除。

2. 考虑把 CSS 当作可复用组件

如果你可以定义可复用的 CSS 工具和组件来使用而不是把 CSS 元素看作每个单页特有的形式和元素，就会大大减少代码的复杂性。

确定你的设计在多个不同的页面之间保持一致，你应该知道如果你改变了一个类的样式，变化会表现在每一个页面上。
这样写 CSS 确实很快。多数时候，如果你把部分样式定义为一个工具或者类，你就不需要花大量的时间来更新和重建应用中已经存在于其它地方的样式。

3. 在 CSS 中定义工具以使你的 CSS 更实用

我们将 '工具' 定义为这样一种 CSS 类，它是为某种特定的目标而生，而不是为了表示一整个元素。

在流程框架中可以看到这样一些例子：
比如，使用 .hide 之后，就不需要每次都写一个类来隐藏页面上的元素，你可以直接在元素上使用 .hide 类，它会赋于元素 display: none; 样式。
我们已经创建了自己的工具文件并在各个应用之间共用，使用一些公共工具来减少为每个元素写特定样式的需求。

通过组合这些工具，我们可以保持空白像素一致，同时快速为页面做上标记，还不用写大量的 CSS。
在定义工具的时候，你应该考虑到会多次使用它们。如果是一次性的样式，或者只是想组合一些常用的样式，那么最好是定义成专门的 CSS 类。

4. 避免嵌套，除非你真的需要它
5. 只在不得已时使用 !important

-----------------------------
~~未完待续~~