优秀的程序员web前端培训分享HTMLCSS宽高自适应，宽高自适应，网页布局中经常定义元素的宽高。但是很多时候我们希望元素的大小能够根据窗口或者子元素自动调整，这就是pc适配。自适应优点：元素自适应在网页布局中非常重要，它可以使网页显示更加灵活，可以适应不同设备、不同窗口、不同分辨率的显示。width自适应元素宽度设置为100%。（块元素宽度默认为100%）或者不设置宽度（width）；(width为父元素的宽度)heightadaptive1)自适应元素高度：height:auto;或未设置；（子元素扩展父元素高度）2）元素高度自适应窗口高度设置方法：html,body{height:100%;}注意：如果子元素的高度设置为跟随父元素的高度，父元素必须有高度。最小高度的自适应min-height属性：最小高度；(IE6浏览器不识别该属性)hack1:min-height:value;_height:value;hack2：最小高度：值；高度：自动！重要；高度：值；浮动元素的父元素高度自适应（高度塌陷）。当子元素有浮动而父元素没有高度时，父元素会在高度上塌陷。高度塌陷的解决办法hack1：在父元素上添加声明overflow:hidden；(triggerABFC)hack2:在浮动元素下方添加一个空的div，并在元素中添加声明：div{clear:both;高度：0；overflow:hidden;}hack3:universalclearfloatingmethodselector:after{content:"";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}visibility:hidden/hidden可见性:hidden;并显示：无；但是对象在网页上所占的空间并没有改变，相当于留了一块空白区域，display:none属性会让对象完全消失，不再占据空间。伪对象选择器1)、::after：与content属性一起使用，定义对象之后的内容。语法：Selector::after{content:”text”;}Selector::after{content:url(imagepath);}如：div::after{content:url(logo.jpg);}div::after{content:"textcontent";}2)、::before：与content属性一起使用，定义对象之前的内容。div::before{content:"putcontentbeforeit";}3),::first-letter定义对象中第一个字符的样式。说明：*(该伪元素只能用于块级元素)4)、::first-line：定义对象中第一行的样式。*（这个伪元素只能用在块级元素上。）
