CSS布局--浮动与清除

浮动和清除

浮动和清除是页面布局的重要属性。浮动的意思是指将元素从常规的文档流中取出来。

当你浮动一个元素的时候，浮动的元素会被浏览器尽量的往上放，能放多高就放多高，一直到某个元素的边界为止。

浮动元素取出来之后，原来在紧跟其后的元素就会在空间允许的情况下向上提升到浮动元素平等的位置。

如果浮动元素后面有两个段落，如果只想让第一个段落与浮动元素并列，就用clear属性来清除”第二段“，然后第二段就会在浮动元素下面了。

在使用float属性进行多栏布局时，如果设定的宽度，而且水平空间也足以容纳它们，它们就会并列排在一行。

围住浮动元素的三种方法：

浮动元素脱离了文档流，其父元素也看不到它，因而无法包围它。

1、为父元素添加 overflow:hidden 属性

2 、 同时浮动父元素

3 、 添加非浮动的清除元素

.clear_both{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both

}

显示属性

块级元素：比如段落、标题、列表等，在浏览器中上下堆叠显示。

行内元素：比如a 、span、和img，在浏览器中左右并排显示，只有前一行没有空间之后才会到下一行显示。

display属性值为none时，该元素及所有的子元素都不会在页面中显示，它们原来占有的空间也都会被”回收“，就好像相关的标记根本不存在。

visibility属性的值为hidden时，元素会被隐藏，但是它占据的页面空间仍然存在。

背景的简写 

body{ background:url(images/watermark.png) center #fff no-repeat contain fixed; } 如果少写了哪个属性值，就会使用相应属性的默认值。

厂商前缀

各厂商为了兼容CSS3推荐标准，产生了VSP（Vendor Specific Prefixes) 的概念。

厂商就可以尝试实现W3C涵盖新的CSS属性的工作草案。在迅速实现的同时，还可以声明它们是过渡的，部分实现的，或者实验型的。

以 transform为例

W3C推荐的语法为： transform:skewX(-45deg);

-moz-transform:skewX(-45deg); // Firefox

-webkit-transform:skewX(-45deg); //Chrome 及 Safari

-ms-transform:skewX(-45deg);     //微软

-o-transform:skewX(-45deg); // Oprera

背景渐变

.gradient2
{
background:linear-gradient(#64dddd,#fff 50%,#64d1dd
}
.gradient1
{
background:linear-gradient(#64dddd 20%,#fff 50%,#64d1dd 80%)
}

对于不能全部兼容的属性，要加上 VSP前缀。

版权声明：本文为博主原创文章，未经博主允许不得转载。