第三次作业

黑色毛衣_

于 2024-06-24 20:35:10 发布

阅读量293

点赞数 5

文章标签：前端

本文链接：https://blog.csdn.net/2301_80203161/article/details/139937676

版权

1.css盒子模型

在 CSS 世界中，盒子模型是一个至关重要的概念，它是页面布局的基础。

一、盒子模型的组成

CSS 中的盒子模型由四个部分组成：内容（Content）、内边距（Padding）、边框（Border）和外边距（Margin）。

内容区域是盒子中实际放置元素内容的部分，比如文本、图片等。内边距是内容与边框之间的空白区域，它可以为内容提供一定的缓冲空间。边框则是围绕内容和内边距的线条，可以设置其样式、宽度和颜色。外边距是盒子与相邻元素之间的距离，用于控制元素之间的间隔。

二、标准盒模型与怪异盒模型

在 CSS 中，存在两种盒子模型：标准盒模型和怪异盒模型。

标准盒模型中，盒子的总宽度 = 内容宽度（width） + 左右内边距（padding-left + padding-right） + 左右边框宽度（border-left-width + border-right-width） + 左右外边距（margin-left + margin-right）。

而怪异盒模型（也称为 IE 盒模型）中，盒子的总宽度 = 内容宽度（width） + 左右外边距（margin-left + margin-right），此时，内容宽度包含了内边距和边框的宽度。

在实际开发中，我们可以通过 box-sizing 属性来切换这两种盒子模型。 box-sizing: content-box 表示使用标准盒模型， box-sizing: border-box 表示使用怪异盒模型。

三、盒子模型的应用

盒子模型在页面布局中有着广泛的应用。通过合理设置盒子的内边距、边框和外边距，我们可以实现各种复杂的布局效果。

例如，当我们想要创建一个具有一定间距的元素时，可以设置合适的内边距；当需要为元素添加边框效果时，可以自定义边框的样式和颜色；而外边距则常用于控制元素之间的间距，实现页面元素的整齐排列。

四、盒子模型的计算与布局问题

在实际开发中，由于盒子模型的存在，可能会遇到一些布局计算上的问题。比如，当多个盒子并排排列时，需要考虑它们的外边距合并问题。相邻的垂直外边距会发生合并，取其中较大的值作为最终的外边距。

此外，在设置盒子的大小时，还需要注意不同浏览器对盒子模型的解析可能存在细微的差异，这就需要我们进行充分的测试和兼容性处理。

总之，深入理解 CSS 盒子模型对于我们掌握网页布局和样式设计至关重要。只有熟练掌握盒子模型的原理和应用，我们才能更加高效地创建出美观、布局合理的网页。

2.淘宝页面

1.淘宝登录页

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝登陆页面</title>
    <style>
        *{
            margin: 0px;
        }
        /* div{
            border: 1px solid red;
        } */
        .A,.C{
            height: 100px;
        }
        .B{
            width: 600px;
            height: 500px;
            margin: auto;
            /* box-shadow: 10px 10px 10px rgb(233, 233, 243); */
            background-color: rgb(233, 233, 243);
            border-radius: 20px;
        }
        .B0{
            text-align: center;
            height: 15%;
        }
        .B1{
            text-align: center;
            height: 20%;
        }
        .B2{
            text-align: center;
            height:15%;
        }
        .B3{
            text-align: center;
            height:15%;
        }
        .B4{
            text-align: center;
            height:20%;
        }
        .B5{
            text-align: center;
            height:20%;
        }
        input{
            width: 300px;
            height: 40px;
            border-radius: 10px;
        } 
        button{
            width: 300px;
            height: 40px;
        }
    </style>
</head>
<body>
    <form action="https://www.taobao.com">
    <div class="A"><img src="./微信截图_taobaologo.png" alt=""></div>
    <div class="B">
        <div class="B0"></div>
        <div class="B1"><h1>密码登录|短信登陆</h1></div>
        <div class="B2">
            <p><input type="text" name="username" id="username" value="" placeholder="账户名/邮箱/手机号"></p>
        </div>
        <div class="B3">
            <p><input type="password" name="password" id="password" value="" placeholder="请输入登录密码"></p>
        </div>
        <div class="B4">
            <p><button type="submit">登录</button></p>
        </div>
        <div class="B5">
            <span>免费注册</span>
            <span>忘记账户名</span>
            <span>忘记密码</span>
        </div>
    </div>
    <div class="C"></div>
    </form>
</body>
</html>

运行结果如下：

