web前端学习145-148（盒子模型---案例：新浪导航案例-padding影响盒子好处，小米导航案例修改-padding影响盒子大小计算）

最新推荐文章于 2023-03-16 11:06:29 发布

香甜的甲基橙

最新推荐文章于 2023-03-16 11:06:29 发布

阅读量695

点赞数

分类专栏： css web前端基础学习笔记文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_51249285/article/details/122522075

版权

web前端基础学习笔记同时被 2 个专栏收录

68 篇文章 13 订阅

订阅专栏

css

22 篇文章 5 订阅

订阅专栏

文章目录

1 盒子模型
- 案例：新浪导航案例-padding影响盒子好处
- 案例：小米导航案例修改-padding影响盒子大小计算

1 盒子模型

案例：新浪导航案例-padding影响盒子好处

padding内边距可以撑开盒子,我们可以做非常巧妙的运用
因为每个导航栏里面的字数不一样多,我们可以不用给每个盒子宽度了,直接给padding最合适

直接给每个盒子一个宽度不合理，因为每个盒子里面字数不同，会导致字与盒子间距不同，显得不合理。如果给每个盒子左右相等内边距，就会合理一些。

在这里插入图片描述

相关取值:（之后学ps学测量）

上边框为3像素,颜色为#ff8500
下边框为1像素颜色为#edeef0
盒子高度为41像素,背景颜色为#fcfcfc
文字颜色为#4c4c4c

eg ： 17-padding应用-新浪导航.html

<!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>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeefe;
            background-color: #fcfcfc;
            line-height: 41px;
        }
        .nav a {
            /* a 属于行内元素，要转换成行内块元素 */
            display: inline-block;
            height: 40px;  /*给高度，宽度用内边距撑开*/
            padding: 0 20px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }
        .nav a:hover {
            background-color: rgb(206, 203, 203);
            color: orange;
        } 
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">关注我</a>
        
    </div>
</body>
</html>

网页显示

在这里插入图片描述

案例：小米导航案例修改-padding影响盒子大小计算

padding内边距可以撑开盒子,有时候也会让我们去修改宽度
所以小米侧边栏这个案例，文字距离左侧的距离不应该用text-indent这样不精确.
实际开发的做法是给padding值,这样更加精确.

不用text-indent: 2em;（不精确），修改成padding-left: 30px;

加了内边距会撑开盒子，所以需要修改width，减掉30px

eg : 小米侧边栏修改.html

<!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>简单小米侧边栏</title>
    <style>
        a {
            display: block;  /*转换成块元素，就可以竖着，设置宽高*/
            color: #fff;
            width: 260px;
            height: 54px;
            font-size: 20px;
            background-color: #a19f9f;
            text-decoration: none;
            padding-left: 30px;
            /* 行高=盒高使文字垂直居中 */
            line-height: 54px;
        }
        /* 鼠标经过链接变换背景颜色 */
        a:hover {
            background-color: orange;
        }
    </style>
</head>
<body>
        <a href="#">手机</a>
        <a href="#">电视</a>
        <a href="#">笔记本 平板</a>
        <a href="#">家电</a>
        <a href="#">出行 穿戴</a>
        <a href="#">智能 路由器</a>
        <a href="#">电源 配件</a>
        <a href="#">健康 儿童</a>
        <a href="#">生活 箱包</a> 
</body>
</html>

网页就不显示，跟之前的差不多

如何盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小

（没有指定宽度，盒子就不会撑开宽度）

eg :19-padding不会影响盒子大小情况.html

<!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>
        h1 {
            height: 200px;
            background-color: pink;
            padding: 30px;
            
        }
    </style>
</head>
<body>
    <h1></h1>
</body>
</html>

网页显示及检查

在这里插入图片描述

高度撑到了200+30*2=260，宽度默认

香甜的甲基橙

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
web前端学习145-148（盒子模型---案例：新浪导航案例-padding影响盒子好处，小米导航案例修改-padding影响盒子大小计算）

文章目录1 盒子模型案例：新浪导航案例-padding影响盒子好处案例：小米导航案例修改-padding影响盒子大小计算1 盒子模型案例：新浪导航案例-padding影响盒子好处padding内边距可以撑开盒子,我们可以做非常巧妙的运用因为每个导航栏里面的字数不一样多,我们可以不用给每个盒子宽度了,直接给padding最合适直接给每个盒子一个宽度不合理，因为每个盒子里面字数不同，会导致字与盒子间距不同，显得不合理。如果给每个盒子左右相等内边距，就会合理一些。相关取值:（之后学ps学测量
复制链接

扫一扫