伪类选择器、元素隐藏方式、高宽度自适应以及解决高度塌陷问题和全屏页面制作

1.伪元素选择器：

    标志：2个冒号
    	1.  ：：after------之后添加一段新内容
                            需要结合content一起使用

    	2. ：：before------之前添加一段内容
                            需要结合content一起使用
        	这个伪元素是行内元素，支持类型转换，支持所有样式语句。
    	3. ：：first-line-----找到第一行

   		4.：：first-letter------找第一个字

2.元素隐藏方式：

1.display:none;----元素隐藏之后不占据位置
2.visibility:hidden;-----元素隐藏之后占据位置
3.借助透明度达到隐藏的目的-------元素隐藏之后占据位置
    rgba：只能让背景透明，里面的内容依然可见
    opacity：背景和内容一起会透明
    取值区间：0-1之间
注意:overflow:hidden;(不算元素的隐藏,只隐藏超出的部分)

3. 宽度自适应：

    1.宽度不写或者写width：auto（推荐）
    2.width：100%；
    	区别：
        	width写auto：盒子的总宽度和父元素保持一致。加了内间距和边框线不会撑大盒子
        	width写100%：盒子的内容区和父元素保持一致。加了内间距和边框线会撑大盒子
    总宽计算规则：内容区+左右内间距+左右边框线
    总高计算规则：内容区+上下内间距+上下边框线

4.高度自适应：

    1.高度不写/auto(高度由内容决定)
        当你不知道这个区域有多少内容就给高度自适应
        最小高min-height：200px；(当内容比较少，甚至没有内容的 时候也要保证这个区域有一个最低的高度是存在的，当内容比较多的时候就让这个区域的高度随内容自动撑开)
        做高度自适应推荐使用min-height
    2.height：100%；

5.如果高度不写或最小高产生“高度塌陷”的问题

高度塌陷：子元素浮动，不占据位置，导致父元素的高度受到影响
解决方案：
    1.over-flow：hidden；
        优点：简单
        缺点：万一里面有超出父元素的元素，这个元素会被隐藏
    2.隔墙法
        在所有浮动元素的最后面新建一个空盒子，在里面写一个行内样式：clear:both;
            优点：简单
            缺点：会造成HTML代码冗余
    3.万能清除法
        .clear_fix::after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        overflow: hidden;
        visibility: collapse;
        clear: both;
    }

6.全屏页面：

    	元素的宽度和高度都和浏览器保持一致
注意点：html和body的高度一定要写100%