CSS实战笔记阅读笔记

本文主要是介绍CSS实战笔记阅读笔记，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

不要使用<b>和<i>来使文字变粗或变斜，尽量使用CSS。如果一定要强调某一个字或短语，使用<strong>标签（浏览器会使<strong>标签变为粗体）。对于较次要的标签使用<em>标签进行强调（浏览器会将之显示为斜体）。
<cite>标签不仅把标题变为斜体，还给标题做上标记，使他便于被搜索引擎搜到，一箭双雕。
每个页面只使用一个<h1>标题，有助于页面被搜索引擎检索到。
用标题表示文本的重要性，要考虑到大纲结构。<h1>~<h5>尽量不要跳号。
使用外部样式表的好处之一是会访问“高速缓存”这个文件夹里存储的演示表，如果不同页面依赖相同的样式表，可以节省下载时间。
在使用内部样式表时，如果有<script>标签，则要放在<style>之后，因为JavaScript程序依赖CSS。
可以使用@import来引用外部样式表，效果与<link>相似，可以做到一件<link>做不到的事：将多个外部样式表附到一个外部样式表上。
伪元素（如:first-line）通常被当做标签选择器对待（1分）。伪类则被当成类对待（10分）。
当有外部样式表和内部样式表同时存在的时候，如果外部样式表排在内部样式表之后，那么外部样式表中的样式胜出（最后出现的样式胜出）。不过，最好先列出所有的外部样式表，然后再纳入内部样式。
任何一个带有@import规则的外部样式表，在<style>标签里有必须出现在内部样式之前。
使用!important可以使某属性永远胜出。比如p {color: red; !important}，多个!important竞争时，更具体的!important将胜出。
继承来的属性没有任何的权重值，也就是说，即使某个标签从一个带有很大权重的标签继承了样式，这些属性也始终会被直接应用于标签的样式所忽略。
行高line-height默认是120%
在继承line-height的时候，如果父元素是用百分比表示的，其会继承父元素的行高而不是百分比。使用数字表示，得到的是字号x数字倍数，当发生继承时继承的只是数字的倍数。
在使用font时，使用字号/行高来表示。最后两种属性必须是font-size(font-size/font-height)和font-family，其他属性的顺序随意。
对于边距折叠(collapsing margin)，可以添加padding或border。因为padding和border在两个margin之间，加入后就将两个margin隔开了。
浏览器在生成每行文字的时候，后面的行是盖在前一行上面的，所以如果后面的一行里有span标签的background-color，将盖住上一行而不会盖住下一行。
display: none;可以将元素完全隐藏起来。
按照css规则，除了图片，所有标签的浮动元素都要设置width属性。
浏览器会将浮动的行内元素当做块级元素看待。
给设在了再浮动元素下方跑动的背景或边框的样式添加一条规则。overflow: hidden; 可以让任何延伸到浮动下方的背景和边框消失。如图
浏览器会从左侧缩进列表项目，有些是用padding有些是用margin。所以先使用padding-left和margin-left将缩进取消。
行内元素即使设计了padding-top和padding-bottom也无法将间距撑开。
行内元素的宽度等于行内内容的长度，当行内元素被设定为display:block时，元素的宽度会延伸到整个页面。
为了让文字在一个块级元素中垂直居中，只需要将文字的line-height和块级元素的height设定的一样大。
使用overflow:hidden可以清除浮动。详情见：CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属
表格中水平居中使用text-align，垂直居中是vertical-align。text-align会被继承，vertical-align不会被继承。
解决div内元素大小溢出div大小的方法（也可见方法28）
1. 在外围div底部添加一个<br />然后设定br {clear: both};（需要添加额外的html）
2. 将外围div设定为float;
3. 将外围块设定为overflow: hidden; overhidden会强制外围块放大到包含浮动元素，如果是ie6及之前的浏览器，再添加zoom: 1;不过如果div中有绝对定位的元素时，可能显现不出来。
4. 使用简单清除法（需要添加额外的html）
```
		/* 清理浮动 */.clearfix:after {content:"";display:block;height:0;font-size:0;clear:both;visibility:hidden;}.clearfix {zoom:1;}
```
  然后在html中添加
```
		<div class="clearfix"></div>
```
填补高度不同的div中，矮的div无法100%高度的情况：使用background-image来模拟背景颜色。叫做“faux列”。
CSS中可继承和不可继承的元素
绝对定位的规则：
1. 如果一个标签的位置是绝对的，他又不在任何设定了absolute, relative或fixed定位的标签里面，则它相对于浏览器的窗口进行定位。
2. 如果一个标签出于另一个设定了absolute, relative或fixed的祖先元素里面，那它就相对于这个祖先元素的边沿进行定位。
通常只是用relative定位给嵌套的标签创建新的定位环境，因此甚至不需要对他使用left top bottom right进行设置。
绝对定位的元素处于网页的上层（z-index），绝对定位元素中的绝对定位元素无论z-index值为多少也在其外围元素之上。
display: none与visibility: hidden的区别是：后者会在原来的位置留下一个洞。但对于绝对定位元素来说，两者是一样的。
当某个div的浮动为absolute或fixed时，其宽度不再延伸至整个浏览器宽度，而是像内联元素一眼由内容决定（why？）
图片是行内元素，但是可以将display: block来解决很多问题。
创建适用于screen和print的样式表有三种方法：
1. 优先考虑适用于显示器的，然后创建适用于打印的样式表进行覆盖。
2. 创建两个不同的样式表，一个适用于screen，一个适用于print。
3. （盛行？）创建三个样式表，一个针对screen，一个针对print，一个是两者公用的。
对一个已有background-image属性的元素使用background: white，不仅会将其background-color的颜色改变，还会将其background-image还原为默认值（none）。
可以创建一个外部样式表，其中导入其他所有的外部样式表。
```
@import url(main.css)
@import url(form.css)
@import url(color.css)
```
可以将这个文件命名为global.css, base.css或像这样的通用的名称。这个文件中不包含任何的规则，而是利用@import指令添加其他的样式表（就像opencv.hpp一样）。这是该文件中仅有的代码，不过还可以添加一些其他的注释，比如版本号、网址等等，以便于识别该文件。
高速缓存器中有保存好的css缓存，在服务器中更新了css文件后，用户还会从硬盘中访问旧的css。解决方法是：
```
<link rel="stylesheet" type="text/css" href="css/print.css?v=1">
```
只要与原来的css文件中的v=不同，浏览器就会将它看做是一个新的css文件重新下载。
条件注释也具有层叠性，后面的注释会覆盖前面的注释。
opacity是可以继承的。
如果不希望某个div的透明度被继承，可以使用rgba(23,34,45,0.75)，background不能被继承，嘻嘻。
font-face可以支持otf(open type font)和ttf(true type font)的字体
在命名字体时，可以自己起名字。