2021.7.23 宽高自适应

1.自适应的概念

      网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应       元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。

---

2.宽度自适应的方式

1、宽度不写   一般给的是最大的盒子 2、宽度的单位不用px，用相对单位比如%；  一般都是里面的容器 3、用min-width、max-width设置。 用在响应式布局上

---

3.高度自适应的方式

1、高度不写，     存在问题：如果子元素浮动，父元素会高度塌陷。(高度塌陷) 2、高度的单位不用px，用相对单位比如%；     默认情况下，height用%是不生效的，需要给    body,html{height:100%;} 3、用min-height、max-height设置。     min-height对于IE6不兼容，需要调试。

hack3:万能清除浮动法  给父元素 父元素:after{content:".";clear:both;display:block;height:0;         overflow:hidden;visibility:hidden;} 父元素{zoom:1;} IE8以上和非IE浏览器才支持:after,zoom(IE专有属性)可解决ie6,ie7浮动问题

伪对象选择器的权重是1
个数	选择器	语法	说明
1	:after或者::after	div:after{content:”文字”} div:after{content:url();}	与content属性一起使用，定义在对象后的内容
2	:before或者::before	div:before{content:”文字”} div:before{content:url();}	与content属性一起使用，定义在对象前的内容
3	:first-letter或者::first-letter	div:first-letter	定义对象内第一个字符的样式，注：该伪元素只能用于块元素
4	:first-line或者::first-line	div:first-line	定义对象内第一行的样式，注：该伪元素只能用于块元素
5	::selection	div::election	选中之后的样式  只支持这background  color属性
前面的4个可以是双冒号也可以是单冒号，但是::selection必须是双冒号

visibility:hidden和display:none;的区别？ visibility:hidden/visible;隐藏/可见 visibility:hidden;和display:none;相同点都是隐藏显示的区域 visibility:hidden;和display:none;的区别： visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失。

元素具备最小高度的自适应 min-height属性：最小高度；(IE6浏览器不识别该属性) 兼容元素具备最小高度自适应的方法： hack1:min-height:value; _height:value; hack2:min-height:value; height:auto !important; height:value;(建议使用 不能换顺序)

---

4.过滤器

过滤器
个数	过滤器	语法	说明
1	下划线属性过滤器	选择符{_属性：属性值；}	由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则
2	!important关键字过滤器	选择符{属性：属值 !important;}	它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它，我们可以利用IE6的这个Bug作为过滤器来兼容ＩＥ６和其它标准浏览器。
3	\9	选择符{属性：属性值\9;}	IE浏览器组识别
4	\0	选择符{属性：属性值\0;}	只有IE8及以上浏览器起作用
5	+ 或者 *	选择符{+属性：属性值;}	ie7 IE7 以下(包括IE7) 识别
6	：root选择器	:root 选择符{属性：属性值;}	除了IE8及更早的浏览器识别   IE8以上认识