Day0715宽高自适应

最新推荐文章于 2024-09-07 08:14:00 发布
最新推荐文章于 2024-09-07 08:14:00 发布
阅读量98 收藏
点赞数 1
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52696618/article/details/125822059
版权

01探路者页面广告图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .tlz_banner{
            width: 100%;
            height: 500px;
            background: red;
            position: relative;
            overflow: hidden;
        }
        /*广告图方法一*/
        /* .tlz_banner img{
            width: 100%;
            height: 500px;
        } */
        /*广告图方法二*/
        .tlz_banner >img{
            width: 1920px;
            height: 500px;
            position: absolute;
            left: 50%;
            margin-left: -960px;
        }
        .nav{
            width: 1200px;
            height: 200px;
            position: absolute;
            left: 50%;
            margin-left: -600px;
            bottom: 0;
        }
        .nav img{
            float: left;
            width:400px;
            height: 200px;
        }

    </style>
</head>
<body>
    <div class="tlz_banner">
        <img src="img/ht.jpg" alt="">
        <div class="nav">
            <img src="img/imgs1.jpg" alt="">
            <img src="img/imgs2.jpg" alt="">
            <img src="img/imgs3.jpg" alt="">
        </div>
    </div>
</body>
</html>

 02百分比单位学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .box{
            width: 300px;
            height: 200px;
            background: red;
            margin: 100px auto;
        }
        .box img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <!--
        % 百分比单位   相对单位  会跟随别人的改变而改变
         % 是相对父元素的大小的变化而发生变化
    -->
    <div class="box">
        <img src="img/img1.jpg" alt="">
    </div>
</body>
</html>

 03盒子大小撑满浏览器窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        html,body{
            width: 100%;
            height: 100%;
        }
        /* body{
            height: 100%;
        } */
        .box{
            width: 100%;
            height: 100%;
            background: orange;
        }
    </style>
</head>
<body>
    <div class="box">我是盒子</div>
</body>
</html>

 04高度自适应的盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .boss{
            height: auto;
        }
        .box1{
            width: 200px;
            height: 300px;
            background: pink;
        }
    </style>
</head>
<body>
    <div class="boss">
        <div class="box1">我是盒子</div>
        <div class="box1">我是盒子</div>
        <div class="box1">我是盒子</div>
        <div class="box1">我是盒子</div>
    </div>
</body>
</html>

 05高度自适应学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .clear::after{
            content:"";
            display:block;
            height:0;
            clear:both;
            overflow:hidden;
            visibility:hidden;
        }
        .clear{
            zoom:1;
        }
        .big_div{
            width: 100%;
            /* height: auto; */
            background: red;
        }
        .content{
            width: 1030px;
            /* height: 600px; */
            background: pink;
            margin: 0 auto;
        }
        .content ul{
            /* height: 600px; */
            /* overflow: hidden; */
            min-height: 500px;
        }
        .content li{
            list-style: none;
            width: 250px;
            height: 200px;
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        /*
        1行   4个li
        2行   8个li
        3行   12个li
        n行   4n个li
        */
        .content li:nth-child(4n){/*每一行的最后一个li*/
            margin-right: 0;
        }
        .content li img{
            width: 100%;
            height: 100%;
        }



        .divs{
            width: 100%;
            height: 800px;
            background: yellow;
        }

        .p1{
            clear: both;
        }
    </style>
</head>
<body>
    <!--
        高度塌陷：给所有的子元素都添加浮动了，父元素及祖宗都没有设置高度，就会高度为0。
        解决方案：
        1.给父元素添加height   遇到父元素需要高度自适应就不好用了
        2.给父元素添加overflow:hidden/auto/scroll;  遇到定位就不好用了  bfc
        3.给浮动元素的下方添加一个空的块元素，且给这个块元素添加clear:both;(清除浮动)   会造成代码的冗余
        4.万能清除法  取一个公共类class名  给到浮动元素的父元素添加
        .clear::after{
            content:"";
            display:block;
            height:0;
            clear:both;
            overflow:hidden;
            visibility:hidden;
        }
        .clear{
            zoom:1;
        }
        5.给父元素添加浮动；  会带来新的浮动问题，不推荐使用
        6.给父元素添加display:table;  会造成未知bug  不推荐使用
    -->
    <div class="big_div">
        <div class="content">
            <!-- ul>li*12>img[src="img/img1.jpg"] -->
            <ul class="clear">
                <li><img src="img/img1.jpg" alt=""></li>
                <li><img src="img/img1.jpg" alt=""></li>
                <li><img src="img/img1.jpg" alt=""></li>
                <li><img src="img/img1.jpg" alt=""></li>
                <li><img src="img/img1.jpg" alt=""></li>
                <li><img src="img/img1.jpg" alt=""></li>
                <li><img src="img/img1.jpg" alt=""></li>
                <li><img src="img/img1.jpg" alt=""></li>
                <li><img src="img/img1.jpg" alt=""></li>
                <li><img src="img/img1.jpg" alt=""></li>
                <li><img src="img/img1.jpg" alt=""></li>
                <li><img src="img/img1.jpg" alt=""></li>
                <!-- <p class="p1"></p> -->
            </ul>
        </div>
    </div>

    <div class="divs">我是下方我是下方的盒子我是下方的盒子我是下方的盒子我是下方的盒子我是下方的盒子我是下方的盒子我是下方的盒子我是下方的盒子我是下方的盒子我是下方的盒子我是下方的盒子的盒子</div>
</body>
</html>

 06伪对象选择器学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*伪对象选择器*/
        /*在元素后面添加内容*/
        .box1::after{
            content: "早有蜻蜓立上头。";
            color: red;
        }
        /*在元素前面添加内容*/
        .box2::before{
            content: url(img/small1_24.jpg);
            margin-right: 10px;
        }

        .box3::first-letter{
            color: green;
            font-size: 20px;
        }
        .box4::first-line{
            color: red;
        }

        /* .box5::selection{
            color: red;
            background: green;
        } */


        /*给整个页面添加*/
        ::selection{
            color: yellow;
            background: green;
        }
    </style>
</head>
<body>
    <div class="box1">小荷才露尖尖角，</div>
    <div class="box2">我是文本内容，请给前面添加图片</div>
    <div class="box3">我是文本内容，请给前面添加图片</div>
    <div class="box4">我是文本内容，请给前面添加图片我是文本内容，请给前面添加图片我是文本内容，请给前面添加图片我是文本内容，请给前面添加图片</div>
    <div class="box5">双抗精华的开始打瞌睡的</div>
</body>
</html>

 07visibility属性学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background: green;
            visibility: hidden;/*占位隐藏*/
        }
    </style>