2.淘宝主页

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页面</title>
    <style>
        .H{
            /* border: 1px solid red; */
            height: 100px;
        }
        .H1,H2{

            float: left;
        }
        .H2{
            /* text-align: center; */
            margin-top: 1%;
        }
        input{
            width: 700px;
            height: 40px;
        }
        button{
            width: 50px;
            height: 40px;
        }
        
        .box{
            margin-top: 5%;
            margin-left: 15%;
            display: grid;
            width: 1200px;
            height: 1500px;
            grid-template-columns: repeat(5,1fr);
            grid-template-rows: repeat(5,1fr);
            grid-gap: 10px;
        }
        .box > div{
            border: 1px solid red;
            width: 234px;
            height: 366px;
            
        }
    </style>
</head>
<body>
    <div class="H">
        <div class="H1"><img src="./微信截图_20240607162128.png" alt=""></div>
        <div class="H2">
            <input type="text">
            <button type="submit">搜索</button></p>
        </div>
    </div>
    <div class="box">
        <div><img src="./微信截图_zhuye.png" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>
        <div><img src="./微信截图_zhuye.png" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>
        <div><img src="./微信截图_zhuye.png" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>
        <div><img src="./微信截图_zhuye.png" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>
        <div><img src="./微信截图_zhuye.png" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>
        <div><img src="./微信截图_zhuye.png" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>
        <div><img src="./微信截图_zhuye.png" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>
        <div><img src="./微信截图_zhuye.png" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>
        <div><img src="./微信截图_zhuye.png" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>
        <div><img src="./微信截图_zhuye.png" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>
    </div>
</body>
</html>

运行结果如下：

3.淘宝商品页

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品页</title>
    <style>
        *{
            margin: 0px;
            background-color: rgb(225, 230, 234);
        }
        div{
            /* border: 1px solid red; */
        }
        
        .box{
            height: 100px;
            /* background-color: antiquewhite; */
        }
        .box1,.box2{
            text-align: center;
            height: 50px;
            float: left;
            margin-top: 20px
        }
        .box1{
            width: 10%;
        }
        .box2{
            width: 40%;
            margin-left: 300px;
        }
        input{
            height: 35px;
            width: 300px;
            margin-top: 5px;
            border-radius: 10px;
        }
        button{
            height: 35px;
            margin-top: 5px;
            border-radius: 10px;
            background-color: rgb(247, 127, 8);
        }
        .B1{
            height: 80px;
            /* background-color: aqua; */
            width: 1200px;
            margin-left: 280px;
            background-color: white;
        }
        .B2{
            background-color: white;
            height: 500px;
            /* background-color: aqua; */
            width: 1200px;
            margin-left: 280px;
        }
        .B11,.B12{
            background-color: white;
            text-align: center;
            height: 450px;
            float: left;
            margin-top: 20px
        }
        .B11{
            width: 38%;
            margin-left: 5px;
        }
        .B12{
            width: 58%;
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"><img src="https://img.alicdn.com/imgextra/i2/O1CN01a69z6z1hJklCkBqOU_!!6000000004257-2-tps-174-106.png" alt="" height="50px"></div>
        <div class="box2">
            <input type="text" placeholder="搜索宝贝">
            <button type="submit">搜索</button>
            <button type="submit">搜本店</button>
        </div>
    </div>
    <div class="B">
        <div class="B1"><img src="./微信截图_611.png" alt="" height="78px" width="1190px"></div>
        <div class="B2">
            <div class="B11"><img src="./微信截图_6112.png" alt="" height="470px" width="500px"></div>
            <div class="B12">
                <ul>
                    <li>痞帅飞行员设计感春秋季胖子新款外套2024爆款工装上衣牛仔夹克男</li>
                    <li>已售300+</li>
                    <li><img src="./微信截图_6113.png" alt=""></li>
                    <li>广东广州至
                        郴州市
                        宜章县
                        快递: 免运费
                        48小时内发货
                    </li>

                </ul>
                <p><button>领券购买</button>
                    <button>加入购物车</button></p>
            <div>
        </div>
    </div>
</body>
</html>

运行结果如下：

黑色毛衣_

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
第三次作业

标准盒模型中，盒子的总宽度 = 内容宽度（width） + 左右内边距（padding-left + padding-right） + 左右边框宽度（border-left-width + border-right-width） + 左右外边距（margin-left + margin-right）。而怪异盒模型（也称为 IE 盒模型）中，盒子的总宽度 = 内容宽度（width） + 左右外边距（margin-left + margin-right），此时，内容宽度包含了内边距和边框的宽度。
复制链接

扫一扫