【经验】css

1.父元素overflow:hidden，当父元素大小减小到不容纳子元素时，会出现滚动条。
2.input的盒模型尺寸基准是content-box，它的宽度将是以width-border计算，也就是说一个设定width:100px;border:5px solid;的input，其宽度将是90px。
3.position:relative 对display:表格类是无效的。http://www.w3.org/TR/CSS21/visuren.html#choose-position 中有说明。
4.360的line-height小于font-size时，会隐藏文本行。而ff和chrome则不会隐藏。
5.当div中的元素全浮动时，div本身将不包含任何东西因此为空，所以其后的兄弟元素不会换行而是如同左浮一样靠在div的右侧。这种时候给这个div设置overflow:hidden就可以让它拥有布局。
6.display:inline的元素不会继承line-height。
7.原来元素设定position:absolute可以相对有滚动条的父元素进行fixed定位，前提是父元素没有定义position。
但是，一旦点击其中的元素，会导致元素重新定位（点击触发重绘所以重新绘制位置）。具体位置是“父元素的顶端”，情形像是父元素因滚动而往上位移了。
8.overflow:hidden可以使得元素不占据浮动元素的位置。
9.ff会默认给border使用文本颜色，样式为-moz-use-text-color
10.给ul添加inline-block可以使用verticla-align，在span上添加似乎无法使用？
11.inline-block和inline在对空格的处理上有区别，
<span>a</span><span>
a</span>
在inline中会呈现空格，在inline-block中则不会
12.兄弟元素上下边距会重合，任一方定义了display:inline-block与float，则重合取消。overflow:hidden不行。
13.父元素的其中一个子元素float，若没有其他子元素来clear:both，则这个父元素计算宽高时不会包括浮动的子元素(除非父元素float或overflow或inline-block)
所以，如果没有子元素清除浮动，则父元素最好还是使用:after{content:"."; display:block; height:0; visibility:hidden; clear:both;}生成子元素清除浮动。
14.display:inline-block疑似会让父元素获得子元素的浮动属性。
15.after伪类需要声明content:""来生成盒子
16.明明line-height等于height，为什么文字垂直总差理想的居中一点点？是不是还有点偏下？看下是否设置了box-sizing吧，height会被重计算。
17.overflow:hidden可以防止元素被浮动兄弟元素掩盖。
17.2.但是即使设置了overflow:hidden，无论哪个方向的margin还是会被浮动兄弟元素掩盖。inline-block则不会。
这个设定可能有其深意：当margin-top大于浮动兄弟元素，将把元素推到兄弟元素的下一行。
浮动换行，除了clear，还可以这么干。
18.在项目中我采用<ul>代替<table>，因为，虽然<thead>的th和<tbody>里对应的td能够自动调节成两者间的最大宽度，但宽度会被文字撑开导致width属性无效，即使设置了overflow:hidden也没用。
18.1.要解决文字撑开问题，可以在th和td里添加p，给p设置宽度，就可以限定内容的宽度了。
18.2.如果要给<thead>和<tbody>里的p设置宽度，那何必使用<table>，使用<ul>就好。
18.3.使用<ul>代替，关键点是.title和.list里的li.col是一一相应的，基于这点认识设计图，写html就会顺利。
19.对于block元素，当其宽度根据父元素计算时(父元素的宽度不依赖本元素)，设置width:auto，设置负margin-left，可以拉长宽度。(水平上，正值margin则会减少宽度，负值margin当然会增加宽度)
19.1.当父元素宽度依赖本元素计算时，水平上，正margin会扩充父元素，负margin会缩短父元素。
20.元素首先按照自身计算box-width，再按照父元素计算，再按子元素计算。已经计算就不会再考虑后面的因素。
20.1.元素不会【直接】根据兄弟元素计算宽度。因为，能根据兄弟元素计算宽度的前提条件是：两者同在文档流的一行。要同行显示，元素得设置float/inline-block/inline。但这些都会使得元素会根据自身计算宽度。
20.2.元素可以间接通过父元素，根据兄弟元素计算宽度。元素依赖父元素，父元素依赖兄弟元素。
21.inline-block/inline的负margin-right会影响到下一行的兄弟元素的定位。
22.文字超出显示省略号
overflow: hidden;
text-overflow: ellipsis;
word-break: keep-all;
white-space: nowrap;/*这句的作用是使得文字溢出也不换行。这会对其中的浮动元素产生影响，起码对右浮元素有影响*/

23.inline-block+vertical-align:middle 疑似= float:left
24.
<ul>
  <li><i></i></li>
  <li></li>
