如何使用CSS让img跟父元素的宽或者高自适应

Posted 2023-04-13

参考技术A 背景图的话css3的背景缩放：background-size，不兼容低版本ie。
最好的办法就是js取得父级的宽高，然后把根据这个宽高给img或背景图定义相同的宽高。

宽高自适应，高度塌陷，伪对象选择符

宽高自适应

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

宽度自适应

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

高度自适应

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

最小高度的自适应

min-height属性能满足：
		1）当内容增加的时候，内容能把容器撑开。
        2）当内容极少或者没有内容的时候，让容器保持一个最小高度。
(IE6浏览器不识别该属性，但是IE6默认会把height解析成最小高度)
最小高度的兼容设置方法：
        1: min-height:300px;_height:300px;
        2: min-height:300px;height:auto!important;height:300px;
            a:高版本浏览器解析顺序：
                min-height能识别，也能识别！important 所有height:auto;权重最高，height:auto 就能把height:300px覆盖。
            b:IE6解析流程：
                min-height不能识别，也不能识别！important , 后写的height:300px;能把height:auto覆盖，

高度塌陷

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

高度塌陷的解决方法

1)给父元素添加声明overflow:hidden;
	原理：overflow：hidden；会触发一个BFC（布局逻辑，BFC规定：计算BFC高度时候，浮动元素也参与计算）
	缺点：会隐藏掉定位在当前元素外围的内容
2)在浮动元素下方添加空div,并给该元素添加样式
        div{clear:both; height:0; overflow:hidden;}
    原理：添加的空div添加了clear：both;忽略上方同级添加浮动的元素留出的空间。在父元素最底下显示，撑开父元素高度。
    弊端：形成代码的冗余（出现高度塌陷，添加一个div）    
3）万能清除浮动法
    选择符:after{
                content:“";
                clear:both;
                display:block;
                height:0;
                overflow:hidden;
                visibility:hidden;
				}

visibility:hidden

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

伪对象选择符

1）::after :  在某个元素的后面用css的形式添加内容（图片、文本）。
    语法：选择符:：after{content:”文字”;}
         选择符:：after{content:url(图片路径)；}
    如：div::after{content:url(logo.jpg);}
       div::after{content:"文本内容";} 

2）::before:    在某个元素的前面用css的形式添加内容（图片、文本）。
	 div::before{content:"在其前放内容";}

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