CSS笔记

盒子3D模型（由外到内）：border(边框)>content-padding(内边距)>background-image(背景图像)>background-color(背景颜色)>margin(外边距)

盒子尺寸大小 = 边框+外边距+内边距+盒子里的内容大小

稳定性最好的就是盒子本身的高度和宽度了，我们优先考虑这个。因此，很多情况下，我们会考虑利用高度剩余法，宽度剩余法来做，而不是padding和margin。其次，我们才考虑padding ，因为padding也可以看做特殊的盒子高度和宽度，最后我们再用margin来做。因为margin会有边距合并的问题。

CSS盒子模型详解：http://caibaojian.com/toutiao/6023

CSS十问（刨根问底）：http://www.cnblogs.com/dongtianee/p/4563084.html

CSS水平垂直居中：http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/

CSS绘制基本图形代码：http://spion.blog.163.com/blog/static/187244272201272791123671/

60个有用CSS代码片段：http://segmentfault.com/a/1190000002773955

CSS规范和常用模块代码段：http://nec.netease.com/

必须熟记的30类CSS选择器：http://bbs.html5cn.org/thread-85312-1-1.html

CSS开发指南：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS

CSS制作水平垂直居中对齐所有办法：http://www.w3cplus.com/css/vertically-center-content-with-css http://www.w3cplus.com/css%2520/img-vertically-center-content-with-css

CSS代码重构与优化之路：http://www.html5cn.org/article-9229-1.html

从Chorme源码看浏览器如何layout布局：https://segmentfault.com/p/1210000008493191/read

CSS规范：

1.CSS设计模式OOCSS 和 SMACSS：https://segmentfault.com/a/1190000000389838

2.从CSS谈模块化：http://www.jianshu.com/p/6ce8619dc674

3.通用 CSS 笔记、建议与指导：https://github.com/chadluo/CSS-Guidelines/blob/master/README.md?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com#单一文件与多文件

CSS属性：

替换元素就是指浏览器是根据元素的某个属性的值来判断具体要显示的内容的元素，比如img标签，浏览器是根据其src的属性值来读取这个元素所包含的内容的；浏览器会根据 input 中的 type 的属性值来判断到底应该显示单选按钮还是多选按钮亦或是文本输入框。

margin-top和margin-bottom这两个属性对非替换行内元素没有效果，比如a和span，注意这里是非替换行内元素而不单单是非替换元素或者是行内元素。比如 img 就是一个行内元素，margin-top和margin-bottom对它是有效果的，因为它是一个替换元素而不是非替换元素。

对于padding-top和padding-bottom对行内元素没有效果这种说法是不对的，因为它们只是对于没有设置背景色或边框的行内非替换元素效果不可见而已，而对于行内替换元素来说，不管是否设置了背景色还是边框都是有效果了，并且会把父元素撑开。用padding-top和padding-bottom对inline-block的元素设置上下内边距而无需对其设置背景色或边框，并且能把父元素撑开。

序列号成层级关系：http://www.w3school.com.cn/cssref/pr_gen_counter-increment.asp

垂直居中最常用的方法：父元素设置display: table;子元素设置display: table-cell;vertical-align: middle;则子元素容器里面的内容垂直居中。

1em=16px;//ie无法调整px作为单位的网页字体大小,em具有继承性。(如果定义了body{font-size=12px;} #title{font-siez=2.6em;}而id=title恰好在body里面,那么id=title的字体大小就是2.6*16-12=29.6px)

z-index:9;//并级的对象，此属性参数值越大，则被层叠在最上面(只有在定位的情况下才能设置),属性只能工作于那些被定义了position属性的元素中。如果只有一个绝对定位元素自然不需要z-index；如果两个绝对定位元素，控制DOM流的前后顺序达到需要的覆盖效果，也不需要z-index；多个绝对定位元素则少见。那么如果非弹框类的绝对定位元素z-index>2，必定z-index冗余，需要优化。

absolute完全脱离文档流，不占据任何空间，不影响整体布局和结构，和relative更没有任何依赖关系。absolute最好不要和父元素有依赖关系，防止整体变动时崩塌，使用absolute和margin定位能达到最佳效果，而且absolute具有跟随性，如果前一个元素是inline或者inline-block，那么就算是0空间它一样会跟随前一个元素的位置并排显示，还能自适应浏览器大小在当前位置显示不动。元素进行绝对定位后脱离文档流，其宽度是根据元素内容所占宽度来计算的，为这能让其视觉效果更好，最好给元素定义一个宽度值。float属性也是如此，其宽度是根据元素内容所占宽度来计算的。

单行溢出文本显示省略号...的方法：white-space:nowrap; //文字一行显示 overflow:hidden; text-overflow:ellipsis; //超出的...显示（超出部分省略号显示）参考地址：http://jssl915.github.io/overflow/

多行文本溢出：

.foo{
display:-webkit-box;
overflow:hidden;
text-overflow:ellipsis;
-webkit-box-orient:vertical; /*方向*/
-webkit-line-clamp:4; /*显示多少行文本*/
}

text-indent:-999px;overflow：hidden; （隐藏按钮文字的小技巧）

块元素可以设置margin和padding值，行元素只能设置水平方向的padding和margin值。行内元素中间有空隙，产生原因：换行符、tab（制表符）、空格产生间隙。解决方法：1.元素写成一行（代码格式不规范，不建议使用） 2.设置父容器font-size：0；

