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

方法三：

在父元素中添加一个参照物，如<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>

原文链接:https://www.cnblogs.com/21-forever/p/10849845.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有