CSS宽高自适应设置

以你之姓@ 2023-10-06 15:00 26阅读 0赞

### **宽高自适应** ###

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

#### **宽度自适应** ####

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

#### **高度自适应** ####

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

#### **最小高度的自适应** ####

> `min-height`属性：最小高度；(IE6浏览器不识别该属性)  
>   
> hack1:min-height:value;\_height:value;  
>   
> hack2:min-height:value; height:auto!important;height:value;

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

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

#### **高度塌陷的解决方法** ####

> 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;
    }

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

#### **全屏页面** ####

![19d9b66451dc489e96ab530f50a371d0.png][]

[19d9b66451dc489e96ab530f50a371d0.png]: https://img-blog.csdnimg.cn/19d9b66451dc489e96ab530f50a371d0.png