宽高自适应

宽高自适应

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

1、宽度自适应

 元素宽度设置为100%。（块元素宽度默认为100%）
 或者不设置宽度（width）;（宽度是父元素的宽度）

2、高度自适应

1)自适应元素高度：height:auto;或者不设置;（是子元素撑开父元素的高度）

2)元素高度自适应窗口高度
   	设置方法：html,body{height:100%;}
	注：如果设置子元素的高度跟随父元素的高度变化而变化，那么父元素必须有高度。

3、最小高度的自适应

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

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

hack2:min-height:value;  height:auto!important;height:value; 

4、浮动元素父元素高度自适应（高度塌陷）

当子元素有浮动并且父元素没有高度的情况下父元素会出现高度塌陷

高度塌陷的解决方法

hack1：给父元素添加声明overflow:hidden;(触发一个BFC)

hack2:在浮动元素下方添加空div,并给该元素添加
        声明：div{clear:both; height:0; overflow:hidden;}
        
hack3:万能清除浮动法
选择符:after{content:“";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

清除浮动的方法有哪些，其优缺点：

问题:父级元素不给高度,子元素浮动,会造成父元素高度塌陷

1、父级设置高度height
Height：value； 
缺点：高度被固定，新增内容无法撑开父元素

2、父级添加Overflow：hidden（auto）
Overflow：hidden（auto）
优点：浏览器支持好，简单；
缺点：溢出内容被隐藏

3、最后一个子元素后添加新标签
<div class=”clear”><div>
	.clear{clear:both} 
	优点：所有浏览器都支持，并且容器溢出不会被裁剪 
	缺点：需要添加新标签，代码冗余，不符合语义化
	
4、为父级元素设置float
缺点：父级发生浮动，将会产生更多页面布局的问题

5、万能清除法
.clear{
Content: “”；
Display：block；
Height：0；
Clear：both；
Visibility：hidden；
}
.clear{
Zoom:1;	
}
 优点：不会造成代码冗余，剩余代码性能优化，推荐使用。
 
6、拓展方法：定位、display：table、在后面添加br并设置clear等发发

5、visibility:hidden/隐藏

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

6、伪对象选择符

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:定义对象内第一行的样式。
	*(该伪元素只能用于块级元素。)

扩展内容：width的属性值

width的属性值
	fill-available、fit-content、max-content、min-content

7、 pointer-events：

阻止用户的点击动作产生任何效果
阻止缺省鼠标指针的显示
阻止CSS里的 hover 和 active 状态的变化触发事件
阻止JavaScript点击动作触发的事件
提交页面，提交按钮点击后，添加这个样式属性（style="pointer-events"），来防止重复提交。
一些层的绝对定位，覆盖按钮，穿透可以点击它。


模糊：blur
	filter : blur(value)

文字渐变：
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;

小结

宽度自适应:
	默认宽度100%的元素
	width:; 单位为%
	
高度自适应:
	不写height:;(让内容撑起来)
	height:; 单位为% (前提条件 html,body{width:100%;height:100%;})
最小宽高:
	min-width:最小宽度;
	min-height:最小高度;
	max-width:最大宽度;
	max-height:最大高度;

浮动元素的高度塌陷:
	问题: 父元素未设置高度,子元素浮动将造成父元素高度塌陷
解决办法:
1: 给父元素添加高度
	缺点: 不灵活
	
2: 给父元素添加 overflow:hidden;
	缺点: 定位出去的元素将看不见
	
3: 清除浮动 clear:left/right/both;
	给浮动的元素最后添加一个空元素(块级元素)
	给空元素添加样式
		height:0;
		clear:left/right/both;
	缺点: 代码冗余
	
4: 万能清除法
	
visibility:显示隐藏;
	hidden	隐藏
	visible	显示
	
visibility 和 display 的区别
	1: 都可以显示隐藏元素
	2: visibility:hidden;	占据文档流
		display:none;	脱离文档流
		
伪对象:
	:after{content:"";}	在....之后,伪装一个元素,可以添加样式
	:before{content:"";}在....之前,伪装一个元素,可以添加样式
	:first-letter{}针对第一个字设置样式,只应用块级元素
	:first-line{}针对第一行字设置样式,只应用于块级元素