CSS：宽高自适应详解

宽度自适应的应用
1.属性:width
2.属性值:px/%
3.宽度自适应的特点
- HTML,BODY表示浏览器,默认是块级元素,宽度是100%
- 当块级元素不设置宽度或者设置100%的时候,宽度会沾满全屏(通栏效果)
- 子级是块级元素,不设置宽度的时候会和父级等宽
- 宽度是没有继承性,只是块级元素的布局规范而已
- 【重要】当块级元素脱离文档流的时候,宽度由内容决定 => 设置浮动和定位的盒子一定记得要加宽高大小！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 100%;
            height: 62px;
            background: #232323;
        }
        p{
            height: 30px;
            background: pink;
            float: left;
        }
    </style>
</head>
<body>
    <div>
        <p>logo</p>
    </div>
</body>
</html>

效果图：

高度自适应的应用
1.属性:height
2.属性值:px/%
3.高度自适应的特点
- 浏览器的高度默认是0,html,body{height:100%}
- 设置元素高度为0,盒子的高度就不会显示,添加文本会超出容器范围不会撑大盒子
- 设置好元素高度为auto或者不写的时候可以做到自适应(高度自适应)
- 高度设置为100的常见情况
- html,body{height:100%} 浏览器的默认宽高设置为100% 沾满全屏
- img{width:100%;height:100%} 百分比是相对单位,相对于父级元素进行计算
4.需求:有三个盒子
- 第一个盒子宽度100%,高度100px
- 第二个盒子
- 当盒子中无内容的时候保持一个最小高度
- 当盒子中内容较多的时候可以撑开盒子的高度做到适应
- 第三个盒子宽度100%,高度100px
5.最小高度的概念:min-height
- 第一个作用:height:value作用一样可以有固定高度
- 第二个作用:height:auto作用一样可以做到自适应
6.最小高度的兼容问题(浏览器历史)
- 第一款浏览器网景公司(网景领航者NN)
- 第二次浏览器大战 IE9(及以后)
- 最小高度不可以在低版本中使用
- 解决低版本属性解析:_属性:属性值表示只能在低版本中解析
- height高度在低版本浏览器中是有两个作用和最小高度的效果是一样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            /* height: 0; */
            background: pink
        }
    </style>
</head>
<body>
    <div>
        文本 <br>
        文本
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        .box1{
            height: 100px;
            background: pink
        }
        .box3{
            height: 100px;
            background: skyblue
        }
        .box2{
            min-height: 300px;/* 高版本 */
            _height: 300px; /* 低版本 */
            background: yellowgreen
        }
        /* 公司的新闻列表 */
    </style>
</head>
<body>
    <div class="box1">第一个盒子</div>
    <div class="box2">
        <p>000000001</p>
        <p>000000002</p>
        <p>000000003</p>
        <p>000000004</p>
        <p>000000005</p>
        <p>000000006</p>
        <p>000000007</p>
        <p>000000008</p>
        <p>000000009</p>
        <p>000000010</p>
        <p>000000011</p>
        <p>000000012</p>
        <p>000000013</p>
        <p>000000014</p>
        <p>000000015</p>
        <p>000000016</p>
        <p>000000017</p>
        <p>000000018</p>
        
    </div>
    <div class="box3">第三个盒子</div>
</body>
</html>

最大值最小值的拓展

最大值
- 最大宽度 max-width:1920px 约束用户屏幕自适应的最大值
- 最大高度 max-height 判断用户的评论达到一定的高度时候可以实现翻页功能
最小值
- 最小宽度 min-width 约束盒子不会往下掉
- 最小高度 min-height 自适应
重点:最小宽度和最大宽度(响应式布局-媒体查询)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../03-reset.css">
    <style>
        #header{
            height: 100px;
            background: pink;
            /* 最小宽度 屏幕变化的时候最小值是? */
            min-width: 800px
        }
        .box1{
            width: 300px;
            height: 100px;
            background: green;
            float: left;
        }
        .box2{
            width: 500px;
            height: 100px;
            background: blue;
            float: right;
        }
    </style>
</head>
<body>
    <div id="header">
        <div class="box1">logo</div>
        <div class="box2">导航</div>
    </div>
</body>
</html>

扫描二维码关注公众号，回复： 14907793 查看本文章

高度塌陷/高度坍塌
一.造成原因:父级没有设置高度,子级元素脱离了文档流
二.解决方法(10多种)
1.解决方法:给父级元素添加overflow:hidden
- 原理:设置overflow:hidden触发BFC,BFC中有一条布局规则:浮动元素也会参与高度计算
2.解决方法:在最后一个子级元素下面添加任意标签(div) 设置样式clear:both
- 解释:clear清除浮动 left/right/both
- 原理:清除上方预留出来的所有浮动
- 优缺点:优点比较方便、缺点增加了无用的标签、代码冗余
3.万能清除法(不要求理解要求会用)
- 代码
.clear-fix::after{
content:'';
display:block;
width:100%;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../03-reset.css">
    <style>
        .box{
            width: 1000px;
            /* height: 500px; */
            border: 10px solid #000;
            margin: 100px auto;
        } 
        .box1{
            width: 300px;
            height: 300px;
            background: skyblue;
            float: left;
            margin: 10px
        }
        .box2{
            width: 300px;
            height: 300px;
            background: yellowgreen;
            float: left;
            margin: 10px

        }
        .box3{
            width: 300px;
            height: 300px;
            background: purple;
            float: left;
            margin: 10px
        }
        /* 不成文的规定 */
        /* .clear-fix{
            clear: both
        } */
        /* .clear-fix::after{
                content:'';
                display:block;
                width:100%;
                height:0;
                clear:both;
                overflow:hidden;
                visibility:hidden;
        } */
    </style>
</head>
<body>
    <div class="box clear-fix"><!-- BFC区域 -->
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

万能清除法的解释

一:伪对象选择器/伪元素选择器(伪类选择器进行区别)
1.选择器::after{content:''} 表示在xx之后添加内容,必须要和content一起搭配使用,可以不写任何内容
2.选择器::before{content:''} 表示在xx之前添加内容,必须要和content一起搭配使用,可以不写任何内容

二:关于隐藏的几种用法
1.display:none 删除元素的显示和结构
2.visibility:hidden 删除显示方式但是位置还存在

三:伪对象和伪类之间的区别是什么?
1.写法上区别:在css2中伪类和伪对象都是一个冒号,在css3中为了区分规定伪对象需要写两个冒号
2.作用上区别:伪类改变是元素的状态,伪对象不仅可以改变元素状态还可以添加结构(虚拟)

CSS：宽高自适应详解

猜你喜欢