最近在读《CSS彻底研究》，做个读书笔记
一直以来都希望以严格的标准来要求自己写出标准的网页，为此也去研读过W3school的教材，学习过了XML、XSLT、XHTML、HTML5、CSS，但是总感觉对CSS的了解不够深入，只是知道怎么用，但是对某些项目的具体定义依然感觉很模糊，还是需要更多的深入了解，了解它的内核，让自己成为一个浏览器，如果我是个浏览器，我应该如何解释这样一段的CSS呢？只有自己解释出来的东西和实际情况一致，我相信这个才是一种真正的理解了。于是为了这个，还是找了不少的CSS方面的教材，这本《CSS彻底研究》就是其中一本了。
书中有很多可以说让我茅塞顿开的地方，于是还是摘录一下了：
书中有很多可以说让我茅塞顿开的地方，于是还是摘录一下了：
- CSS中允许使用@import "other.css";这样的语句来导入式引用其他的CSS，但是这样引用的CSS将会在页面加载完成之后再次加载可能会导致页面出现“闪烁”的情况。
- 善于使用嵌套选择器可以减少无用Class的出现。
- CSS定义层叠的情况下优先级顺序：一个元素定义了两个类别样式，此二个样式互相冲突时，以写在前面的那个为主。比如：<div class="a b"></div>，发生冲突时，最后显示的结果应该是a的样式，无论定义CSS的时候把a和b何者先定义。其他的情况还是ID>Class>类别，定义两次的时候后定义的更优先。
- 宽度Width和高度height的定义是内容的宽度和高度，也就是Content的宽度和高度，但是盒模型实际的高度等于内容+内边距+边框+外边距，也就是Content+Padding+Border+Margin。
- 颜色简写的含义：#369=#336699
- 对于可以上下左右顺序定义的属性值的解释（比如Padding: 0 0 1px 1px），如果只定义一个，那么就是四周，如果定义两个，第一个是上下，第二个是左右，如果定义三个，那么第一个是上，第二个是左右，第三个是下。
- 旧版本的IE Border下的背景无法显示出来，但是所占的位置是存在的。
- 背景色或者背景图显示的范围是Content+Padding+Border
- Margin值存在垂直塌陷情况，也就是垂直相邻的两个盒模型之间的的实际Margin值从二者之间较大的Margin值（上面的margin-bottom和下面的margin-top之间较大者）。
- 盒子互相嵌套的时候，如果子的高度高出了父的高度，IE会自动扩展父的高度值保持子元素的margin-bottom和父元素的padding-bottom，FF则会纵容子元素超越父元素的范围。
- Clear属性是用来清除浮动元素对Block元素的影响的，所以它需要放在Block元素中。
- Div属性的范围是由它内部标准流的内容所决定的，所以如果此其中全是Float元素的时候它就会缩成一团了。
- Postion:relative的含义是在原有位置基础上通过top、left等属性再移动多少位置。可以很轻易用它来实现“抖动”的效果。注意，如果一个元素使用了relative定位，其它元素会“以为”它还在原地，不会改变相对位置。
- Postion:absolute的概念是脱离文档流定位，它的定位依据是父元素中第一个非static定位的元素，是relative也可以，哪怕是父元素top、left属性都没设置还在原地。这方法可以方便的给它定位。
- IE6中使用绝对定位如果使用left来定位，会和正确的元素位置的左侧相差了父元素的Padding值大小，解决办法是给父元素（定位用的那个）增加一个height:1%;
- em和ex真正定义：1em代表了其父元素中字母m的标准宽度，1ex则代表了字母x的标准高度，当父元素文字大小变化的时候，它就会跟着变了。
- 行高line-heigh是可以不带单位的，比如line-height:1.5代表的是1.5倍行距，也就是行高为文字大小的1.5倍。
- 倾斜分为意大利式倾斜和真正的歪斜字体得到的倾斜，分别对应着italic和oblique，这个在Windows下分不出来的，因为Win下只有意大利体。
- 垂直居中的最简单办法就是设置行高了，其他的还有比如设置把Div变成表格cell之类的偏方。
- PNG图像必须要选择Alpha透明度的时候才会得到一些半透明的效果，选择索引色透明就和GIF一样只有透明和完全不透明两种可能性了。
- 记得要把a:link和a:visited的定义放在前面，因为如果放到后面的话，它会覆盖掉a:hover的定义。
- IE6中就算是把a元素设置为block，它也没办法相应整个块的hover效果，解决方法是设置高度heigh:1em。
- 去掉最上面和最下面的元素多余的高度最简单的办法是用first-child选择器，IE6不支持。
评论
发表评论