HTML和CSS如何实现宽高自适应

小编给大家分享一下HTML和CSS如何实现宽高自适应，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

宽度自适应

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

以上是“HTML和CSS如何实现宽高自适应”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！