什么是宽度自适应 Qian锋逆战班

**宽度自适应：**斜体样式
在网页布局中经常要定义元素的宽和高。有很多时候我们希望因素大小能够根据窗口或子元素自动调节，这是pc自适应
自适应的优点：
元素自适应在网页布局中非常重要它能使网页显示更灵活，可以适应在不同设备上，不同窗口和不同分辨率下显示。
相对窗口元素和父元素的自适应写法：
宽度：
当块状元素不写宽度的时候，默认的宽度就是100%； 是父元素的宽度的100%；也就是始终跟父元素是同宽的。
width：100%；
默认情况下：如果给块元素加了绝对定位或者固定定位，他的宽度就不在是100%显示了。也不会跟父元素同宽的，而是跟里面的内容同宽，如果元素里面没有内容，有没有定义宽高，这个时候，元素就不见了

**高度：** 
        当让元素的高度相对浏览器窗口显示半分比的值得时候，一定要给HTML和body设置高度100%；

**高度自适应：**

相对窗口自适应
html,body{height:100%;} （全屏显示的页面必须要给 html,body设置高度100%）
注意：
百分比设置宽高的时候，都是相对当前元素最近的父元素显得的百分比的值(百分比这个值显示大小的参照物就是自己最近的父元素)
2、相对元素或者内容自适应：
1非浮动元素的父元素高度自适应
实现方法：
1、不设置高度，或者高度设置成 ： height:auto；
2、通过最小高度实现高度自适应 ： min-height:300px;height:300px;
3、给需要高度自适应的元素添加这些属性：min-height:value; height:auto!important;height:value;
还有在兼容IE6的写法：
/_height:300px;/ /* “” 叫做下划线过滤器，加了下划线过滤器之后，只有IE6 这个浏览器识别当前的属性，其他浏览器就都不识别了。 /
height:auto !important;/ 具有最高优先级，有的的浏览器都会去识别这具有!important；过滤器的这个属性 ；!important; 对于IE6来说，是无效的，IE6不支持*/
height:300px;/* 专门让IE6识别的 */
过滤器："_" 叫做下划线过滤器，专门来单独过滤IE6 这个浏览器的。
第二种情况：
2，浮动元素的父元素高度自适应
说明：当父元素不设置高度的时候，第一级子元素浮动后，父元素高度塌陷。
怎么去解决？（只要解决高度他显得问题，父元素就能实现高度自适应了）
1、可以个固定高度去解决解决高度塌陷问题，
弊端：但是不能让元素高度自适应了 。

		       2、overflow：hidden;   解决高度塌陷并能实现高度自适应的方法一；（遵循BFC的显示原则）			弊端：只要里面的内容或者元素超出父元素以外，就会被隐藏
		       3、在浮动元素的下方添加一个空元素，并且给他设置一下属性：							空标记：<div class="clear_fix"></div>
			clear:both;height:0;overflow:hidden;
		                弊端：会添加很多空标记，增加结构负担，产生代码冗余；	
	                    
		      4、display:table;   给父元素添加display：table；让父元素转换元素类型跟表格的特性一样；
**弊端：**

会改变当前元素的元素类型；
弊端：单词太多，不好记；

万能清除法
:after{content:“";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;} 说明：推荐使用万能清除法；
伪对象选择器
语法：
选择符：：after{content：“内容”；}（内容和路经只能二选一）
选择符：：after{content：url（图片路径）；}必须要和content使用
注意：（不可设置宽高，可设置文字大小，文字颜色，背景颜色，文字加粗）
1）div::after 把伪对象添加为div的最后一个子元素（可对块级，行内元素）用的比较多
div ::after {
content: “我是伪对象qqqq”;
/* content: url(…/images/21.jpg); */
font-size: 20px;
color: red;
}
2）div::before 把伪对象添加为div的第一个子元素 （可对块级，行内元素）用的比较多
div::before {
content: “我是伪对象before”;
font-size: 20px;
color: green;
}
3）选择符::first-letter 改变第一个字符的样式 （此伪对象选择符只对块级元素）
h1::first-letter {
color: yellow;
font-size: 50px;
}
4）选择符::first-line 改变第一行的样式（此伪对象选择符只对块级元素）
h1::first-line {
background: red;
}
隐藏属性：
visibility:visible 显示/hidden 隐藏;
visibility:hidden;和display:none;的区别：
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域；
而 display:none属性会使这个对象彻底消失不显示，也不再占用位置。