您的位置 首页 > 数码极客

〈css如何让宽度自适应〉自适应宽度用到CSS属性为…

一、css宽高自适应:

1.宽度自适应:

元素宽度设为100%(块状元素的默认宽度为100%)

注:应用在通栏效果中

2.高度自适应:

height:auto;或者不设置高度

3.最小,最大高度,最小,最大宽度:

a)最小高度 min-height:value;

IE6不识别min-height属性,解决方案如下: 方案一:min-height:100px; _height:100px; 方案二:min-height:100px; height:auto!important; height:100px;

b)最大高度:

max-height:value;

c)最大宽度:

max-width:value;

d)最小宽度:

min-width:value;

注:块状元素设置最小宽度时,需要将元素转换为内联块状元素,添加display:inline-block;

注:以上四个属性IE6及以下版本浏览器不支持

4.高度塌陷问题:

描述:子元素浮动,父元素高度自适应,造成父元素高度为0,简称高度塌陷问题

解决方案:

方案一:

给父元素添加overflow:hidden; 优点:简单,兼容性好 缺点:当有position:relative;出现时,会影响页面显示效果

方案二:

给父元素固定的高度 height:value; 缺点:不灵活,高度无法自适应

方案三:

在子元素的末尾添加一个空div,并设置样式 .clear{height:0; overflow:hidden;clear:both;} 优点:所有浏览器都支持 缺点:在页面中添加一个无意义的div,造成代码冗余

方案四:(万能清除浮动法,推荐使用)

通过伪元素的方式清除浮动

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

注:伪元素是内联元素,转换为块元素设置宽高才能生效

height:0;在IE6下不兼容,添加overflow:hidden;兼容IE6

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

1.display:none;元素隐藏不可见,位置不保留

2.visibility:hidden;元素隐藏不可见,位置保留

三、窗口高度自适应

首先,给html,body设置高度为100% html,body{height:100%;} 然后给元素设置高度100% div{height:100%} 注:常用于窗口内容不满一屏或者没有内容body高度为0时

四、水平居中和垂直居中:

1.行内元素水平居中设置

设置文本、图片等行内元素水平居中,给父元素设置text-align:center;

2.定宽块状元素水平居中设置

给定宽块状元素设置左右margin值为auto

注:当元素设置float或绝对定位,固定定位时,左右margin为auto失效

3.不定宽块状元素水平居中

方法一:

给父元素设置 {display:table;margin:0 auto;}

注: display:table;将元素转换为表格的形式

方法二:

子元素设置: {display:inline-block;} 父元素设置:{text-align:center;}

五、元素水平垂直都居中

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

方法一:

元素{ width:value; height:value; position:fixed; left:50%; top:50%; margin-left:-width/2+px; margin-top:-height/2+px; }

方法二:

元素{ width:value; height:value; position:fixed; left:0; top:0; right:0; bottom:0; margin:auto; }

2.未知宽高元素在父元素中水平垂直都居中

方法一:

元素{ width:value; height:value; position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; }

方法二:

父元素{ width:value; height:value; display:table-cell; vertical-align:middle; text-align:center; }

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

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“css如何让宽度自适应,自适应宽度用到CSS属性为,CSS宽度自适应,css设置宽度自适应,css图片宽度自适应,css宽度自适应内容”边界阅读