宽高自适应、定位、隐藏

宽高自适应

宽度自适应

若块级元素宽度不设置，或者设置成100%，都是占据其父级元素的一整行
应用场景:页面最外层的盒子一般都要占据屏幕的大小，所以宽度100%。

高度自适应

一：父元素的高度由子元素撑开
(1)高度塌陷：子元素都浮动了，父元素会没有高度。
解决方案（清除浮动）：
1.给父元素添加最后一个子元素(块级元素)
子元素css{ height:0;overflow:hidden;clear:both;}
缺点：造成不必要的浪费
2.给父元素添加{overflow:hidden;}
缺点:可能造成需要的部分被隐藏掉
3.伪元素清除法（万能清除法）给父元素加一个伪类clearfix::after{}，css内容如下

/*清除浮动（不管）*/
.clearfix:before,.clearfix:after {  /*清楚浮动*/
    content:"";
    display:table;
}
.clearfix:after{clear:both;}
.clearfix{
    *zoom:1;/*IE/7/6*/
}

(2)预防子元素会没有内容，撑不开父元素的情况
解决办法：给父元素添加最小高度min-height。
（当内容高度小于最小高度时，按最小高度显示。当内容高度大于最小高度时，按内容高度显示）
兼容写法:{min-height:;（现在常用浏览器） _height:;（IE6）}
二：高度自适应窗口高度
body,html{height:100%;}、最外层的大盒子{height:100%;} 多用于手机端弹性盒布局

定位position

属性值	名称	描述
static	静态定位	默认值
relative	相对定位	相对于自己本身所在的位置进行定位配合left、right、topbottom使用，不脱离标准流。
absolute	绝对定位	相对于html或者最近的有定位的父元素进行移动定位配合left、right、top、bottom使用，脱离标准流。
fixed	固定定位	相对于浏览器的可视区域进行移动定位配合left、right、top、bottom使用，脱离标准流。

/*绝对定位配合相对定位使用*/
.father{
	       width: 400px;
           height: 400px;
           background: #888888;
           position: relative;/*相对定位*/
        }
.father .absolute{
	       width: 200px;
           height: 200px;
           background: #58bc58;
           position: absolute;
           /*若父元素没给position: relative;
           则是相对于浏览器定位*/
           bottom: 0;
           right: 0;
           /*定位于父元素的右下方*/

隐藏

隐藏元素

display：none 隐藏元素，不占位置
visibility：hidden 隐藏元素，占位置

隐藏文本

overflow: hidden 隐藏超出文本
一行文本超出显示省略号，必须3行搭配使用

<style type="text/css">
       p{
           width: 200px;/*设置容器宽度*/
           white-space: nowrap;/*文本强制一行*/
           overflow: hidden;
           text-overflow: ellipsis;/*多出内容显示省略号*/
        }
</style>