CSS总结.docx

《CSS总结.docx》由会员分享，可在线阅读，更多相关《CSS总结.docx（14页珍藏版）》请在冰豆网上搜索。

CSS总结

float（浮动）和position（定位）属性的区别

　　float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，不能随浏览器大小改变页面，会自动出现滚动条。

所以一般情况下还是float布局！

在局部可能会用到position进行定位！

Position（定位）多种属性

1.相对定位|relative

    相对于元素在文档流中的初始位置。

    相对定位的元素占据文档流，属于普通流定位模型的一部分，对一个元素进行相对定位，这个元素相对于它的起点（即在文档中的位置）进行移动top/left/right/bottom。

使用相对定位时，无论是否进行移动，元素仍占据原来空间，移动元素会导致覆盖其他框。

2.绝对定位|absolute

    相对于最近的已定位的祖先元素。

    绝对定位使元素与文档流无关，不占据文档空间。

普通流中的元素会表现的好像绝对定位的元素并不存在一样。

绝对定位的元素的位置相对于最近的已定位的祖先元素。

若元素没有已定位的祖先元素，那么元素的位置相对于最初的包含块，依据浏览器不同，最初包含块可能为canvas或者html元素。

    何谓已定位的祖先元素（包含块）？

    TakealookatwhattheCSS2.1specificationhastosayaboutcontainingblocks:

    Iftheelementhas‘position:

absolute’,thecontainingblockisestablishedbythenearestancestorwitha‘position’of‘absolute’,‘relative’or‘fixed’...Ifthereisnosuchancestor,thecontainingblockistheinitialcontainingblock.

      祖先元素（包含块）是指具有position:

absolute|relative|fixed的祖先元素！

3.固顶定位|fixed

    属于绝对定位的一个子类，包含块是viewport。

#######################################################

static  :

默认值。

无特殊定位，对象遵循HTML定位规则。

元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）。

absolute  :

将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。

如果不存在这样的父对象，则依据body对象。

而其层叠通过z-index属性定义

fixed  :

未支持。

对象定位遵从绝对（absolute）方式。

但是要遵守一些规范。

相对于浏览器窗口进行定位。

元素的位置通过"left","top","right"以及"bottom"属性进行规定。

可通过z-index进行层次分级

relative  :

对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，可通过z-index进行层次分级。

#######################################################

1、relative。

定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。

如图1：

黄色背景的层定位为relative，红色边框区域为其在正常流中的位置。

在通过top、left对其定位后，从灰色背景层的位置可以看出其正常位置依然存在。

2、absolute。

定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不在存在。

如图2：

可以看到，在将黄色背景层定位为absolute后，灰色背景层自动补上。

3、relative与absolute的主要区别：

首先，是上面已经提到过的在正常流中的位置存在与否。

其次，relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式。

如图3：

图中，红色背景层为relative定位，其直接父元素绿色背景层为默认的static定位。

红色背景层的位置为相对绿色背景层top、left个20元素。

而如果红色背景层定位为absolute，则情形如图4：

可以看到，红色背景层依然定义top:

20px；left:

20px；但其相对的元素变为定位方式为absolute或relative的黄色背景层。

因此，对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。

如果其父层中都未定义absolute或relative，则其将相对body进行定位，如图5：

除top、left、right、bottom定位外，margin属性值的定义也符合上述规则。

Float（浮动）定位属性

页面布局有两种方式

1）浮动Float

2）定位Position

今天就来一个小小的练习，让大家理解Float的含义

【例子】

要求：

1）两个div块元素，一个红色，一个蓝色；

2）红色方块宽度和高度均为200像素，蓝色方块宽度为300像素，高度为200像素；

3）红色方块蓝的上外边距（margin-top）和左外边距（margin-left）均为20像素；

