从零开始学习前端开发 — 7、CSS宽高自适应

一、宽度自适应

语法:width:100%;

注: a)块状元素的默认宽度为100%

   b) 当给元素设置宽度为100%时,继承父元素的宽度

   c) 通常使用宽度自适应实现通栏效果


二、高度自适应

语法:height:auto;(等同于不给元素设置高度)


三、最小高度,最大高度,最小宽度,最大宽度

1.最小高度

语法: min-height:数值+单位;

注:IE6不识别min-height属性,解决方案如下:

方案一: min-height:100px; _height:100px;

方案二: min-height:100px; height:auto!important; height:100px;

2.最大高度

语法: max-height:数值+单位;

3.最小宽度

语法:min-width:数值+单位;

注:当给块元素设置min-width属性时,需要将块元素转换为display:inline-block;

4.最大宽度

语法:max-width:数值+单位;

注:以上四个属性在IE6及以下版本浏览器中不识别


四、高度塌陷问题(常见的几种清除浮动的方法)

描述:当父元素高度自适应,子元素设置了float,导致父元素高度为0,称为高度塌陷问题

解决方案如下:

1.方案一

给父元素一个固定的高度

缺点:不能实现高度自适应,不够灵活(不推荐使用)

2.方案二

给父元素设置overflow:hidden;

优点:简单,父元素可以高度自适应

缺点:当子元素有定位属性时,由于父元素设置了overflow:hidden;父元素容器之外的部分会被隐藏

3.方案三

在子元素的末尾添加一个空div,并设置样式:

.clear{clear:both;height:0; overflow:hidden;}

注:a)此div只为解决高度塌陷问题,不需要在浏览器中显示,所以设置height:0;

b)IE6不能识别小于10px的容器,所以要加overflow:hidden;来兼容IE6

优点:所有浏览器都支持

缺点:在网页中添加无意义的一个div,会造成代码冗余

4.方案四

通过伪元素的方式解决高度塌陷问题(万能清除浮动法)

父元素:after{
content:".";
display:block;
height:0;
overflow:hidden;
clear:both;
visibility:hidden;
}

注:伪元素的语法

选择器:before{content:"";} 在子元素之前去添加一个伪元素

选择器:after{content:"";} 在子元素之后去添加一个伪元素

伪元素是内联元素


五、元素隐藏不可见的两种方式(display:none;和visibility:hidden的区别)

1.display:none;

元素被隐藏,空间不保留;(看不见,摸不着)

2.visibility:hidden;

元素被隐藏,空间保留;(看不见,摸得着)

注:display:none;和overflow:hidden;的区别

display:none让元素完全隐藏不显示,overflow:hidden;是让元素溢出部分隐藏不可见,没有溢出部分正常显示


六、窗口高度自适应

首先,要设置窗口的高度自适应

html,body{height:100%;}

然后,给元素设置

div{height:100%;}

注:窗口高度自适应适用于屏幕窗口没有内容body为0或内容不满一屏的情况下使用


七、内联元素水平居中设置

如果被设置水平居中的元素是文本,图片等内联元素时,通过给父元素设置text-align:center;实现


八、定宽块状元素水平居中设置

满足定宽,块状元素两个条件的元素,将左右margin设置为auto即可实现元素在水平方向上居中显示

注:a)当给元素设置了float后,左右为auto将会失效

  b) 当给元素设置了absolute和fixed后,左右auto将会失效


九、不定宽块状元素水平居中设置

1.给父元素设置以下样式

a)给父元素设置display:table; 将元素转换为表格形式

b) 给父元素设置左右margin为auto

2.给父元素设置:text-align:center;

给子元素设置: display:inline-block;


十、元素在屏幕窗口水平垂直都居中

1.定宽高元素在屏幕窗口水平垂直都居中

元素{

width:value;
height:value;
position:fixed;
left:50%;
top:50%;
margin-left:-width/2+"px";
margin-top:-height/2+"px";
}
2.不定宽高元素在屏幕窗口水平垂直都居中

元素{

position:fixed;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}


十一、不定宽高子元素在父元素中水平垂直都居中

1.方案一(高度须给定,否则垂直居中高度拉伸充满父元素)

父元素{position:relative;}

子元素{

position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
2.方案二

父元素{

display:table-cell;
text-align:center;
vertical-align:middle;
}

注:display:table-cell;将元素转换为表格单元格形式

  3.子元素转换成行内块状元素宽高自适应,子元素同级设置高度充满父元素的参照物 且行内块状元素。同级子元素通过设置vertical-align:middle;垂直居中。兼容IE8及更高版本。

上一篇:Flex 布局教程


下一篇:plupload如何删除一条数据