盒子模型的内边距实现新浪导航栏

最新推荐文章于 2024-10-01 23:20:42 发布
最新推荐文章于 2024-10-01 23:20:42 发布
阅读量626 收藏 2
点赞数 1
分类专栏： 前端只因变凤凰之路 文章标签： css css3 盒子模型 内边距 内边距实现导航栏实例 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62588253/article/details/129579142
版权
🌟 所属专栏：前端只因变凤凰之路
🐔 作者简介：rchjr——五带信管菜只因一枚
😮 前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
👉 文章简介：本文介绍CSS的盒子模型中的边框与内边距。知识学习内容来自b站的 @黑马程序员 的视频

😃一、网页布局的本质

  • 先准备好相关的网页元素，网页元素基本都是盒子

  • 利用CSS设置好盒子的样式，然后摆放到相应位置

  • 往盒子里面装内容

核心：利用CSS摆盒子

😃二、盒子模型组成部分

所谓盒子模型就是把html页面中的布局元素看做是一个矩形的盒子，也就是装内容的容器。CSS盒子模型本质上是一个盒子，它包括边框、外边距、内边距和实际内容四个部分。

🔥1.1边框

属性

border-width，边框的粗细

border-style，边框的样式（如实线，点线，虚线等）

border-color，边框的颜色

