张鑫旭博客-01

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

正确认识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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。