宽高自适应
宽度自适应
若块级元素宽度不设置,或者设置成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>