dl, dt, dd /line-height /loat /vertical-align 问题
刚刚在看张鑫旭大神的个人网站,看到一篇关于“css瓶颈”的深度好文,地址为:http://www.zhangxinxu.com/wordpress/?p=2523
关于张大神在文章里面提到的四个问题:
- dl, dt, dd三个标签浏览器默认margin值多少?是否有标签默认文字粗体?
- line-height:150%和line-height:1.5的区别是?
- float为何会让外部容器高度塌陷?这是bug?
- vertical-align的表现为何在IE7, IE8, IE9下表现不尽相同?其中的渲染机制是?
我个人理解模糊,谷歌的一些相关的答案,感谢原作,原文地址为:http://www.cnblogs.com/QingFlye/p/3871646.html ;摘抄如下:
dl标签:有默认margin(top,bottom且相同)值,没有默认padding值。
在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中:margin:12px 0px;
在IE6.0,7.0中:margin:19px 0px;
dd标签有默认margin-left:40px;(在所有上述浏览器中)。
{
拓展:需要注意的是ul、ol具有默认padding。
ol,ul标签:有默认margin-(top,bottom且相同)值,有默认padding-left值
在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中:margin:12px 0px;
在IE6.0,7.0中:margin:19px 0px;
默认padding-left值:在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中都是padding-left:40px;
在IE6.0,7.0中没有默认padding值,因为ol,ul标签的边框不包含序号。
}
有单位时,子元素继承了父元素计算得出的行距;无单位时继承了系数,子元素会分别计算各自行距(推荐使用)。例如:
1) 当line-height:xxx %时:
body{ font-size:14px; line-height:150%; }
h1{ font-size:26px; }
实际是:
body{ line-height:21px; /* 14px*150%=21px */ }
h1{ line-height:21px; } /* 继承父元素计算出来的line-height ,21px */
2 ) 当line-height:x.x 时:
body{ font-size:14px; line-height:1.5; }
h1{ font-size:26px; }
实际是:
body{ line-height:21px; /* 14px*1.5=21px */ }
h1{ line-height:39px; /* 26px*1.5=39px */ }
3.float为何会让外部容器高度塌陷?这是bug?
可以看看一丝的文章:http://www.iyunlu.com/view/css-xhtml/55.html
4.vertical-align的表现为何在IE7, IE8, IE9下表现不尽相同?其中的渲染机制是?
可以看看这篇文章:
张鑫旭:vertical-align:http://www.zhangxinxu.com/wordpress/2010/06/css-vertical-align%E7%9A%84%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%EF%BC%88%E4%BA%8C%EF%BC%89%E4%B9%8Btext-top%E7%AF%87/
去除inline-block元素间距的办法:http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/
关于css.reset文章:http://feixinzx.blog.163.com/blog/static/212009058201307351253/
关于HTML默认样式表:http://www.cssued.com/archives/51
dl, dt, dd /line-height /loat /vertical-align 问题的更多相关文章
- HTML 列表 <ol><ul><li><dl><dt><dd>
<ol>标签-有序列表 定义和用法: <ol>标签定义有序列表. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,ol 元素的 "compact&q ...
- dl,dt,dd标签的使用
dl就是定义一个列表 dt说明白了就是这个列表的标题dd就是内容,能缩进和UL,OL性质差不多 <dl> <dt>标题标题</dt> <dd>内容内容& ...
- css , dl , dt , dd 的使用. calc
dl .dt, dd 虽然很少使用, 但是 有时使用会有 更好的效果: 一: 展示图片: ------------------------- 代码: <!DOCTYPE html> < ...
- DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
- HTML中的ul, ol,li , dl,dt, dd标签
ul: unordered lists ol: ordered lists li: Lists ol 有序列表. <ol><li>……</li><li> ...
- html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用
<!-- a: a{ /*清除a标签的下划线*/ text-decoration: none; } (1)超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地 ...
- 前端学习笔记系列一:15vscode汉化、快速复制行、网页背景图有效设置、 dl~dt~dd标签使用
ctrl+shift+p,调出configure display language,选择en或zh,若没有则选择安装使用其它语言,则直接呼出扩展程序搜索界面,选择,然后安装,重启即可. shift+a ...
- html dl dt dd标签元素语法结构与使用
dl dt dd认识及dl dt dd使用方法 <dl> 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一. ...
- Div+css中ul ol li dl dt dd使用
ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...
随机推荐
- USACO training course Number Triangles 数塔 /// DP oj10122
题目大意: ...就是数塔 7 3 8 8 1 0 2 7 4 4 4 5 2 6 5 7+3+8+7+5=30 ...
- 编写main方法
- Lua 协程和线程区别
协程就是协程,不是线程. CPU执行单位是线程,不是什么协程. 协程,是同步执行,不是并行,只是切了一个上下文了,为你保存原来的上下文而已. 切到第二个协程时,原来的协程处于挂起状态. 这个特指lua ...
- vue/cli 3.0脚手架搭建
在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli 安装成功: 安装完成 ...
- CF596D Wilbur and Trees
题意:有一些高度为h的树在数轴上.每次选择剩下的树中最左边或是最右边的树推倒(各50%概率),往左倒有p的概率,往右倒1-p. 一棵树倒了,如果挨到的另一棵树与该数的距离严格小于h,那么它也会往同方向 ...
- leetcode-买卖股票最佳时机含冷冻期
题目描述: 方法一: class Solution: def maxProfit(self, prices: List[int]) -> int: n = len(prices) dp_i_0 ...
- C++构造与析构函数中调用虚函数的问题
前些天想把以前写的内存池算法重写一遍,跨平台是第一目标,当时突发奇想,因为不愿意做成一大堆#if..#end,所以想利用C++的多态性,但是怎么让内存池完好退出却没想到自认为完美的方案.但是一个很偶然 ...
- Thrift(PHP)入门无错篇章(一)
一.安装篇 博主注:截至2017-10-10,官网上thrift最新版0.10.0一直无法成功编译.所以,请选择0.9.3版本,避免走各种弯路: wget http://apache.fayea.co ...
- 嵌入式开发—C语言面试题
嵌入式开发—C语言面试题 源地址:http://blog.csdn.net/xdx2ct1314/article/details/7358929 1. 用预处理指令#define 声明一个常数,用 ...
- pycharm优化
一.版本选择 建议安装5.0版本,因为好注册,这个你懂得. 下载地址: https://confluence.jetbrains.com/display/PYH/Previous+PyCharm+Re ...