CSS总结.docx

1、CSS总结float（浮动）和position（定位）属性的区别float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，不能随浏览器大小改变页面，会自动出现滚动条。所以一般情况下还是float布局！在局部可能会用到position进行定位！Position（定位）多种属性1. 相对定位|relative 相对于元素在文档流中的初始位置。 相对定位的元素占据文档流，属于普通流定位模型的一部分，对一个元素进行相对定位，这个元素相对于它的起点(即在文档中的位置)进行移动top/left/right/bottom。使用相对定位时，无论是否进行移动，元素仍占据原来空间

2、，移动元素会导致覆盖其他框。2. 绝对定位|absolute 相对于最近的已定位的祖先元素。 绝对定位使元素与文档流无关，不占据文档空间。普通流中的元素会表现的好像绝对定位的元素并不存在一样。绝对定位的元素的位置相对于最近的已定位的祖先元素。若元素没有已定位的祖先元素，那么元素的位置相对于最初的包含块，依据浏览器不同，最初包含块可能为canvas或者html元素。 何谓 已定位的祖先元素（包含块） ？ Take a look at what the CSS 2.1 specification has to say about containing blocks: If the element

3、has position: absolute, the containing block is established by the nearest ancestor with a position of absolute, relative or fixed . If there is no such ancestor, the containing block is the initial containing block. 祖先元素（包含块）是指具有position:absolute|relative|fixed的祖先元素！3. 固顶定位|fixed 属于绝对定位的一个子类，包含块是vi

4、ewport。#static : 默认值。无特殊定位，对象遵循HTML定位规则 。元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。absolute : 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义 fixed : 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。相对于浏览器窗口进行定位。元素的位置通过 left, top, rig

5、ht 以及 bottom 属性进行规定。可通过z-index进行层次分级relative : 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置，可通过z-index进行层次分级。#1、relative。定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。如图1：黄色背景的层定位为relative，红色边框区域为其在正常流中的位置。在通过top、left对其定位后，从灰色背景层的位置可以看出其正常位置依然存在。2、absolute。定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流

6、中的位置不在存在。如图2：可以看到，在将黄色背景层定位为absolute后，灰色背景层自动补上。3、relative与absolute的主要区别：首先，是上面已经提到过的在正常流中的位置存在与否。其次，relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式。如图3：图中，红色背景层为relative定位，其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。而如果红色背景层定位为absolute，则情形如图4：可以看到，红色背景层依然定义top:20px；left:20px；但其相对的元素变为定位方式为absolute

7、或relative的黄色背景层。因此，对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位，如图5：除top、left、right、bottom定位外，margin属性值的定义也符合上述规则。Float（浮动）定位属性页面布局有两种方式1）浮动Float 2）定位Position今天就来一个小小的练习，让大家理解Float的含义【例子】要求： 1）两个div块元素，一个红色，一个蓝色； 2）红色方块宽度和高度均为200像素，蓝色方块宽度为3

8、00像素，高度为200像素； 3）红色方块蓝的上外边距(margin-top)和左外边距(margin-left)均为20像素；大家应该注意到了，虽然红色方块的宽度并不是100%，但是蓝色并未和红色处于同一行，这就是块状元素比较“霸道”的一点，（即使块状元素的宽度不是100%，它也不允许其他元素和他同在一行）为了消除这种“霸权”，让红色和蓝色方块都处在一行。此时就需要拿出我们的利器Float！只需要在红色方块的CSS里面加上“float:left;”，这时候在IE中可以看到蓝色方块的确跑到红色方块的后面了，并且处于一行了。但是在FireFox中却变成了如下效果：这时候就需要注意了，FF中如果前

9、面的区域浮动了，后面的那个区域很有可能就会和前面的区域发生重叠并错位。（其中ie8也有一些区别，如果加入了“ “dtd解释不同，则也是跟FF一样出现重叠现象，去除的话则跟其他版本相同 ！）怎么才能解决这个问题，解决这个浏览器兼容的问题，很容易，只需要在蓝色方块的CSS代码中也加入“Float:left;”，问题就解决了，加上试试，看看在FF中蓝色方块是不是和红色方块处于一行了到这里，大家应该明白Float的作用了吧，就是为了消除块状元素“霸权主义”的一把利器！在布局页面的时候有时候是需要消除块状元素霸权主义才能布局好哟。在IE6中红色方块距离浏览器的左边距并不是CSS代码中定义的20像素，而是

10、40像素，如下图： 其实这是IE6的一个BUG，(IE6双倍边距BUG)，只要满足下面3个条件才会出现这个BUG: 1）要为块状元素； 2）要左侧浮动； 3）要有左外边距(margin-left)；解决这个BUG很容易，只需要在相应的块状元素的CSS树形中加入“display:inline;”，代码如下：现在再看看，是不是IE6和FF显示一样了呢清除浮动（Clear）属性我们使用“Float:left”，我们将红色方块的CSS代码中加入了“Float:left;”后，红色方块终于允许蓝色方块和它处于同一行。我们换一种方法表达上面的意思，因为红色方块的“左侧浮动”，才导致蓝色方块上移至红色方块的

