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也会扩展为其父元素的宽度，而不是子元素所占水平空间的宽度。