记一记读<<精通CSS>>的一些理解(一)

我在读书的过程慢慢理解到读书就是一个心境沉定的过程.

1:块的垂直外边距叠加:只有普通文档流才会发生外边距叠加,行内框(内联标签)/浮动框或者绝对定位框之间的外边距不会叠加.其实外边距叠加这个特性

有时候在布局时候是很有好处的.

2:关于相对定位(relative)和绝对定位(position  脱离文档流)的理解(图)

IE6下的绝对定位有一点小bug,只需要给相对定位的框设置宽度和高度即可解决问题(不用理IE6啦,忽略此问题)

3:固定定位相对于可视窗口定位(fixed)

4:浮动(float 脱离文档流):因为应用了浮动的元素会脱离文档流,有时候因为浮动的元素会影响布局,所以我们不得不地去在包含框中清掉

这些浮动元素产生的影响.

在这里列出一种目前比较流行和行之有效的方法,在需要的包含块框上添加类名.clearfix

而该类名的样式声明如下:

.clearfix{

  content:‘‘;

  display:block;

  clear:both;

  visibility:hidden;

  height:0;

}
时间: 2024-10-19 09:28:50

记一记读<<精通CSS>>的一些理解(一)的相关文章

近期读精通CSS高级Web标准解决方案(第2版)的小心情

首先,我想说,我真的为这本书着迷.近期读这本书,就像在和一位智者对话,又或者像是在和一个志同道合的朋友聊天,它耐心的把我在学习和实践的过程中所积攒的疑惑和思考的问题一 一解答.这本书不是一本CSS入门书,建议有CSS基础的同学阅读,相信你会和我一样,惊喜的发现这本书里蕴藏的宝藏.由于第二版是2010年出版的,那个时候CSS3还没有得到各大浏览器很好的支持,所以有些内容现在已经不适用了,但是,这本书更多的是教会我了解技术发展的历史,了解在那个技术受限的年代,作者是如何去思考和解决问题的.就像大漠老

读《精通CSS:高级Web标准解决方案》

因为最近在看<精通CSS:高级Web标准解决方案>,做了一些记录. 因为很多开发人员对于XHTML2的开发不满,于是出现了WHATWG和W3C的分裂,WHATWG决定开发自己的规范,也就是HTML5,而W3C的XHTML2标准已被放弃,HTML5成为了W3C的正式标准.XHTML和HTML的区别就是XHTML严格遵守XML编码规定,浏览器会依据文档的MIME类型来解析文档,如果不遵循规范会导致错误,而HTML却是很宽松的. Doctype类型和浏览器模式,DTD(文档定义类型)是一组机器可读的

《精通CSS》定位

定位部分包含了两个模型:视觉格式化模型和定位模型.理解这两个模型的细微差异是非常重要的,因为它们一起控制着如何在页面上布置每个元素. /**********视觉格式化模型***************/ p.h1.div等元素常常被称为块级元素,与此相反,strong和span等元素称为行内元素.块级元素显示为一块内容,即"块框",它们显示为一块内容.行内元素显示在一行上. display属性可以改变元素的显示类型,通过将display设置为block,可以让行内元素表现的像块级元素一

《精通CSS》框模型

目前正在阅读<精通CSS>的电子书,记下读书过程中的理解和不解,以便以后查阅. 第二章 要掌握的三个最重要的CSS概念是浮动.定位和框模型.     框模型是CSS的基石之一,它制定元素如何显示以及如何相互交互.页面上的每个元素被看做一个矩形框,这个框由元素的内容.填充.边框和空白边组成. 在CSS中,width和height指的是内容区域的宽度和高度.增加填充.边框和空白边不会影响内容区域的尺寸,但是会增加元素框的总尺寸.但是在IE 6和其之前的版本中,会将填充(padding)视为内容的一

&lt;转&gt;HTML+CSS总结/深入理解CSS盒子模型

原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverflow上求助.ifaou在帮助我解决我问题的同时,还推荐我阅读一篇有关CSS盒子模型的文章<The CSS Box Model>,阅读之后受益匪浅,才知道自己对盒子模型知识还是如此欠缺.恰逢学期末,项目验收后暂时告一段落,有空闲的时间.于是想把这篇文章翻译出来,一方面再给自己一点挑战和锻炼,另一方

《精通CSS》读书笔记(一)

最近新添16本书,目前开始看陈剑瓯翻译的<精通CSS——高级Web标准解决方案>(Andy Budd, CSS Mastery -- Advanced Web Standards Solutions). 以下是读书笔记. 首先,挺遗憾的是,除了封面上译者名字外,就完全看不到跟译者有关的东西,没有译者简介,没有译者序,没有后记……一点也没有(难道是我没找到?) 第1章 关于“有意义的标签”,这是css编程的前提.第4页上只是罗列了一些html标签,但是并没有详述他们的意义和用法.当然这是一本cs

精通CSS.DIV网页样式与布局系列学习

精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布局(五) ——设置表格与表单样式 精通CSS.DIV网页样式与布局(四) ——页面背景 精通CSS.DIV网页样式与布局(三)——中秋效果图 精通CSS.DIV网页样式与布局(二)—— 段落 精通CSS.DIV网页样式与布局(二) 精通CSS.DIV网页样式与布局(一) 神奇的验证码,我们一起来探究

CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位

其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: 1. 标准流   (最稳定) 2. 浮动流   (float 其次) 3. 定位流    ( 稳定性最后) 定位是完全脱离标准流的一种布局方式. 其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学

【精通css读书笔记】 第八章 布局

学习了css布局的基础后又来翻阅<精通css>这本经典书籍,对布局有了进一步的认识. 基于浮动的布局 两列的布局仍然是使用一个元素向左浮动,一个元素向右浮动,值得注意的是要加入display:inline 用来防止IE中的双外边距浮动产生的bug. 三列布局与昨天的使用了不同的方法,全部依靠浮动来实现,与两列布局一样先实现主内容与次内容的左右浮动,然后对主内容中的主div与次div在分别浮动. 不要忘记因为元素的浮动需要对父元素清理浮动的处理 overflow:hidden 但是三列布局的时候