10.前端笔记-CSS-盒子模型-border和padding

news2025/2/26 14:53:07

页面布局的三大核心：

  • 盒子模型
  • 浮动
  • 定位

1、盒子模型

1.1 盒子模型组成

盒子模型本质还是一个盒子，包括边框border、外边距margin、内边距padding和实际内容content
在这里插入图片描述

1.1.1 边框border

组成

组成：颜色border-color、边框宽度border-width、样式（实线、虚线）border-style

属性作用
border-width边框粗细，单位px
border-style边框样式，none\solid\dashed\dotted
border-color边框颜色

边框的复合写法：
没有先后顺序

border:1px solid red;

<!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: 100px;
            height: 100px;
            
        }
        .div1{
            border-width: 2px;
            border-color: red;
            border-style: dashed;
        }
        .div2{
            border:2px green solid;
        }

    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

在这里插入图片描述

按照盒子四条边分别设置边框属性

top\left\right\bottom

border-top:1px solid red;//只设置上边框

练习：
给一个200*200的盒子，设置上边框为红色，其余边框为蓝色

<!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;
            
        }
        .div2{
            border:2px blue solid;
            border-top:red 2px solid;
        }

    </style>
</head>
<body>
    <div class="div2"></div>
</body>
</html>

在这里插入图片描述

表格细线边框

border-collapse: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: 400px;
            height: 100px;
        }
        th{
            height: 25px;
        }
        table,
        td,
        th {
            border: 1px red solid;
            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>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>西游记</td>
                <td>up</td>
                <td>456</td>
            </tr>
            <tr>
                <td>2</td>
                <td>乌合之众</td>
                <td>up</td>
                <td>333</td>
            </tr>
            <tr>
                <td>3</td>
                <td>三体</td>
                <td>down</td>
                <td>123</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

在这里插入图片描述

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

因此要保证盒子实际做出来的效果与效果图一致：
测量效果图边框时，不量边框。或者加上边框减去边框的距离

1.1.2 内边距padding

用来设置内边距，即边框与内容之间的距离

padding-top:上内边距
padding-bottom:下内边距
padding-left:左内边距
padding-right:右内边距

练习：

<!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-top: 20px;
            padding-left: 20px;
            padding-bottom: 20px;
            padding-right: 20px;
        }
    </style>
</head>
<body>
    <div>盒子模型的内容content</div>
</body>
</html>

在这里插入图片描述

padding复合属性写法

顺序：上右下左

padding:5px;//上下左右
padding:5px 10px;//上下是5，左右是10px
padding:5px 10px 20px;//上-5，左右-10，下-20
padding:5px 10px 20px 30px;//上-5，右-10，下-20 左30

padding会影响盒子实际大小

如果盒子已经有了宽度和高度设置，指定padding内边距时，会撑大盒子
因此要保证盒子实际做出来的效果与效果图一致，需要让width、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>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            padding-top: 20px;
            padding-left: 20px;
            padding-bottom: 20px;
            padding-right: 20px;
        }
    </style>
</head>
<body>
    <div>盒子模型的内容content</div>
</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>
        .nav {
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            height: 41px;
            background-color: #fcfcfc;
            line-height: 41px;
           
        }
        .nav a{
            display: inline-block;
            height: 41px;
            padding: 0 20px;
            font-size: 12px;
            text-decoration: none;
            color:#4c4c4c;
        }
        .nav a:hover{
            color: #ff8500;
            background-color: #eee;
        }
    </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使用的特殊场景

如果盒子本身没有指定width/height属性，padding可以改变元素的宽度和高度

块级元素：

