css中的自适应

大家好，欢迎来到IT知识分享网。

定义：网页布局中经常要定义元素的宽和高，但很多时候我们希望元素的大小能够根据窗口或子元素自动调整。

一.宽高自适应

1.宽度自适应

        元素宽度默认值为auto;

列： div{width:auto;     /*设置auto或不设置，可实现宽度自适应*/

               height:100px;}

2.高度自适应

        元素宽度默认值为auto;

列： div{ height:100px;  }    /*设置auto或不设置，可实现宽度自适应*/

另外：min-height  (最小高度)

           max-height (最大高度)

           min-width (最小宽度)

           max-width (最大宽度)      

二.浮动元素的高度自适应

1.父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷

        方法一：给父元素添加声明overflow:hidden;

                (缺点：会隐藏溢出元素)

                 列： .box{height: 200px;}       如果浮动过多，换行就出现问题

                  .box{overflow: hidden;}     隐藏溢出元素

        方法二：在浮动元素下添加空块元素，并给该元素添加声明clear:both;

                                                                                                      height:0;

                                                                                                       overflow:hidden;

                        列：<div style=”clear: both;”></div>

                  （缺点：在结构里添加了空的标签，不利于代码可持续性，且降低了浏览器的性能）

        方法三：万能清除浮动法

                        选择符：after{content:””；clear:both;display:block;

                                                height:0;visiblity:hidden;/overflow:hidden}

                        列:

                                 .box::after{

                                            content: “aaaaa”;

                                            clear: both;

                                            display: block;

                                            width: 0;

                                            height: 0;

                                            /* display: none; */

                                            visibility: hidden;

                                                }