</ul>
<li>左浮且overflow:hidden，<i>右浮，且设置white-space: nowrap;，按理li应该可以包含i。
但由于white-space: nowrap;会换行显示(但应该恰恰相反啊)
25.我有点明白为什么有时候字体垂直居中对齐会偏下了，可能是我设置了line-height，又因为文字或空格分成了两行。
26.有时设为inline-block的子元素，相对父元素上边会偏下一点点，可能是因为它们继承了父元素的line-height，而父元素的line-heigth与height相等。重设子元素line-height即可。
27.元素的默认样式优先似乎高于继承。
28.inline-block元素里面放图片，如果发现元素像是有下内边距似的，可以设置元素line-height:0解决。
29.<div.pull-left /><div.overflow />
.overflow设置margin-left:-1px，并不会它本身左移。给.pull-left设置margin-right:-1px就能实现理想的效果。
30.我终于明白为什么有的inline-block元素不能跟兄弟img或者i垂直对齐了，因为它们设置了垂直margin，这个也会影响垂直对齐
31.overflow:hidden有不让元素与浮动兄弟元素重合的功能，display:inline-block更有不让垂直margin重合的功能。
32.text-align:center如同text-align:left一样，会被兄弟浮动元素影响，其对齐位置为(父元素width-浮动元素width)/2 + 浮动元素width
33.我第一次知道bold和bolder的区别。bolder是相对父元素继承值"更粗"，而bold大概是等于800，所以bold总大于等于bolder
34.first-child可能是选取父元素的第一个元素，而元素集的第一个。
35.<br />也会继承line-height而获得高度，所以用br来换行时要注意。
36.父容器固定高度，内有一子容器固定高度，其下方有另一子容器设置overflow:auto期望自适应滚动条。问题是，第二个子容器的高度如何自适应，如何使它不设置固定高度也能实现滚动条的自适应？
可以给父容器设定overflow:hidden，给它设定height:100%。【当父容器设置overflow:hidden，子容器设置overflow:auto，不仅子容器的内容溢出子容器时子容器会出现滚动条，子容器本身溢出父容器时也会出现滚动条】
37.chrome的input被focus会有蓝色边框，可以添加outline:none处理。
38.给body设置overflow:hidden，若内容溢出时点击鼠标中键仍可以进行滚动。还要给html设置才行。
39.padding-top,padding-bottom,margin-top,margin-bottom等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
http://www.webhek.com/vertical-percentages-are-relative-to-container-width-not-height
40.absolute的body的子元素，设定height:100%，其高度会跟随浏览器窗口高度而变化，而不是根据body的height。
原因是body未设置position:relative，导致子元素根据html定位。
41.hover时设置的background只在hover后开始加载
42.line-height固定的inline-block容器内文字换行，可能不会撑起容器的高度导致容器的高度只有line-height值。可设置height:auto避免。
43.两行才显示省略号，只用css的完美实现：
<div style="height: 26px;line-height:12px;width: 8em;font-size:12px;position: relative;overflow: hidden;">
    <p style="display: inline-block;width: 8em;height:12px;line-height: 12px;overflow: hidden;">一二三四五六七八九十九八七六五四三二一</p>
    <p class="ellipsis" style="margin-left:-8em;width:16em;text-overflow: ellipsis;white-space: nowrap;word-break: break-all;overflow: hidden;">一二三四五六七八九十九八七六五四三二一</p>