大家应该注意到了，虽然红色方块的宽度并不是100%，但是蓝色并未和红色处于同一行，这就是块状元素比较“霸道”的一点，（即使块状元素的宽度不是100%，它也不允许其他元素和他同在一行）为了消除这种“霸权”，让红色和蓝色方块都处在一行。

此时就需要拿出我们的利器Float！

只需要在红色方块的CSS里面加上“float:

left;”，这时候在IE中可以看到蓝色方块的确跑到红色方块的后面了，并且处于一行了。

但是在FireFox中却变成了如下效果：

这时候就需要注意了，FF中如果前面的区域浮动了，后面的那个区域很有可能就会和前面的区域发生重叠并错位。

（其中ie8也有一些区别，如果加入了“<%@pagecontentType="text/html;charset=utf-8"language="java"import="java.sql.*"errorPage=""%>

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">“dtd解释不同，则也是跟FF一样出现重叠现象，去除的话则跟其他版本相同！

）

怎么才能解决这个问题，解决这个浏览器兼容的问题，很容易，只需要在蓝色方块的CSS代码中也加入“Float:

left;”，问题就解决了，加上试试，看看在FF中蓝色方块是不是和红色方块处于一行了~

到这里，大家应该明白Float的作用了吧，就是为了消除块状元素“霸权主义”的一把利器！

在布局页面的时候有时候是需要消除块状元素霸权主义才能布局好哟。

在IE6中红色方块距离浏览器的左边距并不是CSS代码中定义的20像素，而是40像素，如下图：

其实这是IE6的一个BUG，（IE6双倍边距BUG），只要满足下面3个条件才会出现这个BUG:

1）要为块状元素；

2）要左侧浮动；

3）要有左外边距（margin-left）；

解决这个BUG很容易，只需要在相应的块状元素的CSS树形中加入“display:

inline;”，代码如下：

现在再看看，是不是IE6和FF显示一样了呢~

清除浮动（Clear）属性

我们使用“Float:

left”，我们将红色方块的CSS代码中加入了“Float:

left;”后，红色方块终于允许蓝色方块和它处于同一行。

我们换一种方法表达上面的意思，因为红色方块的“左侧浮动”，才导致蓝色方块上移至红色方块的尾后；在上个例子中，为了达到浏览器兼容性，我们分别在红色蓝色方块CSS代码中分别加了“Float:

left;”，这样IE和FF中显示效果一样，如果此时我们还想放一个宽度400像素，高度100的绿色方块，并让其处于第二行，效果如下图：

可是这时候不管怎么放，在IE中的效果始终是

导致深蓝色排到蓝色的后面这种情况就是因为蓝色方块CSS代码中含有"Float:

left;"，但是为了浏览器兼容性，又不能去掉，只要在CSS代码中加入下面这段代码：

clear:

both;

目的就是为了清除蓝色方块的浮动对下面绿色方块的影响！

是影响哟~是清除影响，而不是清楚蓝色方块的浮动，或者说清除蓝色方块的浮动对下面区域块产生的作用！

盒模型：

五种盒模型特点:

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% == 父元素的宽度，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-layout决定了是固定大小（fixed）还是auto.  

表格有外边距，没有内边距。

单元格有内边距，没有外边距。

不能把overflow应用于表格，应把overflow:

hidden赋给单元格.

border-collapse决定了邻近的边框是否合并为一个。

分离（separate）,合并（collapse）。

table-layout决定了是固定大小（fixed）还是auto.

5.绝对定位盒模型特点

1.它是相对于（relative）最近定位祖先元素来定位的。

2.当width有个值，left有个值，right:

auto的时候，从左侧偏离。

3.margin为正的时候靠近容器中心，为负远离中心。

4.width:

 100%会与祖先的宽度相等。

详解display:

inline|block|inline-block的区别

display:

inline就是将元素显示为块级元素.

block元素的特点是：

总是在新行上开始；

高度，行高以及顶和底边距都可控制；

宽度缺省是它的容器的100%，除非设定一个宽度