宽高自适应、过滤器 伪类选择器

宽、高自适应 过滤器 伪类选择器

1宽、高自适应

元素的大小能够根据窗口或子元素自动调整，这就是自适应。

自适应优点：它能够使同一个网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。

1.1宽度自适应

div是块级元素，宽度即使不设置也会默认为父级的100%。

<div>

<ul>

<li>  </li>

<ul>

</div>

div{width:1000px;}     ul{width:50%;}    li{width:50%}  则li的宽度为1000*50%*50%=250px。

1.2高度自适应

1.2.1具有最小高度的自适应

1.若父元素不设置高度或设置为auto，那么它的高度会由子元素撑开。

2.假如子元素不存在，那么需要给父元素加一个最小高度，父元素就会按最小高度进行显示  min-height:40px;

3.min-height属性在ie6及以下不能被显示，且ie6中height=min-height，和其他浏览器冲突，会产生兼容性的问题。需要使用下划线过滤器，这个过滤器使用后，该属性只有ie6可以识别，如_height:40px，其他浏览器不能识别。

4.设置最小高度也可使用：{

height:auto!important;

height:40px;

}

!important代表最高权重，浏览器会让auto属性值优先；对于ie6浏览器!important不能被识别，所以下面的height:40px;可以覆盖上面的height:auto!important;  。

1.2.2元素高度自适应窗口高度

元素高度自适应窗口高度，首先窗口要有高度。

html,body{height:100%;}

#header{height:80%;}  #mainer{height:15%;}  #footer{height:5%;}   

当父元素有height时，用百分比来编码，不论高度怎么变化，浏览器窗口怎么变化，都会按照80:15:5来布局。

1.2.3高度塌陷：浮动元素、父元素的高度自适应

父元素靠子元素撑开高度，子元素float后脱离标准流，父元素height为0，则会出现高度塌陷。

Hack1：通过给父元素加overflow:hidden; 生成一个独立的渲染区域。

   优点：简单快捷。

   缺点：可能导致一部分需要内容无法正常显示（超出父元素范围的内容）。

 

Hack2：在浮动元素下方（父元素中），添加一个兄弟盒子div

div{height:0;   clear:both;(抵抗左右的浮动)  overflow:hidden;(生成独立渲染区域)}

缺点：多了一些空标签，浪费空间。

 

Hack3：给父元素添加一个伪元素

 

 

.clearfix::after{

content=””必须写

display=block;转化为块级元素

height:0;

clear:both;

overflow:hidden;

visibility:hidden;

zoom:1;兼容ie

 }

因为这个格式是固定的，可在base.css中设置专门类名class=”clearfix”，给需要清除浮动的父元素都添加类名class=”clearfix”。

2过滤器filter

2.1 _下划线属性过滤器

当在一个属性前加_后，只有ie6及更低版本可以识别。

语法：  选择器{_属性:属性值;}

此方法是区别ie6及其他浏览器的方法。

2.2 !important关键字过滤器

代表最高权重，会被优先显示，ie6不能识别。

语法： 选择符{属性:属性值;!important;}

2.3 *属性过滤器

属性前加*，只能被ie7及以下识别

语法：   选择符{*属性:属性值;}

2.4 \9选择器

选择符{属性:属性值\9; } ie9及以上识别

2.5 \0选择器

选择符{属性:属性值\0; } ie10及以上识别

3伪元素选择器

伪元素为行内元素。

div::before在div的子元素的最前面添加一个伪元素，div::before{content:”内容”;}。

div::after在div子元素的最后面添加一个伪元素。

权重：div::after 0002   div0001+::after0001=0002。

p::first-letter{color:red;} p元素中第一个字符变红，之所以::first-letter为伪元素，相当于为p元素的第一个字添加<span></span>只能用于块级元素。

p::first-line 第一行 只能用块级元素。