宽高自适应：（灵活）
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是pc自适应。
自适应的优点：
元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。
一、 相对窗口和父元素的自适应写法：
宽度：width：100%；
当块状元素不写宽度的时候，默认的宽度就是100%； 是父元素的宽度的100%；也就是始终跟父元素是同宽的。
默认情况下：如果给块元素加了绝对定位或者固定定位，他的宽度就不在是100%显示了。也不会跟父元素同宽的，而是跟里面的内容同宽，如果元素里面没有内容，有没有定义宽高，这个时候，元素就不见了.
高度： html,body{height:100%;}
当让元素的高度相对浏览器窗口显示半分比的值得时候，一定要给HTML和body设置高度100%；
注：百分比设置宽高的时候，都是相对当前元素最近的父元素得的百分比的值(百分比这个值显示大小的参照物就是自己最近的父元素)
高度自适应：
1、相对窗口自适应
html,body{height:100%;}
（全屏显示的页面必须要给 html,body设置高度100%）
注：百分比设置宽高的时候，都是相对当前元素最近的父元素显得的百分比的值(百分比这个值显示大小的参照物就是自己最近的父元素)
2、相对元素或者内容自适应：
1）非浮动元素的父元素高度自适应
实现方法：
①不设置高度，或者高度设置成 ： height:auto；
②通过最小高度实现高度自适应 ： min-height:300px;_height:300px;
③给需要高度自适应的元素添加这些属性：
min-height:value; height:auto!important;height:value;兼容IE6的写法：
height:300px; /* “” 叫做下划线过滤器，专门来单独过滤IE6 这个浏览器的，加了下划线过滤器之后，只有IE6 这个浏览器识别当前的属性，其他浏览器就都不识别了。 /
height:auto !important; / 具有最高优先级，有的的浏览器都会去识别这具有!important；过滤器的这个属性；!important; 对于IE6来说，是无效的，IE6不支持*/
height:300px; /* 专门让IE6识别的 */
浮动元素的父元素高度自适应
注：如果想实现元素高度自适应（相对元素或者是内容）：
说明：当父元素不设置高度的时候，第一级子元素浮动后，父元素高度塌陷；怎么去解决？（只要解决了高度塌陷的问题，父元素就能实现高度自适应了）
解决方法：
1)可以给固定高度去解决高度塌陷问题，
弊端：不能让元素高度自适应
2)overflow:hidden; 解决高度塌陷并能实现高度自适应的方法
弊端：只要里面的元素内容超出父元素以外，就会被隐藏（遵循BFC的显示原则）
3)在浮动元素的下方添加一个空元素，并设置以下属性：
空标记：
clear:both; height:0; overflow:hidden;
弊端：会添加很多空标记，增加结构负担，产生代码冗余
4)display:table 给父元素添加display:table;让父元素转换元素类型，跟表格一样
弊端：会改变当前元素的元素类型
5)万能清除法：
::after{content:""; clear:both; display:block; height:0; overflow:hidden; visibility:hidden; }
说明：推荐使用万能清除法；
弊端：单词太多，不好记
例：
添加后即可解决高度塌陷的问题
伪对象（元素）选择符：
(这几个微元素选择器前面的冒号可写一组也可写两组；)
1）::after: 与content属性一起使用，定义在对象后的内容。（必须具有属性content）
语法：选择符： :after{content:“文字”;}
选择符： :after{content:url(图片路径);}
2）::before: 与content属性一起使用，定义在对象前的内容
语法：选择符： :before{content:“文字”;}
选择符： :before{content:url(图片路径);}
3) ::first-letter 定义对象内第一个字符的样式。
说明：（该伪元素只能用于块级元素）
4) ::first-line 定义对象内第一行字符的样式。
说明：（该伪元素只能用于块级元素）
举例：隐藏属性：visibility:visible显示/hidden 隐藏
visibility:hidden; 和display:none; 的区别
hidden属性会使对象不可见，当爱对象在网页所占的控件没有改变，等于留出了一片空白区域；
而display:none;属性会使整个对象彻底消失不显示，也不再占用位置。
说明：visibility：hidden；让元素隐藏，元素的位置保留；
display：none;让元素隐藏，元素的位置也不保留；
注：如果想实现元素高度自适应（相对元素或者是内容）：
1、高度能不能设置成固定的值？？
2、高度不能固定，那该怎么设置呢？？
设置背景图大小的属性： background-size:
px 设置两个值：第一个值代表的是 宽 ；第二个值高
% 设置两个值：第一个值代表的是 宽 ；第二个值高（相对元素大小显示的百分比大小，）
cover 让图片等比例放大或缩小，直到把元素的两边都覆盖满为止；（覆盖整个元素）
contain 让图片等比例放大或缩小，图片完全显示在元素范围内；（被包含在整个元素内）
min-width: 最小宽度
max-width： 最大宽度
min-height： 最小高度
max-height： 最大高度
注：这组属性在IE6浏览器里是不支持的；padding和margin显示百分比显示值得时候，他的参照物是根据窗口的宽度来显示的。
padding-top/bottom ;margin-top/bottom;
在设置百分比的时候，百分比大小显示的参照物是窗口宽度（会根据窗口宽度显示百分比的值。）