HTML/CSS笔记

关于清除浮动：

1、为什么需要清除浮动？

当我们对父模块(若对父模块没有设置宽度和高度的时候)的子模块进行浮动后，子模块就完全脱离了文档流，那么这时父模块的高度便无法撑开，当没有边框时，我们几乎看不见它，可以说是凭空消失了。一句话，当我们使用Float样式，假使您没有清除浮动，那么有浮动元素的父元素容器将元素将无法自动撑开。这时为了让父模块“不消失”，我们就要对其消除浮动。

2、清除浮动的方法

一、Clear:both清除浮动

这是一种比较陈旧的清除浮动方法。我们只需要插入一个块元素(需要消除浮动影响的元素后面，亲测)，用这个块元素来关闭浮动。

具体语法：div.clearer {clear: left/both; line-height: 0; height: 0;}

二、使用overflow

使用overflow方法来清除浮动相对来说比较简单，只需要在有浮动的元素上面加上以下的属性（style里）{overflow:auto; zoom: 1;}

overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值，如果使用这个值将无法达到清除浮动效果，其他两个值都可以。

三、clearfix方法

利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。

使用clearfx来清除浮动最主要掌握一点，需要在有浮动元素的父元素中加入一个叫clearfix的class名称，比如说我们这个例子，我们需要在div.A中加入一个clearfix的class名。接着在给这个clearfix加上样式。

  .clearfix:before,
   .clearfix:after {content:""; display:table;}
   .clearfix:after {clear:both;overflow:hidden; }
  .clearfix {zoom:1; /* IE < 8 */}

水平垂直居中

一、兼容性不错的主流用法是：

#div1{

width:400px;height:200px;

background:#ccc;

position: absolute; 

left:450px; top:200px;}

这个方法需要设置父元素的position:relatice;然后需要知道父元素（模块）的width和height。

二、CSS3的兴起，使得有了更好的解决方法，就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的。（这个也是需要父模块设置position：relative;）

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);}

三、margin:auto实现绝对定位元素的居中

.element {
    width: 600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;
}

代码两个关键点：

1. 上下左右均0位置定位；
2. margin: auto

文字透明度设置

#_css{

filter:alpha(opacity=50); 
-moz-opacity:0.5; 
-khtml-opacity: 0.5; 
opacity: 0.5; }

蒙版效果

rgba(125,125,0,0);

R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
A：Alpha透明度。取值0~1之间

用CSS做横线

#_css{

width:892px;height:2px;

margin:-3px auto;

padding:0px;

background-color:#938e8c;

overflow:hidden;}   //在IE浏览器中不加的话，会一直延伸