宽高自适应

我是打工人

已于 2022-06-13 18:40:01 修改

阅读量1.5k

点赞数 1

文章标签： html

于 2022-03-09 08:34:07 首次发布

本文链接：https://blog.csdn.net/szydqq/article/details/123310365

版权

宽度自适应

宽度自适应：width

①在网页布局中如果块级元素设置width:100%或者是不写的时候，会沾满浏览器的全屏(通栏效果)

块级元素不设置宽度会与父级等宽(html,body块级元素)

重点:当元素没有设置宽度的时候元素脱离文档流宽度由内容决定

=> 设置浮动和绝对/固定定位的时候元素一定要加宽高大小!!!

②书写方式：

第一种：不写或者是width：auto；（推荐）

第二种：width：100%

③二者的区别：

width写auto：盒子的总宽的和父元素保持一致，加了内间距和边框线不会撑大盒子。
width：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>
        *{
            margin: 0;padding: 0;
        }
        div{
            width: 200px;
            height: 62px;
            background: #232323;
        }
        p{
            height: 50px;
            background: green;
            float: left;
        }
    </style>
</head>
<body>
    <div>
        <p>11111</p>
    </div>
</body>
</html>

效果图：

高度自适应

高度自适应 height

①不设置高度或者高度设置为auto，当前盒子就没有高度不显示，高度由内容决定的

使用场景：不知道这个区域要写多少内容或者不知道高是多少的时候

②height：100%===高度由父亲决定

使用场景：移动端

③常见的宽高自适应的情况

全屏案例、移动端 html,body{height:100%}

图片 img{width:100%;height:100%}

在工作中常用的方法: 高度设置为Auto的时候可以实现高度自适应

效果图：

最小高度

最小高度：min-height:====保证最小区域的存在==当内容比较少，甚至没有内容的时候，要保证最低区域的纯在，当超过最小高度的时候，高度自动撑开====元素高度由内容决定

例如：评论区的需求

①内容没有的时候保持一个固定的高度

②内容较多的时候会根据内容撑开 => 最小高度属性 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>
    <style>
        *{
            margin: 0;padding: 0
        }
        div:nth-child(1){
            height: 100px;
            background: pink;
            font-size: 50px;
        }
        div:nth-child(2){
            min-height: 200px; 
            /* 
                - 可以保持一个固定高度
                - 内容较多 会自动撑开高度 效果和height:auto效果一样
            */
            background: orange;
            font-size: 50px;
        }
        div:nth-child(3){
            height: 100px;
            background: skyblue;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div>恭喜武大靖同学获得冬奥会首金</div>
    <div>
        评论区
        <p>胜平月考考60  这个小菜鸡</p>
        <p>胜平月考考60  这个小菜鸡</p>
    </div>
    <div>底部区域</div>
</body>
</html>

效果图：

高度塌陷

1.高度塌陷/高度坍塌

前提1：①父级没有设置高度 => 做到自适应

②子级含有浮动属性（原因） => 需求

前提2：如果高度不写或者写了最小高度

2.解决方案

①overflow：hidden

优点：简单

缺点：一旦里面有元素超出，则会隐藏，不会被看到

②隔墙法：在所有浮动元素的最后面建立一个空的div标签，里面写一个行内样式：clear：both；

优点：简单

缺点：导致html代码冗余

③万能解决法/万能清除法(不要求理解,只要求会用)

- 要给父级盒子添加一个类名 clear-fix(前端中不成文的规定)

- clear-fix::after{

content:'';

width:0;

height:0;

display:block;

overflow:hidden;

visibility:hidden;

clear:both;

}

用法：哪个盒子塌陷了，就给哪个盒子上面写这个类名即可。注意：这个类名是自己随意起的，你要想改是可以自行更改的。

注意：宽高为0，超出部分隐藏，为了防止写文字的内容出现的问题

- 清除浮动 right、left、both 所有两边

移动端的设置

1.全屏页面：元素的宽度和高度会随着浏览器大小的变化而变化

2.全屏页面，高度要成100%，则需要html与body的高度一定要写100%

我是打工人

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