1、
宽度：没有设置时，可以继承父类的宽度（不受padding影响）
高度：不能继承父类高度（由padding控制）
父类设置宽度300，高度200。
子类没有设置宽高，设置了padding,宽度是300，高度=padding*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: 300px;
            height: 200px;
            background-color: #3e3e3e;
        }
        p{
            background-color: green;
            /* height:100px;
            width: 100%; */
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

在这里插入图片描述
2、
宽度：子类设置宽度时，取设置的宽度+padding2（受padding影响）
高度：子类设置高度，取设置的高度+padding2
父类设置宽度300，高度200。
子类没有设置宽高，设置了padding,宽度是300，高度=padding*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: 300px;
            height: 200px;
            background-color: #3e3e3e;
        }
        p{
            background-color: green;
            width: 100%;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

在这里插入图片描述

行内元素

有内容：
宽度：不受width属性的限制，宽度由行内元素内容和padding决定。宽度=行内元素宽度+padding*2
高度：不受height属性的限制，有默认高度，且可以由line-height和font-size改变高度

<!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>
        body{
            width: 500px;
            height: 500px;
        }
    
        span{
            padding: 20px;
            background-color: green;
            font-size: 30px;

        }
        a{
            background-color: coral;
            padding: 0px 30px;
            font-size: 10px;

        }
    </style>
</head>
<body>
    <span>有内容</span>
    <a href="#">有内容</a>
</body>
</html>

在这里插入图片描述
没有内容：
宽度：不受width属性的限制，没有内容时。宽度=padding2
高度：不受height属性的限制，有默认高度，没有设置line-height和font-size时，高度=padding2+默认高度

<!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>
        body{
            width: 500px;
            height: 500px;
        }
    
        span{
            padding: 20px;
            background-color: green;
        }
        a{
            background-color: coral;
            padding: 0px 30px;

        }
    </style>
</head>
<body>
    <span></span>
    <a href="#"></a>
</body>
</html>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/39433.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

信息论与编码：线性分组码与性能参数

信息论与编码：线性分组码与性能参数

文章目录1.1 线性分组码(n,k)定义1.2 信道编码性能参数1.3基本线性分组码a.奇偶监督码b.恒比码c.汉明码1.4 差错控制类型对信道编码的要求1.5信道编码主要涉及的数学知识&#xff1a;有限域运算、矩阵运算1.1 线性分组码(n,k)定义 线性分组码是由 (n, k) 形式表示。编码器将一…
阅读更多...
WEB安全技能树-安全漏洞类型-命令执行漏洞

WEB安全技能树-安全漏洞类型-命令执行漏洞

题目类型 环境&#xff1a;CentOSApachePHPMySQL 题目&#xff1a;ping主机 考点分析 1.过滤 ; && || 等多条命令连接符&#xff1b; 2.过滤cat more less等文件读取命令&#xff1b; 解题思路 第一步 ping 127.0.0.1 看看命令是否能够正确执行 linux如果不指定-…
阅读更多...
【Java第35期】：Bean的生命周期

【Java第35期】：Bean的生命周期

作者&#xff1a;有只小猪飞走啦 博客地址&#xff1a;https://blog.csdn.net/m0_62262008?typeblog 内容&#xff1a;1&#xff0c;这篇博客要分析Bean生命周期有几个阶段? 2&#xff0c;每个阶段的效果是什么? 3&#xff0c;PostConstruct 和 PreDestroy 各自的效果是什…
阅读更多...
如果线性变换可以模仿

如果线性变换可以模仿

&#x1f37f;*★,*:.☆欢迎您/$:*.★* &#x1f37f; 正文 如何模仿一个 行为 假设这个行为是线性变换 A 通过权重w 变换为 B 假设可以通过 如下方式 模仿 A变换到B 线性变换 让 C 变换 D首先 计算A C 的距离 dx 计算 B D 的距离 dy假设 w 是通过等差求解权重的方…
阅读更多...
(附源码)计算机毕业设计Java搬家预约系统

(附源码)计算机毕业设计Java搬家预约系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; Springboot mybatis Maven Vue 等等组成&#xff0c;B/…
阅读更多...
Elon Musk 与开发者分享他的第一份代码评审

Elon Musk 与开发者分享他的第一份代码评审

Elon Musk 比以往任何时候都更致力于 Twitter 2.0 的成功&#xff0c;与开发者分享他的第一份代码评审。 原文 https://ssaurel.medium.com/more-committed-than-ever-to-making-twitter-2-0-succeed-elon-musk-shares-his-first-code-review-a565e8df5e2f 前言 Elon Musk 也是…
阅读更多...
第8讲：Python中列表的概念与基本使用

第8讲：Python中列表的概念与基本使用

文章目录1.列表的概念1.什么是列表1.2.列表中元素的索引概念2.列表的简单定义3.获取列表中某个元素的索引3.1.如何获取列表中某个元素的索引3.2.各种场景获取列表中元素的索引4.使用运算符in检查列表中是否存在指定元素1.列表的概念 1.什么是列表 Python中的列表其实就是其他…
阅读更多...
骨传导蓝牙耳机哪个品牌好，骨传导蓝牙耳机品牌推荐

骨传导蓝牙耳机哪个品牌好，骨传导蓝牙耳机品牌推荐

在选择骨传导耳机时还不知道选择什么品牌好&#xff1f;下面小编就给大家推荐几款做的不错的骨传导耳机&#xff0c;大家要注意&#xff0c;在选择骨传导耳机时&#xff0c;还是要选择一些较大的骨传导品牌&#xff0c;这样无论是耳机体验还是售后服务都有保证。 1、南卡Runne…
阅读更多...
【机器学习入门项目10例】（八）：贝叶斯网络-拼写检查器

【机器学习入门项目10例】（八）：贝叶斯网络-拼写检查器

🌠 『精品学习专栏导航帖』 🐳最适合入门的100个深度学习实战项目🐳🐙【PyTorch深度学习项目实战100例目录】项目详解 + 数据集 + 完整源码🐙🐶【机器学习入门项目10例目录】项目详解 + 数据集 + 完整源码🐶🦜【机器学习项目实战10例目录】项目详解 + 数据集 +
阅读更多...
pagination分页插件的getResult明明有数据，但是getTotal方法为0

pagination分页插件的getResult明明有数据，但是getTotal方法为0

最近把之前毕设的SSM项目改成SpringBoot项目时遇到了明明后端数据库查询到了数据&#xff0c;但是page的getTotal方法却是0的bug 解决办法&#xff1a; 先导入需要的依赖&#xff0c;这里注意ssm项目的依赖和SpringBoot的依赖是不一样的&#xff0c;这个只要导入极少启动依赖…
阅读更多...
视频 | 扩增子文库拆分和16S序列合并

视频 | 扩增子文库拆分和16S序列合并

点击阅读原文跳转完整教案。基因组中的趣事&#xff08;二&#xff09;- 最长的基因2.7 million&#xff0c;最短的基因只有8 nt却能编码基因组中的趣事&#xff08;一&#xff09;&#xff1a;这个基因编码98种转录本1 Linux初探&#xff0c;打开新世界的大门1.1 Linux系统简介…
阅读更多...
Strimzi Kafka Bridge(桥接)实战之二：生产和发送消息

Strimzi Kafka Bridge(桥接)实战之二：生产和发送消息

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码)&#xff1a;https://github.com/zq2599/blog_demos 本篇概览 本文是《Strimzi Kafka Bridge(桥接)实战之》系列的第二篇&#xff0c;咱们直奔bridge的重点&#xff1a;常用接口&#xff0c;用实际操作体验如何用…
阅读更多...
27. Ubuntu 20.04 开机自动挂载文件/etc/fstab

