前端之css(宽高)设置小技巧

Posted 21-forever

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端之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;元素隐藏不可见,位置保留

 

 

 

三、窗口高度自适应

 

 

 

首先,给htmlbody设置高度为100%

 

 

 

html,body{height:100%;}

 

 

 

然后给元素设置高度100%

 

 

 

div{height:100%}

 

 

 

注:常用于窗口内容不满一屏或者没有内容body高度为0

 

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

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

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;将元素转换为表格单元格形式

 

 

 

方法三:

 

 

 

在父元素中添加一个参照物,如<span></span>

 

 

 

元素{

 

vertical-align:middle;

 

}

 

span{

 

display:inline-block;

 

width:0;

 

height:100%;

 

vertical-align:middle;

 

}

 

父元素{

 

text-align:center;

 

}

 

结构:

 

 

 

<div class="box">

 

<img src="1.jpg"/><span></span>

 

</div>

 

以上是关于前端之css(宽高)设置小技巧的主要内容,如果未能解决你的问题,请参考以下文章

前端知识 | CSS小技巧-自适应椭圆

前端必会的 HTML+CSS 常用技巧 之 移动端 1px 边框

前端必会的 HTML+CSS 常用技巧 之 移动端 1px 边框

前端必会的 HTML+CSS 常用技巧 之 移动端 1px 边框

CSS代码片段

CSS代码片段