li中插入img图片间有空隙的解决方案: 父容器font-size:0或img{vertical-align:bottom/top; display:block;}

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin或padding时。
解决方法：为父DIV添加overflow:hidden;需要给父div设置边框，当然可以设置边框为透明;为父DIV添加padding，或者至少添加padding-top;

visibility隐藏后，仍然占据空间（效率高，不经常用）
display隐藏后，不占据空间（效率低，经常用）

display:block(块元素)/inline（行内元素）/inline-block（行内块元素）;//由行元素转变为块元素

为盒子添加contentEditable="true"，盒子将变为可编辑的文本框。

当值是0时，除了RGB颜色值0%必须跟百分号，其他情况后面可以不跟单位"px"。

清除浮动：
其一（最有效的方法），1.给浮动元素紧邻后面的元素设置clear：both；2.给浮动元素的父容器设置overflow：hidden；
其二，通过在浮动元素的末尾添加一个空元素，div设置 clear：both属性br设置clear："all"，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素（空标签无意义，不建议使用）；
其三，给浮动元素紧邻后面的元素设置with：100%（或者固定宽度）+overflow：hidden；

清楚区域是在元素上外边距之上增加的额外间隔，不允许任何浮动元素进入这个范围内。这意味着元素设置clear属性时，它的外边距并不会改变。要确保一个清楚元素的顶端与一个浮动元素的底端之间有一定的空间，可以为浮动元素本身设置一个下外边距。

浮动的坏处：会使元素(行内元素)display：block化。绝对定位的行内元素也会被块级化。

上下相邻的普通元素，上下边距，并非简单的相加，而是取其中较大的边距值，这种现象叫做margin重叠。如果不是普通元素，两相邻元素边距相加。外边距合并只出现在块级元素上，浮动元素不会和相邻的元素产生外边距合并，绝对定位元素不会和相邻的元素产生外边距合并，内联块级元素间不会产生外边距合并。

vertical-align属性只对行内元素有效果，对块级元素没有任何效果。

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。详解地址：http://segmentfault.com/a/1190000000484493

align="abbsmiddle" //插入一张图片和文字，使图片和文字在竖直居中

不使用list-style-image来定义列表项目标记符号，而用background-image来代替，并通过background-position来进行定位。

当子元素为绝对定位元素，同时，父容器的position值为static的时候，为子元素添加height:inherit，如果容器高度变化了，里面的绝对定位元素依然高度自适应。如果页面很复杂，避免使用position: relative会让你少去很多z-index混乱层级覆盖的麻烦。附地址：http://www.zhangxinxu.com/wordpress/2015/02/different-height-100-height-inherit/

Web安全颜色的简写十六进制值是0,3,6,9,C,F，因此#693，#0C6，#F0F都是Web安全颜色的例子。十六进制的颜色值的简写形式是浏览器会取每一位，并将其复制成两位，例如#F00等价于#FF0000。

关于固定宽度的DIV中英文不能自动换行的问题，解决方法是：

word-break:break-all；或word-wrap:break-word；

两者区别：

1、word-break:break-all;内容到达固定宽度处会自动换行，如果该行末端有个英文单词很长，则把单词截断。对FF无效。

2、word-wrap:break-word;如果该a行末端宽度不够显示整个单词，它会自动把整个单词放到下一行b行，而不会在 a行把单词截断。若b行整行都不够一个单词宽，则将单词截断以对齐。对FF、IE有效。

3.表格中处理长英文换行办法：table-layout:fixed;word-wrap:break-word;

优缺点：

word-break:break-all能很好的让文本对齐，显得整洁，但是100%切断单词，易读性降低

word-wrap:break-word比较人性化，但行末会参差不齐。

font属性的前三个值允许采用任意的顺序，但后两个值要严格得多。font-size和font-family不仅要以此顺序（font-size在前，font-family在后）作为声明中的最后两个值，而且font声明中必须有这两个值，这很明确。如果少了其中某个属性，那么整个规则都是无效的。

表格td中设置overflow:hidden不起作用，添加table-layout:fixed属性即可解决。如果想去除页面默认滚动条，添加overflow:hidden即可。

position:absolute;left:0;right:0;top:0;bottom:0;的效果和100%;height:100%;position:absolute;left:0;top:0;一样，相当于全屏拉伸占据当前可见视窗。

给元素设置外边距或者绝对定位的上下左右的值时，可以不用显式的设置宽度和高度。

如果元素(包括select，input等)边框未设置颜色的话(前提是边框已经设置了border-style)，color会影响元素周围的边框颜色。

子元素上下左右内、外边距的百分比都是相当于父元素的宽度来计算的。

如果background-position用长度和百分数设置时，水平值必须先出现，否则实际效果不对。

行内元素与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素"之上"显示。

块元素与一个浮动元素重叠时，其边框和背景在该浮动元素"之下"显示，而内容在浮动元素"之上"显示。

a标签的样式规划（避免过度设计）：

a{color:#06C;text-decoration:none;}

a:hover{color:#F90;text-decoration:underline;}

.normal a{color:#666;}

.normal a:hover{color:#000;}

.list a:visied{color:#969;}

给img指定max-100%。这样的话，图片的最大宽度不会超过其原始宽度，而图片在小于原始宽度的情况下会按 100%的样子显示。
对于img元素，还有个3像素bug，默认情况下图片下方会多出3px的边距，可以通过为img指定vertical-align的任意值或者是display:block来消除这3px，而一般使用vertical-align: middle不会破坏img默认是行内块的样式。