html（6）

宽高自适应

概念：根据设备，分辨率不同，有不一样的排版方式
1.宽度自适应
1.不设置宽度
2.使用百分比
3.使用min-width或者max-width
min 设置最小宽度
max 设置最大宽度

2.高度自适应

1.不设置高度
注意：如果自元素有浮动会高度塌陷
清除浮动：
1.给浮动元素的父亲田间overflow：hidden；
2.给浮动元素天见一个空的兄弟元素div，类名：clear
设置样式： 



clear：both
<div class='clear'></div>
.clear{clear:both}

3.给浮动元素的父亲添加类名clearfix,这是样式

.clearfix:after{
content:'';
display:block;
height:0;
clear:both;
}

伪类和伪元素的区别：

概念上：伪类是一种临时状态，只有状态被触发时才会发效
伪元素是一个虚拟的dom节点，是一个假的元素
写法上：伪类使用单冒号，伪元素使用双冒号
            ：after ::after 只是版本区别 都是伪元素
:brfore ::before

伪元素

e：after{content''}在e的内容后面添加内容
e：before{content''}在e的内容前面添加内通
e：：selection{}给e元素中选中的文字设置样式

这是百分比

注意：html和body没有内容的情况下高度为0

设置最小高度和最大高度

min-height:*px
max-height:*Px
visibility:hidden 不会占据盒子
display:none 隐藏 会占据盒子

上边固定，下边自适应

上边和下面都设置大小和绝对定位
下边不设置高度，且下边多设置一个bottom：0；top：上边盒子的高度

上下固定，中间自适应

上边和下边都设置大小和绝对定位
中间不设置高度，且中间多设置一个bottom：下边的高度
top：上边盒子的高度

左边固定，右边自适应

左边设置宽，设置左浮动
右边设置overflow：hidden

左、右边固定，中间自适应

左边中间设置固定宽度，左边左浮动，中间右浮动
中间设置 overflow：hidden

表格（常用属性）

1.border-collapse：collapse；实现表格细边框
【是郭药师真正意义上的细边框，必须配合td一起使用】
2.table-layout：fixed；单元格按格子均分表格的宽度
【注意：表格必须有设置宽度才行】