刚刚在看张鑫旭大神的个人网站,看到一篇关于“css瓶颈”的深度好文,地址为:http://www.zhangxinxu.com/wordpress/?p=2523

关于张大神在文章里面提到的四个问题:

  1. dl, dt, dd三个标签浏览器默认margin值多少?是否有标签默认文字粗体?
  2. line-height:150%和line-height:1.5的区别是?
  3. float为何会让外部容器高度塌陷?这是bug?
  4. vertical-align的表现为何在IE7, IE8, IE9下表现不尽相同?其中的渲染机制是?

我个人理解模糊,谷歌的一些相关的答案,感谢原作,原文地址为:http://www.cnblogs.com/QingFlye/p/3871646.html  ;摘抄如下:

 
1.dl, dt, dd三个标签浏览器默认margin值多少?是否有标签默认文字粗体?

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标签的边框不包含序号。

}

2.line-height:150%和line-height:1.5的区别是?

有单位时,子元素继承了父元素计算得出的行距;无单位时继承了系数,子元素会分别计算各自行距(推荐使用)。例如:

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/

http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/

关于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 问题的更多相关文章

  1. HTML 列表 <ol><ul><li><dl><dt><dd>

    <ol>标签-有序列表 定义和用法: <ol>标签定义有序列表. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,ol 元素的 "compact&q ...

  2. dl,dt,dd标签的使用

    dl就是定义一个列表 dt说明白了就是这个列表的标题dd就是内容,能缩进和UL,OL性质差不多 <dl> <dt>标题标题</dt> <dd>内容内容& ...

  3. css , dl , dt , dd 的使用. calc

    dl .dt, dd 虽然很少使用, 但是 有时使用会有 更好的效果: 一: 展示图片: ------------------------- 代码: <!DOCTYPE html> < ...

  4. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  5. HTML中的ul, ol,li , dl,dt, dd标签

    ul: unordered lists ol: ordered lists li: Lists ol 有序列表. <ol><li>……</li><li> ...

  6. html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用

    <!-- a:  a{ /*清除a标签的下划线*/ text-decoration: none; }  (1)超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地 ...

  7. 前端学习笔记系列一:15vscode汉化、快速复制行、网页背景图有效设置、 dl~dt~dd标签使用

    ctrl+shift+p,调出configure display language,选择en或zh,若没有则选择安装使用其它语言,则直接呼出扩展程序搜索界面,选择,然后安装,重启即可. shift+a ...

  8. html dl dt dd标签元素语法结构与使用

    dl dt dd认识及dl dt dd使用方法 <dl> 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一. ...

  9. Div+css中ul ol li dl dt dd使用

    ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...

随机推荐

  1. Eclipse 连接MySql数据库总结

    Eclipse 连接MySql数据库总结 一.在MySql中创建数据库,并创建表,向表中插入数据 1.创建数据库 create database select_test 2.创建表 create ta ...

  2. (转)行为树(Behavior Tree)实践(1)– 基本概念

    通过一个例子来介绍一下行为树的基本概念,会比较容易理解,看下图: 这是我们为一个士兵定义的一颗行为树(可以先不管这些绿圈和红圈是干吗的),首先,可以看到这是一个树形结构的图,有根节点,有分支,而且子节 ...

  3. display: -webkit-box; 做个小小试验

    最近做个微信项目发现css3在微信内部浏览器中和其他浏览有些区别 做个小小笔记 .job { display: -webkit-box; display: flexbox; -webkit-box-p ...

  4. JavaScript中对象的3种定义方式

    对象是有特性(属性)和功能(方法)的集合体. 定义对象有以下3种方式: 1.使用系统的new Object()方式定义对象 2.使用对象字面量定义对象( 即使用{}语法糖结构定义对象 ) 3.使用自定 ...

  5. 【BZOJ3944】Sum

    题面 Description Input 一共T+1行 第1行为数据组数T(T<=10) 第2~T+1行每行一个非负整数N,代表一组询问 Output 一共T行,每行两个用空格分隔的数ans1, ...

  6. 关于IOC

    1. [调侃]IOC前世今生 http://www.cnblogs.com/showjan/p/3950989.html#!comments 2. 使用ConfigurationManager类 读写 ...

  7. 开发函数计算的正确姿势 —— 使用 ROS 进行资源编排

    前言 首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传.函数计算 ...

  8. SpringBoot_02_SpringBoot的配置文件

    1.SpringBoot配置文件 SpringBoot是基于约定的,所以很多配置都有默认值,但如果想使用自己的配置替换默认配置的话,就可以使用application.properties或者appli ...

  9. 渗透测试入门DVWA 环境搭建

    DVWA是一款渗透测试的演练系统,在圈子里是很出名的.如果你需要入门,并且找不到合适的靶机,那我就推荐你用DVWA. 我们通常将演练系统称为靶机,下面请跟着我一起搭建DVWA测试环境.如果你有一定的基 ...

  10. php构造方法(函数)基础

    什么是构造函数呢?在回答这个问题之前,我们来看一个需求:我们在创建人类的对象时,是先把一个对象创建好后,再给他的年龄和姓名属性赋值,如果现在我要求,在创建人类的对象时,就指定这个对象的年龄和姓名,该怎 ...