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
随机推荐
- 【转】 Pro Android学习笔记(三九):Fragment(4):基础小例子-续
目录(?)[-] Step 3实现简介显示类DetailFragment 创建实例 编写所需的生命周期代码 Step 4实现showDetailint index如何管理fragment fragme ...
- java注解的基本知识
1: 注解:Annotation是一种应用于类.方法.参数.变量.构造器及包生命中的特殊修饰符,是一种由JSR-175标准选择用来描述代码的元数据. Java中如下的4种注解,专门负责新注解的创建: ...
- Ruby 局部变量做block参数
Ruby中使用yield语句调用block时可以带有参数,参数值见传送个相关联的block.如果传给block的参数是已经存在的局部变量,那么这些变量即为block的参数,他们的值可能会因block的 ...
- java处理中日文字符串的乱码问题
——杂言:前段时间在处理音频预览问题,详见关于audiojs的研究.期间,将远端的音频下载并缓存在本地过程中,涉及到java.io.*的几个操作,发生一些乱码问题. 我以前的处理是将本地的编码转换为U ...
- mongodb教程国外
https://docs.mongodb.com/manual/reference/operator/aggregation/lookup/
- SpringBoot04 SpringBoot 和 MyBatis 整合
1 所需的jar包 mysql驱动包:mysql-connector-java 数据库链接池:druid mybatis对应jar包:mybatis-spring-boot-starter 分页查询对 ...
- 面试题: mysql 数据库去重 已看1 不好使
mysql去重面试总结 前言:题目大概是这样的. 建表: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 CREATE TABLE `test2` ( `id` ...
- Learning Python 012 函数式编程 1 高阶函数
Python 函数式编程 1 高阶函数 高阶函数 Q:什么是高阶函数? A:一个函数接收另一个函数作为参数,这种函数就称之为高阶函数. 简单举个例子: def add(x, y, f): return ...
- sublime text 侧边栏样式修改
安装PackageResourceViewer 插件.快捷键 CTRL+SHIFT+P 打开 命令面板,输入 Package Control:Install Package (直接输入PCIP,四个单 ...
- Remove all the html Tag in String
在用Umbraco开发项目的过程中,由于在Umbraco Back office 中有用到 rich text editor, 而它返回的值是HtmlString类型,也就是说是包含Html Tag的 ...