CSS细节
写起这篇文章,是因为阅读张鑫旭到的一篇文章《CSS的学习瓶颈》,里面提到了要重视CSS的细节和实现机制。确实:有必要掌握一些关于CSS方面的细节,而不是遇到任何页面,都添加css.reset.下面取材截图于张鑫旭的博客:
下面回归正题:
一.关于这4个问题的答案:
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
CSS细节的更多相关文章
- 爱上朴实的CSS细节
英文原文:Learning to Love the Boring Bits of CSS 未来的CSS太让人兴奋了:一方面,是全新的页面布局方式:另一方面,是酷炫的滤镜.颜色等视觉效果.这些CSS, ...
- css 细节收集
细节1……………………………………………………………………………… 一.当文字与图片在一行,需要将文字与图片底对齐,需要这样写: <li>记住密码<img src="&qu ...
- 相关css 细节处理 neat.css
人性化的细节处理 例如: textarea 默认只能垂直拖动,防止宽度改变破坏布局. textarea { resize: vertical; } 汉字字号小于 12px 不易阅读,为 <sma ...
- webapp开发之需要知道的css细节
引言 首先说明一下,本文分享对象是涉世未深的移动开发者,至于有经验的开发者可以自行绕道. 说来惭愧,做了几年pc端的前端开发,很少接触到webapp的移动端开发.如今有机会参与webapp的开发,发现 ...
- css细节:尖角处理
在各种网站里面,我们会经常看到类似于这样的尖角:(示例:新浪微博) 它实现的方式有多种,哪种才是最简单的?哪种才是最优秀的?首先我声明一下,我还不清楚这个东西具体叫什么名字(哪位知道还望告知),暂且叫 ...
- css细节复习笔记——浮动
CSS除了能够改变字体.背景和所有其他属性,还能够完成基本布局任务. div+css通过浮动和定位.盒子模型等技术应用,是最常用的布局方式. 定位的基本思想很简单,它允许定义元素框相对于其正常位置应该 ...
- css细节复习笔记——基本视觉格式化
css包含如此开放.如此强大的一个模型,对于这样一个模型,可以有无数种方法结合应用各种属性,可以得到的效果数不胜数. 基本框 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素中心有一个 ...
- css细节复习笔记——结构与层叠
每个合法的文档都会生成一个结构树,有了结构树元素的祖先.属性兄弟元素等等创建选择器来选择元素,这是CSS继承的核心.继承是从一个元素向后代元素传递属性值所采用的机制.面向一个元素使用哪些值时,用户代理 ...
- #ing# CSS细节注意点
目录: 常用简写 权重(优先级) Hack 常用简写 权重(优先级) Hack etc
随机推荐
- Python-Redis的String操作
Ubuntu安装Redis sch01ar@ubuntu:~$ sudo apt install redis-server sch01ar@ubuntu:~$ redis-server sch01ar ...
- Java 决策制定
有两种类型的决策在Java中的语句,它们分别是: if 语句 switch 语句 if 语句: if语句由一个布尔表达式后跟一个或多个语句. 语法: if语句的语法是: if(Boolean_expr ...
- sort,uniq,cut,wc命令详解
sortsort 命令对 File 参数指定的文件中的行排序,并将结果写到标准输出.如果 File 参数指定多个文件,那么 sort 命令将这些文件连接起来,并当作一个文件进行排序. sort语法 s ...
- nodejs PK php全方位比较PHP的Node.js的优缺点
全方位比较PHP的Node.js的优缺点 http://www.techug.com/php-vs-node-js
- R语言中的字符处理
R语言中的字符处理 (2011-07-10 22:29:48) 转载▼ 标签: r语言 字符处理 字符串 连接 分割 分类: R R的字符串处理能力还是很强大的,具体有base包的几个函数和strin ...
- unreal3控制台窗口属性调整
在windows平台上,unreal3的console窗口类是FOutputDeviceConsoleWindows 启动时,它可以从XXXGame.ini中读取诸如窗口大小之类的属性,具体的代码在 ...
- 大富翁开发日记:一、使用巨型lua协程
一个大胆的尝试:使用巨型lua协程来表示整个“一局”流程. lua协程是一个很另类的功能,有并发的影子但又不是真的并发,所以真正拿它来做大功能框架的范例不多,通常用于一些小型trick式设计.但这次我 ...
- 【转】Lucene不同版本中Field的Keyword、UnIndex,导致lucene 建立索引总是报错 急!!
lucene 建立索引 总是报错 急!! http://zhidao.baidu.com/link?url=iaVs9JH4DfN6iwaWImt7VMJENWCWGGaWFGPjqhUw_jz7Fs ...
- hdu1088
#include <stdio.h> #include <string.h> int main() { char s[10000]; int len; int cnt = 0; ...
- sqlserver2012——游标
游标:一种数据访问机制,允许用户访问单独的数据行而不是对整个行集进行操作.用户可以通过单独处理每一行逐条收集信息并对数据逐行进行操作,这样可以将降低系统开销. 游标主要有以下两部分: 游标结果集:由定 ...