</head>
<body>
    <div class="box">我是盒子</div>
</body>
</html>

 08最小高和最大高学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        最小高    min-height   一般来说是自己加的，一般根据设计图来加
        最大高    max-height   一般是js动态加的，然后给分页效果
    -->
</body>
</html>

 09min-height的兼容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .box{
            width: 200px;
            background: orange !important;
            min-height: 200px;
            /* _height:200px; */
            /*!important 关键字过滤器，是高版本浏览器使用的*/
            height: auto !important;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box" style="background: green;">，我容，内容，</div>
</body>
</html>

 10三级导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        li{list-style: none;}
        a{text-decoration: none;}
        .big_nav{
            width: 100%;
            height: 50px;
            background: red;
        }
        .nav{
            width: 1000px;
            height: 50px;
            background: pink;
            margin: 0 auto;
        }
        .nav ul{
            width: 1000px;
            height: 50px;
        }
        .nav li{
            width: 200px;
            height: 50px;
            float: left;
            text-align: center;
            line-height: 50px;
            font-size: 18px;
            position: relative;
        }
        .nav li a{
            color: #fff;
            display: block;
            width: 200px;
            height: 50px;
        }
        .nav li >a:hover{
            background: green;
        }
        .nav2{
            width: 200px;
            height: 200px;
            background: deepskyblue;
            position: absolute;
            left: 0;
            top: 50px;
            z-index: 1000;
            display: none;
        }
        .nav2 a:hover{
            background: deeppink;
        }
        .nav li:hover .nav2{
            display: block;
        }

        .nav2 > div{
            position: relative;
        }

        .nav3{
            width: 200px;
            height: 200px;
            background: yellowgreen;
            position: absolute;
            left: 200px;
            top: 0;
            display: none;
        }
        .nav2 > div:hover .nav3{
            display: block;
        }


        .content{
            width: 100%;
            height: 1500px;
            background: orange;
        }
    </style>
</head>
<body>
    <div class="big_nav">
        <div class="nav">
            <ul>
                <li>
                    <a href="#">所有商品分类</a>
                    <!--二级导航-->
                    <div class="nav2">
                        <div>
                            <a href="#">拖鞋</a>
                            <div class="nav3">我是三级导航</div>
                        </div>
                        <div>
                            <a href="#">凉鞋</a>
                        </div>
                        <div>
                            <a href="#">布鞋</a>
                        </div>
                        <div>
                            <a href="#">豆豆鞋</a>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">男子专区</a>
                </li>
                <li>
                    <a href="#">女子专区</a>
                </li>
                <li>
                    <a href="#">儿童专区</a>
                </li>
            </ul>
        </div>
    </div>


    <div class="content">我是下方的我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容啊内容</div>
</body>
</html>
goto_w
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
day12-宽高自适应
user_lc的博客
10-29 96
高度塌陷
day10宽高自适应，BFC
2301_78238711的博客
06-03 50
宽高自适应，BFC
DAY6宽高自适应
甘乐2333的博客
05-03 162
一、宽高自适应 网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。 它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。 (1)宽度自适应 块元素宽度默认为auto (2) 高度自适应 元素{height:auto;}/高度不写 二、浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父...
【Day10】宽高自适应
CSDN博客
10-08 109
【课堂笔记】Day10
day07宽高的自适应
qq_64085550的博客
07-29 110
2、、写时需要使用width:auto;3、width:100%是宽度自适应，但与padding等影响尺寸的样式共同使用时，会出现滚动 框。宽度一般默认与body一致，一般为width:auto（宽度100%）2、当页面缩放到一定程度时，自适应会影响布局，这时需要用到限定。注：1、通栏布局时，width可以不写，最小宽度：min-width:属性值。最小高度：min-hight:属性值。最大宽度：max-width:属性值。二、高度自适应:height:auto;属性::hover{
echarts宽高自适应and字体自适应
qq_51531185的博客
05-14 922
/ shallowRef需引入 import {shallowRef} from 'vue';整体思路：获取其他可自适应做出改变的元素的字体大小，再计算成echart需要的大小并赋值。如在以下代码报........(reading ‘type‘)的错误。注：如果不能自适应检查一下父级或者借鉴的元素本身不能做出自适应。整体思路：根据父级的宽高的改变使得echart跟着改变。，加班到现在才搞完.....新手第一篇文章希望大家多多支持。
day08-宽高自适应&高度塌陷
HAI6545的博客
12-07 96
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。 自适应的优点： 元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。 一、宽高自适应 网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。 （1）宽度自适应 元素宽度设置为100%。（块元素宽度默认为100%） ...
前端总结Day10、宽高自适应
zxpmoxo的博客
10-11 117
日常笔记
css定位+锚点+pc端宽高自适应总结
Jared864的博客
03-30 772
Day15 1、 固定定位 Position:fixed; 固定定位 A:参照物：浏览器窗口； B:不占据空间，脱离布局流； 让一个元素在浏览器窗口左右上下居中？ 第一种方法： Position:fixed; Left:50%;right:50%; Margin-left:-元素宽度的一半； Margin-top:-元素高度的一半； 第二种方法： Position:fixed; Left:0;ri...
fullcalendar日历右侧点击收缩自适应宽度高度
qq_37263478的博客
12-23 2782
销毁再初始化生成，唉，就是玩儿！
Android 10.0 关于定制自适应AdaptiveIconDrawable类型的动态日历图标的功能实现系列一
安卓兼职framework和app工程师的博客
07-01 525
在10.0的系统rom定制化开发中，在关于定制动态时钟图标中，原系统是不支持动态日历图标的功能，所以就需要从新 定制动态时钟图标关于自适应AdaptiveIconDrawable类型的样式，就是可以支持当改变系统图标样式变化时，动态日历 图标的背景图形也跟着改变，所以接下来就来实现相关的功能
Android 11.0 关于定制自适应AdaptiveIconDrawable类型的动态日历图标的功能实现系列一
安卓兼职framework和app工程师的博客
08-30 197
在11.0的系统rom定制化开发中，在关于定制动态时钟图标中，原系统是不支持动态日历图标的功能，所以就需要从新 定制动态日历图标关于自适应AdaptiveIconDrawable类型的样式，就是可以支持当改变系统图标样式变化时，动态日历 图标的背景图形也跟着改变，所以接下来就来实现相关的功能
echarts vue element-ui 实现根据选择项年月日时间切换数据显示折线图，vue页面监听自适应（二）
总结前端开发中遇到的问题，分享前端知识
06-16 4134
实现根据选择项年月日时间切换数据显示折线图，vue页面监听自适应
AWTK HTML View 控件更新
最新发布
国产开源 GUI 引擎 AWTK
09-07 322
AWTK HTML View 控件基于 [Lite HTML](https://github.com/litehtml/litehtml) 实现，从最初的版本开始，3 年多过去了，Lite HTML 做了大量的更新，最近抽空将 AWTK HTML View 控件适配到最新版本的 Lite HTML，欢迎大家使用。
【HTML】置换元素（替换元素）
衣乌安、随笔
09-06 137
● 它的内容不是由元素的标签内的内容决定的，而是由元素的属性决定的。● 可以通过CSS设置宽度和高度。
HTML标签大合集
2302_78656999的博客
09-02 297
本文详细介绍常用的HTML标签及其用法
HTML生日蛋糕
兔子王
09-07 661
用HTML语言实现生日蛋糕效果的完整代码。
王清主编：Windows 0day漏洞分析全攻略
《0day安全：软件漏洞分析技术（第2版）》由王清主编，是一部专为网络安全领域打造的权威指南。该书共分为五个篇章，共计33章，深入剖析Windows平台上的缓冲区溢出漏洞分析、检测和防护技术。第一篇作为基础教程，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

goto_w

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值