27. Ubuntu 20.04 开机自动挂载文件/etc/fstab

自动挂载文件/etc/fstab1.fstab2. 参数含义3.开机自动挂载3.1 查看要挂载的磁盘UUID3.2 向fstab文件中添加不同于热插拔的设备&#xff0c;对于硬盘可能需要长期挂载在系统下&#xff0c;所以如果每次开机都去手动mount是非常痛苦的&#xff0c;当然Ubuntu系统的GNOME桌面自带的…
阅读更多...
Map学习笔记——深入理解ConcurrentHashMap

Map学习笔记——深入理解ConcurrentHashMap

ConcurrentHashMap 是我们日常开发中使用频率最高的并发容器之一了&#xff0c;具有如下特点: 基于JDK8分析 存储结构和HashMap一样&#xff0c;都是数组 链表 红黑树是线程安全的容器&#xff0c;底层是通过CAS自旋 sychronized 来保证的key 和 value 都不允许为空&#xf…
阅读更多...
【华为OD机试真题 python】叠积木【2022 Q4 | 200分】

【华为OD机试真题 python】叠积木【2022 Q4 | 200分】

■ 题目描述 【叠积木】 有一堆长方体积木，它们的长度和宽度都相同，但长度不一。 小橙想把这堆积木叠成一面墙，墙的每层可以放一个积木，也可以将两个积木拼接起来，要求每层的长度相同。 若必须用完这些积木，叠成的墙最多为多少层？ 如下是叠成的一面墙的图示，积木仅…
阅读更多...
太强了，全面解析缓存应用经典问题

太强了，全面解析缓存应用经典问题

1、前言 随着互联网从简单的单向浏览请求&#xff0c;发展为基于用户个性信息的定制化以及社交化的请求&#xff0c;这要求产品需要做到以用户和关系为基础&#xff0c;对海量数据进行分析和计算。对于后端服务来说&#xff0c;意味着用户的每次请求都需要查询用户的个人信息和…
阅读更多...
jdk-synchronized源码学习

jdk-synchronized源码学习

synchronized介绍java中jdk1.6之前和jdk1.6及之后synchronized完全不一样。1.6之前直接上来都是重量级锁导致java的性能很低效&#xff0c;而1.6及之后甲骨文公司对其进行优化&#xff0c;通过一个锁的升级过程从而来支持一些非复杂的场景。那么本文主要是针对synchronized的源…
阅读更多...
Java并发-ThreadLocal的使用

Java并发-ThreadLocal的使用

ThreadLocal 概述 当使用 ThreadLocal 维护变量时&#xff0c;ThreadLocal 为每个使用该变量的线程提供独立的变量副本&#xff0c;所以每一个线程都可以独立地改变自己的副本&#xff0c;而不会影响其它线程所对应的副本。当多个线程操作这个变量时&#xff0c;实际操作的是自…
阅读更多...
python实现熵权法

python实现熵权法

原文&#xff1a;https://mp.weixin.qq.com/s/vPNPdbZy11q1qsfEz9etZQ 1 熵权法简介 熵源自于希腊语 “ 变化 ” 表示变化的容量&#xff0c;德国物理学家克劳修斯为了将热力学第二定律格式化而引入熵的概念 。 熵的概念来源于热力学&#xff0c;是用来描述过程的不可逆现象…
阅读更多...
sql注入手法详解

sql注入手法详解

sql定义 sql--结构化查询语句 sql注入&#xff1a;首先我们通过前端将我们的payload(恶意代码)传送到后台服务器 传送到后台以后 我们提交的payload拼接到sql语句中 作为sql语句的一部分被执行 从而导致数据库又被脱库甚至删库的风险 使得数据库受损 sql注入手法 sql注入可…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023