对html与body的一些研究与理解
1.背景色 ：一般情况下，我们css控制的最高节点就是body ， 一旦设置了<html>节点的background背景色之后，<body>的背景色将失效。
2.关于滚动条 ：打开一个空白页面，观察浏览器右侧，会发现IE浏览器会有一段滚动条的槽道，而Firefox浏览器下没有。 设置 body{overflow-y: scroll;} Firefox下是出现了滚动槽了，但是IE下出现了两个滚动条 。应为 html{overflow-y: scroll;}。
3.关于height:100%：要想让Firefox浏览器也支持<body>的height:100%是简单的，就是设置<html>标签height:100%，一旦设置了height:100%则无论哪个浏览器下<body>都支持height:100%了，而<body>内部的容器也可以支持height:100%了。前段时间看到百度的一道面试题，说什么透明层无论滚动与否都满屏显示，其实就是对<html>和<body>标签做一番手脚，两者高度100%显示，同时溢出隐藏（overflow:hidden），然后用一个<div>高度100%显示，溢出滚动。而这个透明层就使用绝对定位且与这个<div>平级，高宽100%显示，就可以使得无论怎么滚动这个透明覆盖层都是满屏显示的。这其实也就解决IE6下浮动层固定定位的经典方法。
多行文字的垂直居中
两张图片与文字一起垂直居中
图片的垂直居中
select中文字垂直居中问题
select文字在默认和边框高度增加时 是默认居中的。你要是不想居中的话可以用padding值调整。但是右侧的三角不会改变。select在高度减小时。字体是不会垂直居中的。无论你用什么他都不会垂直居中。网上的方法，我基本都试过。我的解决办法是改变字体的大小。字体变小了。select的高度也会随之变小。或者你在适当的改变一下他的高度。
复选框单选框与文字对齐问题的研究与解决
复选框单选框对齐问题
大小不固定的图片、多行文字的水平垂直居中
大小不固定，多行文字的垂直居中 ：① 单行文字 ： height:3em; line-height:3em; ② 多行文字 ：实现的关键是把文字当图片处理。用一个<span>标签将所有的文字封装起来，设置文字与图片相同的display属性值（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中即可。外部<div>标签 ：div{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}内部<span>标签：span{display:inline-block; font-size:0.1em; vertical-align:middle;} 。span内什么都不设置也行。内部标签的vertical-align:middle可以省略 。问题：会导致margin失效。
大小不固定，图片的水平垂直居中 ： ① display:table-cell和文字大小控制居中 ： 淘宝团队想出的图片垂直居中的方法。 <img>外部<div>标签：div {display:table-cell; width:1em; height:1em; font-size:144px; width:144px; height:144px; font-size:118px; border:1px solid #beceeb; text-align:center; vertical-align:middle;}img标签：img{vertical-align:middle;} img内什么都不设置也行。②display:inline-block和文字大小控制居中 ：关键是将<a>标签默认的inline属性值设置为inline-block 。<a>标签：a{width:1.2em;display:inline-block; font-size:128px; text-align:center; vertical-align:middle;}img标签：img{vertical-align:middle;} ③ 透明图片拉伸对齐实现垂直居中显示 ：对比淘宝团队的方法，发现优势很多，基本上淘宝的table-cell+font-size方法会带来的些问题都避免了。span{display:inline-block; height:100%; width:0; vertical-align:middle;}
css行高line-height的一些深入理解及应用
行高 两行文字间基线之间的距离
“行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。先说一个大家都熟知的现象，有一个空的div，<div></div>，如果没有设置至少大于1像素高度height值时，该div的高度就是个0。如果该div里面打入了一个空格或是文字，则此div就会有一个高度。那么您思考过没有，为什么div里面有文字后就会有高度呢？这是个看上去很简单的问题，是理解line-height非常重要的一个问题。可能有人会跟认为是：文字撑开的！文字占据空间，自然将div撑开。我一开始也是这样理解的，但是事实上，深入理解inline模型后，我发现，根本不是文字撑开了div的高度，而是line-height！
网友评论