</div>
44.要一个框不使用px为单位，实现水平居中。
对这个框设定position:absolute;left:50%;display:inline-block//可能也不用inline-block
对其子元素设定position:relative;left:-50%;
（其实只是这个框的子元素实现水平居中）
44.1 有个有趣的地方是，如果子元素使用margin代替position。则父元素在垂直上会失去高度，而在水平上则不会
44.2 缺点在于，父元素不可避免地拥有布局，在页面拉小时会出现滚动条。
我最终使用了父元素宽度100%，height设定为子元素高度；子元素设定固定高度，设置margin: 0 auto以居中对齐的方式实现水平对齐;
可能垂直对齐会设定父元素height等同body，设定line-height等同高度来实现。
45.控制台中的盒模型计算有个细节，使用百分比line-height决定高度时盒子的height会是整数，而使用百分比height时盒子的height会带小数。
46.垂直的margin真的是根据width来计算的。是根据父元素的width计算的。
47.遇到了input中focus字体就上升的问题，把height和line-height设为等高就可以了。
47.1出现input两者不等高的原因，就我来说，可能是.input-box设定了border-box;然后将input的height设100%，将input的line-height设为等同.input-box的height——这点会因为差了边框的高度而使得line-height比height要低。
这种模型中不必要给.input-box设定border-box，给它设定width:auto就可以了。
48.a会继承line-height，但不会使用到高度计算；而float的a会根据继承到的line-height计算高度。
48.1 其实也不奇怪，毕竟p在有行高时会根据行高计算高度。a设定float就会成为块元素。
49.默认的vertical-align是baseline吧，这个跟兄弟元素各自的line-height有关。
50.如果容器中没有文本，vertical-align就不会起效，即使设置的是bottom
51.给span加line-height，在firebug中的探查器里不会反映到高度上。
52.html的width是窗口的宽度，而其高度是取决于子元素与窗口高度无关。
所以当子元素宽度比窗口大时会出现横向滚动条，html中设置了width:100%的，都会在右侧出现空白。
而设置了height:100%的html的子元素，其高度有可能不会充满屏幕。
52.1 出现滚动条的原因是document大于视口
52.1 $(document).width()是包括滚动的横向宽度
52.2 水平空白解决方案：
var document_elem = $(document),
    oldDocWidth = document_elem.width();
var elem = 子元素
$(window).on('resize', function() {
    var document_width = document_elem.width();
    if(oldDocWidth != document_width){
        elem.css('width', '100%');
    }
    else {
        elem.width(document_width);
    }
    oldDocWidth = document_width;
})

53.父元素只设置font-size，其子元素设置height:100%是无法与父元素等高的，父元素至少要设置line-height
54.让子元素决定父元素盒子，可能是一种不好扩展的做法。
55.我发现一个有趣的现象，当<a>宽度不足时使得其中文字垂直显示，形如：
<a>
<i inline-block>(用于显示图标)
在
线
客
服
</a>

此时不会有什么问题，<a>会正确根据<i>的高度计算其自身高度；如果把<i>换成<img>，则<a>计算高度时会有偏差，根据观察，如同它认为<img>的高度只有1em。
要避免这个问题，解决方案是为<a>设置display:block/inline-block

56.9px宽高，边框宽为1的盒子，设置border-radius:5px才是准确的圆。
57.绝对定位的元素会掩盖兄弟元素，即使在文档流中它处于兄弟元素的前面。这时要给兄弟元素添加相对定位。
58.绝对定位百分比宽高，会基于定位所基的父元素而而不是直接父容器。
59.透明度代码
http://blog.csdn.net/freshlover/article/details/17143341

    -webkit-opacity: 0.5;  
    /* Netscape and Older than Firefox 0.9 */  
    -moz-opacity: 0.5;  
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/  
    -khtml-opacity: 0.5;  
    /* IE9 + etc...modern browsers */  
    opacity: .5;  
    /* IE 4-9 */  
    filter:alpha(opacity=50);  
    /*This works in IE 8 & 9 too*/  
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  
    /*IE4-IE9*/  
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);  

60.overflow:hidden确实会清除浮动，但是有时候不能设置overflow:hidden或者display:inline-block，这时候需要用
.clear-fix::after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
61.清除浮动或否是很重要的，不能盲目清除。因为清浮动会扩展父元素的布局，父元素的box会因此增大一个区域，占据空间；不清浮动，父元素的box范围会缩小，box宽高为0时甚至自身无法触发点击事件，其上的点击事件统统由子元素冒泡得来。
总之，清除浮动会让父元素在保持box为方形的条件下扩展自身box，使box恰好地包含浮动元素。
62.inline-block元素中间插入br或者div以断行，会在中间产生间距，需要设置vertical-align:top;以消除。
63.top:100%;好像会导致子元素上边与父元素下边重合。需加margin-top
64.width设置负数，如同不设置width
65.垂直居中的方法还有top:0;bottom:0;margin-top:auto;margin-bottom:auto;
66.letter-spacing会在最后一个字符右侧产生一个空白间距。对text-align的文字，这样会导致无法居中对齐；可以使用text-indent设置同样值实现居中对齐。
67.父元素绝对定位，设定padding，子元素设inline-block有宽高，这时父元素内实现部高度可能为双倍子元素高度。为父元素设置行高可解。
68.inline-block元素会被添加行高
69.letter-spacing配合text-indent可以实现字符中间产生间距并居中对齐
70.当inline-block子元素因过长换行时，父元素即使是inline-block也会扩展为其父元素的宽度，而不是子元素所占水平空间的宽度。