<!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>
        div {
            width: 200px;
            height: 200px;
            border-width: 5px;
            border-style: solid;
            border-color: aqua;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

复合写法

border: 1px solid pink; 包括了粗细，样式和颜色，其中三者没有顺序

<!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>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid pink;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</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>
        div {
            width: 200px;
            height: 200px;
            border: 5px solid blue;
            border-top: 1px solid pink;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

🔥1.2 表格的细线边框

先看下面的代码效果

<!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>
        table,
        td {
            border: 1px solid pink;
        }
    </style>
</head>

<body>
    <table cellpadding="5" cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关连接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="images/up.jpg" alt="" width="10" height="10"></td>
                <td>345</td>
                <td>123</td>
                <td><a href="http://www.baidu">百度</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>盗墓笔记</td>
                <td><img src="images/down.jpg" alt="" width="10" height="10"></td>
                <td>345</td>
                <td>123</td>
                <td><a href="http://www.baidu">百度</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="images/up.jpg" alt="" width="10" height="10"></td>
                <td>345</td>
                <td>123</td>
                <td><a href="http://www.baidu">百度</a></td>
            </tr>
            <tr>
                <td>4</td>
                <td>东游记</td>
                <td><img src="images/down.jpg" alt="" width="10" height="10"></td>
                <td>345</td>
                <td>123</td>
                <td><a href="http://www.baidu">百度</a></td>
            </tr>
            <tr>
                <td>5</td>
                <td>甄嬛传</td>
                <td><img src="images/up.jpg" alt="" width="10" height="10"></td>
                <td>345</td>
                <td>123</td>
                <td><a href="http://www.baidu">百度</a></td>
            </tr>
            <tr>
                <td>6</td>
                <td>水浒传</td>
                <td><img src="images/down.jpg" alt="" width="10" height="10"></td>
                <td>345</td>
                <td>123</td>
                <td><a href="http://www.baidu">百度</a></td>
            </tr>
            <tr>
                <td>7</td>
                <td>三国演义</td>
                <td><img src="images/up.jpg" alt="" width="10" height="10"></td>
                <td>345</td>
                <td>123</td>
                <td><a href="http://www.baidu">百度</a></td>
            </tr>
        </tbody>
    </table>
</body>

</html>

可以看到由于每个单元格的粗细都为1，加起来就为2，看起来比第一行的单元格要粗。现在有个办法可以让相邻的边框合并

border-collapse属性即可。

<!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>
        table {
            width: 500px;
            height: 249px;

        }

        table,
        td,
        th {
            border: 1px solid pink;
            border-collapse: collapse;
            font-size: 14px;
            text-align: center;
        }
    </style>
</head>

<body>
    <table align="center" cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关连接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="images/up.jpg" alt="" width="10" height="10"></td>
                <td>345</td>
                <td>123</td>
                <td><a href="http://www.baidu">百度</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>盗墓笔记</td>
                <td><img src="images/down.jpg" alt="" width="10" height="10"></td>
                <td>345</td>
                <td>123</td>
                <td><a href="http://www.baidu">百度</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="images/up.jpg" alt="" width="10" height="10"></td>
                <td>345</td>
                <td>123</td>
                <td><a href="http://www.baidu">百度</a></td>
            </tr>
            <tr>
                <td>4</td>
                <td>东游记</td>
                <td><img src="images/down.jpg" alt="" width="10" height="10"></td>
                <td>345</td>
                <td>123</td>
                <td><a href="http://www.baidu">百度</a></td>
            </tr>
            <tr>
                <td>5</td>
                <td>甄嬛传</td>
                <td><img src="images/up.jpg" alt="" width="10" height="10"></td>
                <td>345</td>
                <td>123</td>
                <td><a href="http://www.baidu">百度</a></td>
            </tr>
            <tr>
                <td>6</td>
                <td>水浒传</td>
                <td><img src="images/down.jpg" alt="" width="10" height="10"></td>
                <td>345</td>
                <td>123</td>
                <td><a href="http://www.baidu">百度</a></td>
            </tr>
            <tr>
                <td>7</td>
                <td>三国演义</td>
                <td><img src="images/up.jpg" alt="" width="10" height="10"></td>
                <td>345</td>
                <td>123</td>
                <td><a href="http://www.baidu">百度</a></td>
            </tr>
        </tbody>
    </table>
</body>

</html>

可以看到相邻边框边细了

🔥1.3 边框会影响盒子的实际大小

边框会影响盒子实际大小，因此有两种解决方案：

  1. 测量盒子大小的时候不量边框

  1. 如果测量的时候包含了边框，则需要盒子的长宽减去边框的宽度

<!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>
        div {
            width: 180px;
            height: 180px;
            background-color: pink;
            border: 10px solid red;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

可以看到我设置的盒子大小本来是180*180，加了10的左右边框后，变成了200（这里不太精准199也差不多）

🔥2.1 内边距

padding属性用于设置内边距，即边框与内容之间的距离

包括padding-left、padding-right、padding-top、padding-bottom

复合写法

padding后面跟1个值，表示四个方向都是这个值

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div>
        盒子的内容
    </div>
</body>

</html>

2个值，表示上下为这个第一个值，左右为第二个值

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 5px 10px;
        }
    </style>
</head>

<body>
    <div>
        盒子的内容
    </div>
</body>

</html>

3个值，表示上为第一个值，左右为第二个值，下位第三个值

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 5px 10px 20px;
        }
    </style>
</head>

<body>
    <div>
        盒子的内容
    </div>
</body>

</html>

4个值，表示上右下左，按照顺时针顺序

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 5px 10px 20px 30px;
        }
    </style>
</head>

<body>
    <div>
        盒子的内容
    </div>
</body>

</html>

🔥2.2 内边距会影响盒子的实际大小

可以看到，盒子实际大小由于内边距的添加也发生了改变

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 5px 10px 20px 30px;
        }
    </style>
</head>

<body>
    <div>
        盒子的内容
    </div>
</body>

</html>

解决方法：在考虑内边距的情况下，用width/height减去添加的内边距大小

🔥2.3 padding实际应用新浪导航栏

可以发现导航栏中每个盒子内的字数不同，所以如果采用给每个盒子一样长宽的方式就不合理，因此需要为每个盒子设置相同的padding来把左右两边撑开一样的距离，高度都设置成一样的即可。

相关取值（后续会告知如何使用测量工具进行测量）

