张鑫旭博客-01

对html与body的一些研究与理解

正确认识html与body

1.背景色 ：一般情况下，我们css控制的最高节点就是body ， 一旦设置了节点的background背景色之后，的背景色将失效。

2.关于滚动条 ：打开一个空白页面，观察浏览器右侧，会发现IE浏览器会有一段滚动条的槽道，而Firefox浏览器下没有。 设置 body{overflow-y: scroll;}  Firefox下是出现了滚动槽了，但是IE下出现了两个滚动条 。应为 html{overflow-y: scroll;}。

3.关于height:100%：要想让Firefox浏览器也支持的height:100%是简单的，就是设置标签height:100%，一旦设置了height:100%则无论哪个浏览器下都支持height:100%了，而内部的容器也可以支持height:100%了。前段时间看到百度的一道面试题，说什么透明层无论滚动与否都满屏显示，其实就是对和标签做一番手脚，两者高度100%显示，同时溢出隐藏（overflow:hidden），然后用一个

高度100%显示，溢出滚动。而这个透明层就使用绝对定位且与这个

平级，高宽100%显示，就可以使得无论怎么滚动这个透明覆盖层都是满屏显示的。这其实也就解决IE6下浮动层固定定位的经典方法。

多行文字的垂直居中

两张图片与文字一起垂直居中

图片的垂直居中

select中文字垂直居中问题

select文字在默认和边框高度增加时 是默认居中的。你要是不想居中的话可以用padding值调整。但是右侧的三角不会改变。select在高度减小时。字体是不会垂直居中的。无论你用什么他都不会垂直居中。网上的方法，我基本都试过。我的解决办法是改变字体的大小。字体变小了。select的高度也会随之变小。或者你在适当的改变一下他的高度。

复选框单选框与文字对齐问题的研究与解决

复选框单选框对齐问题

复选框单选框与文字对齐问题的研究与解决 « 张鑫旭-鑫空间-鑫生活

大小不固定的图片、多行文字的水平垂直居中

大小不固定，多行文字的垂直居中 ：① 单行文字 ：  height:3em; line-height:3em;   ② 多行文字 ：实现的关键是把文字当图片处理。用一个标签将所有的文字封装起来，设置文字与图片相同的display属性值（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中即可。外部

标签 ：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{display:inline-block; font-size:0.1em; vertical-align:middle;} 。span内什么都不设置也行。内部标签的vertical-align:middle可以省略 。问题：会导致margin失效。

大小不固定，图片的水平垂直居中 ： ① display:table-cell和文字大小控制居中 ： 淘宝团队想出的图片垂直居中的方法。 外部

标签：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和文字大小控制居中 ：关键是将标签默认的inline属性值设置为inline-block 。标签：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，

，如果没有设置至少大于1像素高度height值时，该div的高度就是个0。如果该div里面打入了一个空格或是文字，则此div就会有一个高度。那么您思考过没有，为什么div里面有文字后就会有高度呢？这是个看上去很简单的问题，是理解line-height非常重要的一个问题。可能有人会跟认为是：文字撑开的！文字占据空间，自然将div撑开。我一开始也是这样理解的，但是事实上，深入理解inline模型后，我发现，根本不是文字撑开了div的高度，而是line-height！