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
最新文章
- C#与C++的发展历程第二 - C#4.0再接再厉
- Linux下介绍一款不错的HTML编辑器
- IE8兼容H5语义标签
- RPC(远程过程调用)的应用
- 名词释义(ActiveMQ 和 Webservice)
- Delphi xe 下快捷使用 FastMM 的内存泄露检测功能
- acdream1197 Points In Cuboid
- angular 数据加载动画 longding
- MySQL TIMESTAMP(时间戳)详解
- Python - Headless Selenium WebDriver Tests using PyVirtualDisplay
- asp.net core 中灵活的配置方式
- Python3爬虫登录模拟
- [LeetCode] Poor Pigs 可怜的猪
- Zookeeper原理、安装、基本使用和API
- 使用react封装评论组件
- csc命令
- 记Git报错-Everything up-to-date
- rails框架配置
- (转)platform_driver_register,什么时候调用PROBE函数 注册后如何找到驱动匹配的设备
- andorid ListView和GirdView 与ScrollView 冲突
热门文章
- Lua 协程和线程区别
- Vue项目在Docker的自动化部署
- 进程监控驱动 PsSetCreateProcessNotifyRoutine
- array_map、array_walk、array_filter三个函数的区别
- IDEA使用Maven+Tomcat插件实现热部署
- Java驼峰和下划线互相转化
- Java-MyBatis-MyBatis3-XML映射文件:XML映射文件
- System.Web.Mvc.ValueProviderResult.cs
- FormData兼容IE10 360及DWR的异步上传原理
- linux操作mysql命令快速手记 — 让手指跟上思考的速度(二)