上边框3px，颜色#ff8500
下边框1px，颜色#edeef0
盒子高度为41px，背景颜色为#fcfcfc
文字颜色为#4c4c4c 
<!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 {
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            height: 41px;
            background-color: #fcfcfc;
            line-height: 41px;
        }

        .nav a {
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
            display: inline-block;
            height: 41px;
            padding: 0 20px;
        }

        .nav a:hover {
            background-color: #edeef0;
            color: #ff8500;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">新华网</a>

    </div>
</body>

</html>

🔥2.4 内边距不会撑开盒子的情况

如果盒子本身没有指定长宽属性，则此时padding不会撑开盒子大小

下图我指定了30px的padding，但是只指定了height200，所以盒子总高度会变成260，宽度应该与浏览器保持一致。

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

<body>
    <h1></h1>
</body>

</html>

这里我指定了宽度，那么加上padding的话，宽度应该会超过浏览器，导致滑动条的出现

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

<body>
    <h1></h1>
</body>

</html>

所以给我们的提示就是有时候不需要写长宽度，防止不必要的撑开。

诺坎普的风间
关注
专栏目录
css学习之CSS_padding内边距_新浪导航栏
weixin_44079801的博客
06-26 232
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS_padding内边距_新浪导航栏</title> <style> .nav{ height: 41px; background-color: #FCFCFC; border-top: 3px solid #FF8500; border-bottom: 1p
web前端学习145-148（盒子模型---案例：新浪导航案例-padding影响盒子好处，小米导航案例修改-padding影响盒子大小计算）
weixin_51249285的博客
01-16 747
文章目录1 盒子模型案例：新浪导航案例-padding影响盒子好处案例： 小米导航案例修改-padding影响盒子大小计算 1 盒子模型 案例：新浪导航案例-padding影响盒子好处 padding内边距可以撑开盒子,我们可以做非常巧妙的运用 因为每个导航栏里面的字数不一样多,我们可以不用给每个盒 子宽度了,直接给padding最合适 直接给每个盒子一个宽度不合理，因为每个盒子里面字数不同，会导致字与盒子间距不同，显得不合理。如果给每个盒子左右相等内边距，就会合理一些。 相关取值:（之后学ps学测量
CSS练习中|利用内边距padding制作一个简单的导航栏（初学者：代码+样例）
weixin_47788265的博客
07-17 422
目标效果： 要点：鼠标悬浮时显示灰色背景，字体由黑色变为橘色 注意背景大小与字数有关，所以不能<a>设置固定宽度，需要利用内边距来撑开 今日思考： 1.先做好结构（html）再抠细节 观察整体，一个<div>里面有六个<a>，写出基础结构 代码： <!DOCTYPE html> <html lan...
盒子模型(边框、内边距、外边距)、导航栏（HTML+CSS）
m0_69034993的博客
06-21 1983
盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器css盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框border、内边距padding、外边距margin和实际内容content(1)边框（border）border可以设置元素的边框，边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色语法格式： 属性 作用 border-width 定义边框粗细，单位是px boeder-style
DIV+CSS基础教程：导航条的制作详解
thewebcode
03-12 722
课程开始： 前三节课，我们知道了什么是“内容块状元素和内联元素”，以及XHTML+CSS布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动”，这次我们就利用这三个概念，来制作一款，经典的导航条，别看它其貌不扬，可是网上所有的导航条都可以再它的基础上修改而来哟~，厉害吧~！其实理论都是一样的，只要你能理解并学会这节课的内容，以后再困难的导航条你都可以很应对，EASY！...
盒子模型的内边距——padding
weixin_44004120的博客
01-16 3098
文章目录盒子模型的内边距——paddingpadding的基础属性padding复合属性padding会影响盒子实际大小如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 盒子模型的内边距——padding 盒子由border（边框）、content（内容）、padding（
七天学会h5和css3之盒子模型内边距和外边距（27）
weixin_45147894的博客
06-05 1317
先来练习一个题目：做一个新浪体育文本页面。,可能你现在并不能很好的做出这个效果，但是学习了本节后，你将很快的做出这个页面，具体代码和效果如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &lt
（三）盒子模型之内边距padding
weixin_47481102的博客
05-05 710
padding属性用于设置内边距，级边框与内容之间的距离。单位是px。 属性 作用 padding-left 左内边距 padding-right 有内边距 padding-top 上内边距 padding-bottom 下内边距 练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta h
CSS 盒子模型
酷爱前端的小陈博客
05-07 390
页面布局要学习三大核心, 盒子模型, 浮动 和 定位. 学习好盒子模型能非常好的帮助我们布局页面. 1.1 看透网页布局的本质 网页布局其实就是每一个大的盒子包小的盒子，然后一点点堆积起来，最后得以将网页搭建起来。 网页布局过程： 1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。 2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。 3. 往盒子里面装内容. 网页布局的核心本质： 就是利用 CSS 摆盒子。 1.2 盒子模型（Box Model）组成 .
CSS盒子模型—3
kkkk_1112的博客
09-25 299
一、CSS盒子模型 概念： 盒子模型四部分组成：内容、边框(border)、内边距(padding)、外边距（margin） 内容：盒子里面的文字和图片等元素组成内容 边框：指的是盒子的厚度 内边距：盒子内容与边框之间的距离 外边距：盒子与盒子之间的距离 1、边框 border 语法： border : border-width ||border-style ||border-color 属性 作用 border-width 定义边框粗细，单位px border-style 边框的样
前端习题之简易新浪导航栏
weixin_47481936的博客
11-08 669
简易新浪导航栏 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .nav{ height: 41px; border-top: 3px solid #ff8500; border-bottom: 1px solid #edeef0; b
el-collapse折叠面板组件中的面板内容是el-table，展开的时候高度异常
weixin_44735915的博客
09-09 3401
网上搜到的说法，element-ui折叠面板，el-collapse-item 中放一个 el-table, 展开的时候高度先是比表格内容高，然后闪一下突然回到正常的高度； 我自己是 el-table 的style属性加个底部内边距，具体数值调试一下。 ...
UI - 关于自动调整内边距问题的细节
coderMy的博客
10-24 2624
iOS 7 以后 , 苹果推出了 控制器 automaticallyAdjustsScrollViewInsets 属性 , 目的在于自动帮我们调整所有继承于 scrollView控件的内边距 ,比如tableView , collectionView . automaticallyAdjustsScrollViewInsets 默认开启 .具体例子1 : 默认情况下 automatically
CSS画出三角形的做法
最新发布
mingangel的博客
10-01 190
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
如何用JavaScript编写一个简单的计数器
Jiaberrr的博客
10-01 237
在网页开发中，计数器是一种常见的功能，它可以帮助我们记录点击次数、显示时间等。下面我将介绍如何在HTML页面中使用JavaScript实现一个基本的计数器。
CSS 的pointer-events属性，控制元素如何响应用户指针事件
读心悦
09-25 733
CSS中的属性是一个用于控制元素如何响应用户指针事件（如鼠标点击、触摸等）的重要属性。这个属性可以应用于任何HTML元素，以决定元素是否能够捕获和响应用户的交互事件。以下是关于。
【H2O2|全栈】关于CSS（7）CSS基础（六）
过期的H2O2的博客
09-26 1447
本系列博客将分享层叠样式表（CSS）有关的知识点。本期主要分享元素显示隐藏、透明度、溢出属性、滚动条、居中布局以及网页的部分结构的编写方法。不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（嘿嘿）。
23 vue3之详解scoped&样式穿透&vuecss新特性
qq_37550440的博客
09-27 123
PostCSS会给一个组件中的所有dom添加了一个独一无二的动态属性data-v-xxxx，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom, 从而达到了'样式模块化'的效果.vue中的scoped 通过在DOM结构以及css样式上加唯一不重复的标记:data-v-hash的方式，以保证唯一（而这个工作是由过PostCSS转译实现的），达到样式私有化模块化的目的。Vue 提供了样式穿透:deep() 他的作用就是用来改变。
HTML盒子模型使用内边距实现导航条
06-04
使用内边距实现导航条的方式是，在导航条所在的元素中设置一个固定的宽度和高度，然后在该元素中设置内边距(padding)来控制导航条的大小和位置。接下来，你可以在内边距区域内添加导航链接和样式来美化导航条。 ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

诺坎普的风间

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

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

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

打赏作者

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

抵扣说明：

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

余额充值