11、尾后；在上个例子中，为了达到浏览器兼容性，我们分别在红色蓝色方块CSS代码中分别加了“Float:left;”，这样IE和FF中显示效果一样，如果此时我们还想放一个宽度400像素，高度100的绿色方块，并让其处于第二行，效果如下图： 可是这时候不管怎么放，在IE中的效果始终是导致深蓝色排到蓝色的后面这种情况就是因为蓝色方块CSS代码中含有Float:left;，但是为了浏览器兼容性，又不能去掉，只要在CSS代码中加入下面这段代码：clear:both;目的就是为了清除蓝色方块的浮动对下面绿色方块的影响！是影响哟是清除影响，而不是清楚蓝色方块的浮动，或者说清除蓝色方块的浮动对下面区域块产生的作用

12、！ 盒模型：五种盒模型特点: 1.内联盒模型特点 Html代码 1. 按从左至右排列的。 2. 当超过它们最近的祖先元素时，便换到下一行。 3. width、height、overflow、margin-top、margin-bottom对内联元素完全不起作用。 4. 内联元素用line-height设置行的高度。2内联块状模型特点inline-block：内联显示，但是元素的内容以块状显示，行内其他内联元素还会显示在同一行内。3.块状盒模型特点 1. 按从上至下排列的。 2. width:auto、height:auto是默认值，使它与父元素相一致。 3. width:100%=父元素的宽度

13、，width:120%会超过父元素的宽度. 4. *margin-left:auto会令块状元素排列在父元素的右侧。 5. *margin-right:auto会令块状元素排列在父元素的左侧。 6. *margin-left和margin-right都auto排列在父元素的中间.4.表格盒模型特点 1. 表格有外边距，没有内边距。 2. 单元格有内边距，没有外边距。 3. 不能把overflow应用于表格，应把overflow:hidden赋给单元格. 4. border-collapse决定了邻近的边框是否合并为一个。分离(separate),合并(collapse)。 5. table-l

14、ayout决定了是固定大小(fixed)还是auto.表格有外边距，没有内边距。单元格有内边距，没有外边距。不能把overflow应用于表格，应把overflow: hidden赋给单元格.border-collapse决定了邻近的边框是否合并为一个。分离(separate), 合并(collapse)。table-layout决定了是固定大小(fixed)还是auto.5.绝对定位盒模型特点 1. 它是相对于(relative)最近定位祖先元素来定位的。 2. 当width有个值，left有个值，right:auto的时候，从左侧偏离。 3. margin为正的时候靠近容器中心，为负远离中心

15、。 4. width:100%会与祖先的宽度相等。详解display:inline | block |inline-block的区别display:inline就是将元素显示为块级元素. block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度, , , , 和 是块元素的例子。display:inline就是将元素显示为行内元素.inline元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。, , , , , 和是inline元素的例子。inline和block可以控制一

16、个元素的行宽高等特性，需要切换的情况如下：让一个inline元素从新行开始；让块元素和其他元素保持在一行上；控制inline元素的宽度（对导航条特别有用）；控制inline元素的高度；无须设定宽度即可为一个块元素设定与文字同宽的背景色。display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。inline-block的元素特点：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的

17、属性)并不是所有浏览器都支持此属性，目前支持的浏览器有：Opera、Safari在IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素

18、呈递为内联对象。IE下块元素如何实现display:inline-block的效果？有两种方法： 1、先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失）。代码如下（.为省略的其他属性内容）：div display:inline-block;. div display:inline;2、直接让块元素设置为内联对象呈递

19、（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。代码如下：div display:inline; zoom:1;.包裹与拉伸1. 拉伸：指如何把元素宽、高拉伸至其容器的尺寸，可以通过width：auto，width：100%;height:auto,height:100%实现A width：auto，height：auto浏览器从外往里计算被拉伸元素的宽、高；B 若是被包裹的，则从里往外计算；2. 包裹：减少元素的宽和高从而使其包裹住它的内容 Width：auto把宽度设为最宽的一行相同； Height：auto把高度降为内容的高度；不能水平包裹静

20、态块状元素。3. 设定尺寸，可用于静态内联元素之外的所有元素Height，width表示内盒的大小，然后是padding，border，margin然后是外盒，外盒受它们的影响，但不影响内盒的大小。表格是例外，height和width包括border和padding在内；浮动元素设定了尺寸，会改变排列的顺序；静态块状元素被设定尺寸后，会改变排列的顺序； Height、 Width对除了内联元素都失去了作用；Width：auto水平包裹着：内联、内联块状、浮动、表格、绝对定位（left、right都为auto时）水平拉伸：块状和绝对定位（left、right都有一个值）Height：auto竖直包裹：内联、内联块状、块状、浮动、表格、绝对定位（top、bottom为auto时）竖直拉伸：绝对定位（bottom、top都有一个值）Width：100%，height：100%会把元素宽度和高度设为其父元素宽和高，但不像auto，width 100%时浏览器不会自动调整宽以保持元素被拉伸，元素margin，padding，border扩展其大小，甚至超越父元素。Width：100% 拉伸：:内联块状、浮动元素、表格；Height：100%拉伸：内联块状、浮动元素、表格、块状元素；