标签：增加 问题： html 方法 自动 元素 标记 解答 自适应
条条大路通罗马，有的繁华似锦，有的绿树成荫。亦或者高楼林立又或者一马平川。道路千千万万，只有一条是最适合自己的，也只有心中认可的那一条是最近的。 一个成熟的网页，我自认为应该美观的，同是也是简单的。在高度这一块应该可以随着内容的多少变换其长短，让看客不用过多的心思也能浏览全局，找到自己想要的内容，我认为高度自适应能很好的解决这一个问题。
网页布局中经常要定义元素的宽和高，所以布局应该是灵活的，因其更随元素的大小或子元素的内容自动调整窗口，也就是pc自适应。pc自适应网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。其显示有以下几种方法，供大家学习讨论。
一、 相对窗口和父元素的自适应写法：
宽度：
当块状元素不写宽度的时候，默认的宽度就是100%； 是父元素的宽度的100%；也就是始终跟父元素是同宽的。
width：100%；
默认情况下：如果给块元素加了绝对定位或者固定定位，他的宽度就不在是100%显示了。也不会跟父元素同宽的，而是跟里面的内容同宽，如果元素里面没有内容，有没有定义宽高，这个时候，元素就不见了
高度：
当让元素的高度相对浏览器窗口显示半分比的值得时候，一定要给HTML和body设置高度自适应：
高度100%；
1、相对窗口自适应 html,body{height:100%;}（全屏显示的页面必须要给 html,body设置高度100%） 注：百分比设置宽高的时候，都是相对当前元素最近的父元素显得的百分比的值(百分比这个值显示大小的参照物就是自己最近的父元素)
2、相对元素或者内容自适应：
如何实现元素高度自适应？先思考这两个问题：
a、如果想实现元素高度自适应，高度能不能设置成固定的值？？
b、如果高度不能固定，那该怎么设置呢？？
第一种情况：
1）非浮动元素的父元素高度自适应
2）实现方法：
1、不设置高度，或者高度设置成 ： height:auto；
2、通过最小高度实现高度自适应 ： min-height:300px;_height:300px;
3、给需要高度自适应的元素添加这些属性：
min-height:value; height:auto !important;height:value;
注：带有!important；关键字过滤器的属性，要写到相同属性之前；
兼容IE6的写法：
/*_height:300px;*/ /* “_” 叫做下划线过滤器，加了下划线过滤器之后，只有IE6 这个浏览器识别当前的属性，其他浏览器就都不识别了。 */
height:auto !important;/* 具有最高优先级，有的的浏览器都会去识别这具有!important；过滤器的这个属性 ；!important; 对于IE6来说，是无效的，IE6不支持*/
过滤器："_" 叫做下划线过滤器，专门来单独过滤IE6 这个浏览器的。_height:300p;x
“*”、“+” 过滤IE7 及以下浏览器的；*height:300px;
"\9" 过滤所有的IE浏览器的；height：300px \9;
“ \0 ” 过滤IE8及以上浏览器； height：300px \0;
!important； 关键字过滤器，具有最高优先级；ie6不支持；
第二种情况：
2）浮动元素的父元素高度自适应
说明：当父元素不设置高度的时候，第一级子元素浮动后，父元素高度塌陷；
怎么去解决？（只要解决高度他显得问题，父元素就能实现高度自适应了）
1、可以个固定高度去解决解决高度塌陷问题
弊端：但是不能让元素高度自适应了 。
2、overflow：hidden; 解决高度塌陷并能实现高度自适应的方法一；（遵循BFC的显示原则）弊端：只要里面的内容或者元素超出父元素以外，就会被隐藏；
3、在浮动元素的下方添加一个空元素，并且给他设置一下属性
空标记：<div class="clear_fix"></div>
clear:both;height:0;overflow:hidden;
弊端：会添加很多空标记，增加结构负担，产生代码冗余；
4、display:table; 给父元素添加display：table；让父元素转换元素类型跟表格的特性一样；
弊端：会改变当前元素的元素类型；
5、万能清除法：
:after{content:“";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;} 说明：推荐使用万能清除法；
弊端：单词太多，不好记；
以上就是我根据自己的理解做出的一些解释，以及一些疑惑问题的一些解答。
感谢与大家的分享，本人才疏学浅，内容有错及不足之处，还望提出改正，望读者海涵。
标签：增加 问题： html 方法 自动 元素 标记 解答 自适应
原文地址：https://www.cnblogs.com/tyr235689/p/12398226.html
