PC端 宽高自适应问题

宽高自适应

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

宽度自适应

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

高度自适应

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

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

最小高度的自适应

非浮动元素地父元素高度自适应

1、不写高度；（弊端：当内容很少的时候，元素高度也会很小，影响美观）
2、height：auto；
3、min-height属性：最小高度；(IE6浏览器不识别该属性)
4、通过下划线过滤器
	  min-height:value;
	  _height:value;
5、通过关键字过滤器 
	  min-height:value; 
	  height:auto!important;
	  height:value;
4、5为兼容IE6写法

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

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

高度塌陷的解决方法

第一种情况：内容撑开父元素

1：给出现塌陷的元素，添加 overflow:hidden;
            原理：因为overflow:hidden;触发了一个布局逻辑： BFC
                bfc规定：计算BFC高度的时候，里面浮动元素也参与计算。
            弊端：会隐藏掉定位到元素外围的内容。


2：在浮动元素的下面添加兄弟元素div,并且添加样式{clear:both;}
            原理：clear:both; 忽略上方元素浮动所预留出来的空间
            弊端：造成代码的冗余
        
3：万能清除法：（伪对象选择器）
            出现高度塌陷的元素:after{
                content:" ";
                clear:both;
                display:block;   //通过afte添加的伪元素 类似内联元素
                height:0;
                overflow:hidden;
                visibility:hidden；//隐藏元素，但是会保留所占有的空间
 }
 
 4：
 ie6的兼容写法 使用万能清除法 并对盒子添加zoom：1；
zoom=1 即一比一放大 ；  等于多少 即等比放大或缩小多少

 第二种情况：子元素高度跟随父元素
 
让一个元素铺满浏览器窗口：
	html,body{
		height:100%;
	}

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

扩展内容：width的属性值

fit-content,  fill-available(自动填满剩余空间),
max-content,  min-content

ie浏览器不兼容

pointer-events

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

模糊：blur

filter：bulr（value） 加单位px
 
 ie不兼容

文字渐变

background: linear-gradient(to right,red, blue);//线性渐变（从左到右 从红到蓝）
-webkit-background-clip: text; //裁切，沿着文本裁切
color: transparent;   //文字颜色为透明