自适应 伪对象选择符

 

 宽度自适应

 1、块元素未设置宽度时通栏特点可让元素始终通栏所占区域
 2、元素设置百分比单位也可实现自适应
 3、如果标签脱离了且未设置宽度文档流则会根据子元素总宽度进行呈现 
 4、如标签未设置宽度时使用绝对定位或固定定位时设置x轴左右两边定位信息则浏览器会根据所提供信息显示宽度 

代码

效果实现

高度自适应

 1、如外层盒子想进行窗口百分比设置则html和body需要有高度，如无高度时需设置100%  
 2、如果元素未设置高度时则默认会根据子元素高度来呈现
 3、如元素为设置高度时定位属性绝对定位或固定定位同时设置top及bottom浏览器即可显示所呈现的高度 

代码

效果实现 

 

最小高度的自适应

min-height属性：最小高度；(IE6浏览器不识别该属性)

hack1:min-height:value;_height:value;

hack2:min-height:value;  height:auto!important;height:value; 
max-height属性：最大高度
max-width属性：最大宽度
min-width属性：最小宽度

visibility:hidden/隐藏

visibility:hidden;和display:none;的区别：
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失不显示，也不再占用位置。

 

伪对象选择符

1）、::after :  与content属性一起使用，定义在对象后的内容。

语法：选择符:：after{content:”文字”;}
     选择符:：after{content:url(图片路径)；}
    
如：div::after{content:url(logo.jpg);}
        div::after{content:"文本内容";} 

 

2）、::before:     与content属性一起使用,定义在对象前 的内容。

div::before{content:"在其前放内容";}

3）、::first-letter 定义对象内第一个字符的样式。
    说明：
     
    *(该伪元素只能用于块级元素)
 

4）、::first-line:定义对象内第一行的样式。
    *(该伪元素只能用于块级元素。)
 

把伪元素转成块元素还是假的