宽高自适应、清除浮动、伪元素、过滤器(filter)、BFC、圣杯布局和双飞翼布局

一、宽高自适应

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。

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

（1）宽度自适应

      块元素宽度默认为auto

(2) 高度自适应

元素{height:auto;}/高度不写

 

二、浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

解决高度塌陷的方法（清除浮动的方法）：

hack1：给父元素添加声明overflow:hidden;(缺点：会隐藏溢出的元素)

hack2:在浮动元素下方添加空块元素,并给该元素添加声明：clear:both;height:0;overflow:hidden;

（缺点：在结构里增加了空的标签，不利于代码可读性，且降低了浏览器的性能）

hack3:万能清除浮动法

选择符:after{content:" ";clear:both;display:block;height:0;visibility:hidden; }

父容器选择符{zoom:1;}/*为了兼容IE6,IE7*/

 

三、伪元素    ：:伪元素或叫伪对象

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

如：div:after{content:url(logo.jpg);}

      div:after{content:"文本内容";}

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

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

3）：first-letter:定义对象内第一个字符的样式。

4）：first-line:定义对象内第一行的样式。

说明：

*(:first-letter;:first-line该伪类只能用于块级元素。)

5）::selection{}

匹配元素中被用户选中或处于高亮状态的部分.

 

四、visibility:hidden/visible/inherit;隐藏/可见

visibility:hidden;和display:none;的区别：

visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，而 display:none属性会隐藏内容且空间消失。

 

 

 

三、元素具备最小高度最小宽度，最大高度，最大宽度的自适应

min-height属性：最小高度；

min-width:最小宽度

max-height:最大高度

max-width:最大宽度

注：IE6及以下版本不识别该组属性。

 

注：height属性在IE6里就类似min-height作用。

 

四、Filter:表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。

本质上讲，Filter是一种用来过滤不同浏览器的Hack类型。

-----、过滤器(filter)

1）下划线属性过滤器
    当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则。

语法：选择符{_属性：属性值；}

2）!important关键字过滤器
它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它(important)，我们可以利用IE6的这个Bug作为过滤器来兼容ＩＥ６和其它标准浏览器。

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

兼容元素具备最小高度自适应的方法：

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

hack2:min-height:value;  height:auto!important;   height:value;(建议使用)

 

4)扩展内容

3）*/+属性过滤器

    当在一个属性前面增加了*后，该属性只能被IE7及以下版本浏览器识别，其它浏览器忽略该属性的作用。

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

\9：IE9以下的        语法：选择符{属性：属性值\9;}

\0:IE8 及以上                语法：选择符{属性：属性值\0;}

 

五、元素高度自适应窗口高度

        设置方法：html,body{height:100%;}

        2)自适应元素高度：height:100%;

 

扩展：

六、<iframe> 标签   框架

语法：<iframe   src="规定在 iframe 中显示的文档的 URL(默认的显示页面)" width="" height=""   frameborder="1/0"  name="iframe名称"     scrolling="yes/no/auto">   </iframe>

frameborder="1/0"  1代表有框架边框 /0代表无框架边框

滚动条：scrolling="yes/no/auto" yes :有   no:无    auto：自动

<a href="" target="iframe的name属性值"></a>表示超链接的目标地址在框架中打开

 

七、（BFC）

block Formatting Context 块级格式化上下文

haslayout

IE7-浏览器的特有属性。hasLayout是一种只读属性，有两种状态：true或false。当其为true时，代表该元素有自己的布局，否则代表该元素的布局继承于父元素。

 

八、圣杯布局和双飞翼布局说明

• 上下高度固定，两侧宽度固定，中间宽高自适应；

• 中间部分在DOM结构上优先，以便先行渲染；

• 允许三列中的任意一列成为最高列；

   

九、calc() 函数用于动态计算长度值。

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

• 任何长度值都可以使用calc()函数进行计算；

• calc()函数支持 "+", "-", "*", "/" 运算；

• calc()函数使用标准的数学运算优先级规则；

   

 

十、width的属性值css3属性值

fill-available:表示撑满可用空间,出现fill-available关键字值的价值在于，可以让元素的100%自动填充特性不仅仅在block水平元素上，也可以应用在其他元素.

min-content:示采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度，

例如图片的最小宽度值就是图片呈现的宽度，对于文本元素，如果全部是中文，则最小宽度值就是一个中文的宽度值；如果包含英文，因为默认英文单词不换行，所以，最小宽度可能就是里面最长的英文单词的宽度

max-content:表示采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。如果出现文本，则相当于文本不换行。

fit-content：表示将元素宽度收缩为内容宽度，可以实现元素收缩效果的同时，保持原本的block水平状态，于是，就可以直接使用margin:auto实现元素向内自适应同时的居中效果了