宽高自适应

相对窗口和父元素的自适应写法
宽度：当块状元素不写宽度的时候，默认的宽度就是100%; 始终跟父元素是同宽的。 width：100%；
默认情况下：如果给块元素加了绝对定位或者固定定位，他的宽度就不在是100%显示了。也不会跟父元素同宽的，而是跟里面的内容同宽，如果元素里面没有内容，有没有定义宽高，这个时候，元素就不见了
高度： 当让元素的高度相对浏览器窗口显示半分比的值得时候，一定要给HTML和body设置高度100%；
高度自适应：
1、相对窗口自适应：
html,body{height:100%;}（全屏显示的页面必须要给 html,body设置高度100%）注：百分比这个值显示大小的参照物就是自己最近的父元素
2、相对元素或者内容自适应：
非浮动元素的父元素高度自适应
a、不设置高度，或者高度设置成 ： height:auto;
b、给需要高度自适应的元素添加这些属性：min-height:value; height:auto; !important; height:value;
c、通过最小高度实现高度自适应min-height:300px; height:300px；
注：带有!important; 关键字过滤器的属性，要写到相同属性之前；
兼容IE6的写法：/_height:300px;/
/* “” 叫做下划线过滤器，加了下划线过滤器之后，只有IE6 这个浏览器识别当前的属性，其他浏览器就都不识别了。 /
height:auto !important; / 具有最高优先级，有的的浏览器都会去识别这具有!important；过滤器的这个属性 ；!important; 对于IE6来说，是无效的，IE6不支持*/
height:300px;/*专门让IE6识别的 /
扩展内容
过滤器：
“_” 叫做下划线过滤器，专门来单独过滤IE6 这个浏览器的。_height:300p;x
“”、“+” 过滤IE7 及以下浏览器的 *height:300px;
“\9” 过滤所有的IE浏览器的 height:300px \9;
“ \0 ” 过滤IE8及以上浏览器的 height:300px \0;
!important; 关键字过滤器，具有最高优先级；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;}

伪元素（对象）选择器（这几个伪元素选择器前面的冒号可写一组，也可以写两组；）
a、::after : 与content属性一起使用，定义在对象后的内容。（必须具有属性content:“ ”；）
语法：选择符：:after{content:”文字”;}
选择符：:after{content:url(图片路径)；}
b、::before : 与content属性一起使用,定义在对象前的内容。
语法：选择符：:before{content:”文字”;}
选择符：:before{content:url(图片路径)；}
c、 ::first-letter 定义对象内第一个字符的样式。
说明：(该伪元素只能用于块级元素)
d、 ::first-line:定义对象内第一行的样式。
说明：(该伪元素只能用于块级元素。)

隐藏属性：visibility:visible 显示 / hidden 隐藏;
visibility:hidden;和display:none;的区别：
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域；
display:none;属性会使这个对象彻底消失不显示，也不再占用位置。
总结： visibility:hidden；让元素隐藏；元素的位置是保留的；
display:none：让元素隐藏； 元素的位置不保留，也被隐藏了；