时间：2023-09-09 12:00:01 | 来源：网站运营
时间：2023-09-09 12:00:01 来源：网站运营
前端页面高度和宽度自适应怎么弄？：在前端页面开发中，我们会希望页面可以根据不同用户的显示比例自动缩放页面，确保用户体验，这就是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;和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:定义对象内第一行的样式。
*(该伪元素只能用于块级元素。)
关键词：适应,宽度,高度
