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

news2025/3/2 3:07:51

页面布局的三大核心：

  • 盒子模型
  • 浮动
  • 定位

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/38704.html

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

相关文章

518. 零钱兑换 II【完全背包：求组合数】

518. 零钱兑换 II【完全背包：求组合数】

518. 零钱兑换 II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位…
阅读更多...
C++11 右值，右值引用，移动构造，移动赋值

C++11 右值，右值引用，移动构造，移动赋值

目录 一、左值&#xff0c;左值引用&#xff0c;右值&#xff0c;右值引用的相关概念&#xff1a; 1. 什么是左值&#xff0c;什么是左值引用&#xff1f; 2. 什么是右值&#xff0c;什么是右值引用&#xff1f; 3. 右值的属性是右值&#xff0c;右值引用的属性是左值 4. …
阅读更多...
棒子老虎鸡-第12届蓝桥杯Scratch选拔赛真题精选

棒子老虎鸡-第12届蓝桥杯Scratch选拔赛真题精选

[导读]&#xff1a;超平老师计划推出Scratch蓝桥杯真题解析100讲&#xff0c;这是超平老师解读Scratch蓝桥真题系列的第86讲。 蓝桥杯选拔赛每一届都要举行4~5次&#xff0c;和省赛、国赛相比&#xff0c;题目要简单不少&#xff0c;再加上篇幅有限&#xff0c;因此我精挑细选…
阅读更多...
研究生有限元仿真应用中存在的问题与对策

研究生有限元仿真应用中存在的问题与对策

作者&#xff1a;尚晓江 导读&#xff1a;有限元分析软件作为计算工具&#xff0c;在科研和工程领域都有广泛应用&#xff0c;而多数用户是在研究生阶段开始接触和使用这些计算软件的。本文以ANSYS结构分析为例&#xff0c;对现阶段研究生应用有限元分析软件的现状和存在的问题…
阅读更多...
无人机设计仿真--在Isight平台上进行的基于CST参数化+Xfoil的无人机翼型优化

无人机设计仿真--在Isight平台上进行的基于CST参数化+Xfoil的无人机翼型优化

作者&#xff1a;Graychen 一、工程背景 翼型的选型和设计是飞行器气动设计中的一项基础性工作&#xff0c;翼型对飞行器的气动性能具有根本性的影响。现在高性能飞行器已不再从翼型库中选择适用翼型后直接使用&#xff0c;而是以现有翼型作为基准翼型进行气动优化&#xff…
阅读更多...
java基本语法 下

java基本语法 下

目录 运算符 运算符&#xff1a;算术运算符 运算符&#xff1a;赋值运算符 运算符&#xff1a;比较运算符 运算符&#xff1a;逻辑运算符 运算符&#xff1a;三元运算符 运算符的优先级 程序流程控制 概念 顺序结构 if-else结构 switch-case结构 循环结构 循环结构…
阅读更多...
Unity视差贴图多实现对比和改进

Unity视差贴图多实现对比和改进

视差贴图多种实现方式对比和改进视差贴图视差映射陡峭视差映射视差遮蔽映射迭代视差映射-kerry视差贴图 参考 与法线贴图相同&#xff0c;可以模拟出物体得深度感&#xff0c;同时它得改进是能够随着视角得偏移显示不同得深度感&#xff0c;使得显示更加真实。 由于采样高度…
阅读更多...
代码随想录刷题| 多重背包理论基础、背包问题的总结

代码随想录刷题| 多重背包理论基础、背包问题的总结

目录 多重背包理论基础 多重背包的问题 多重背包的解法 多重背包的代码 背包问题的总结 01背包 完全背包 多重背包 多重背包理论基础 多重背包的问题 有N种物品和一个容量为V 的背包。第i种物品最多有Mi件可用&#xff0c;每件耗费的空间是Ci &#xff0c;价值是Wi 。…
阅读更多...
单身福利专场, Python采集某相亲网站美女数据

单身福利专场, Python采集某相亲网站美女数据

前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 现在&#xff0c;广大年轻人到了一定年纪&#xff0c;一定会引来父母的念叨 不是让相亲就是让结婚的&#xff0c;与其父母念叨&#xff0c;不如自己找一个 到时候问起来&#xff0c;就说再接触呢~~ 今天我们就来用python…
阅读更多...
NestJS学习：使用session实现登录验证

NestJS学习：使用session实现登录验证

参考 大佬的视频教程&#xff1a;nestjs session案例 大佬的博客地址&#xff1a;小满nestjs&#xff08;第九章 nestjs Session&#xff09; 在学习某些知识时如果有大佬的视频教程与文档真的是太爽了&#xff0c;能够学习到好多新知识。 nest后台 session session 是服务…
阅读更多...
目标检测算法——3D公共数据集汇总（附下载链接）

目标检测算法——3D公共数据集汇总（附下载链接）

>>>深度学习Tricks&#xff0c;第一时间送达<<< &#x1f680;&#x1f680;&#x1f680;近期&#xff0c;小海带在空闲之余&#xff0c;收集整理了一批3D公共数据集供大家参考。 整理不易&#xff0c;小伙伴们记得一键三连喔&#xff01;&#xff01;&…
阅读更多...
十个值得珍藏的正则表达式

十个值得珍藏的正则表达式

正则表达式常学常忘&#xff0c;记规则不如记例子&#xff0c;记多不如记精&#xff0c;记例子就记最经典的。下面是本人珍藏的十个有用的正则表达式&#xff0c;不吝分享&#xff0c;以飨读者。 正则表达式要点 小括号&#xff1a;代表分组 中括号&#xff1a;代表集合 大括号…
阅读更多...
回归分析(1)-回归分析的基本概念

回归分析(1)-回归分析的基本概念

1.回归方程 由于x是可控的非随机变量&#xff0c; 而Y 是一个与x有关的随机变量&#xff0c;因此&#xff0c;直接研究变量Y与x之间的相关关系是困难的&#xff0e; 如果注意到随机变量Y的数学期望反映了随机变量Y的平均取值&#xff0c;因此&#xff0c; 可考虑研究EY与x之间的…
阅读更多...
第六章 支持向量机

第六章 支持向量机

6.1 间隔与支持向量 给定一个训练样本集&#xff0c;分类学习最基本的想法就是基于训练集D在样本空间中找到一个划分超平面。但是这个划分超平面也是很多的&#xff0c;如下图所示 直观上应该去找两类样本中最中间的划分超平面&#xff0c;因为该划分超平面对训练样本局部扰动…
阅读更多...
与分类有关的一种时序优先现象

与分类有关的一种时序优先现象

(A&#xff0c;B)---2*30*2---(1,0)(0,1) 用网络分类A和B&#xff0c;让A由两张图片组成&#xff08;0&#xff0c;0&#xff09;&#xff08;0&#xff0c;1&#xff09;&#xff0c;让B由两张图片组成&#xff08;1&#xff0c;0&#xff09;&#xff08;0&#xff0c;0&…
阅读更多...
(附源码)计算机毕业设计JavaJava毕设项目租车网站

(附源码)计算机毕业设计JavaJava毕设项目租车网站

项目运行 环境配置&#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/…
阅读更多...
Ubuntu22.04：设置Samba服务

Ubuntu22.04：设置Samba服务

Samba服务可以实现在主机间共享文件与Windows的共享通用。 Ubuntu22.04可以按照如下步骤安装并开启Samba服务&#xff1a; 1.安装samba sudo apt install samba 2.创建一个用于共享的目录(路径和路径名可以自行决定&#xff09; mkdir samba 3.设置共享目录的访问权限 s…
阅读更多...
Prometheus的remotewrite for java

Prometheus的remotewrite for java

1、增加参数重启prometheus 修改 prometheus启动参数 - "--enable-featureremote-write-receiver" 重启 prometheus 2、下载案例 GitHub - bprasen/remotewrite 3、迁移 将案例中的代码复制到springboot/springcloud中 pom中增加 <!-- prometheus remote writ…
阅读更多...
Windows OpenGL 图像阴影

Windows OpenGL 图像阴影

目录 一.OpenGL 图像阴影 1.原始图片2.效果演示 二.OpenGL 图像阴影源码下载三.猜你喜欢 零基础 OpenGL ES 学习路线推荐 : OpenGL ES 学习目录 >> OpenGL ES 基础 零基础 OpenGL ES 学习路线推荐 : OpenGL ES 学习目录 >> OpenGL ES 特效 零基础 OpenGL ES 学习…
阅读更多...
【机器学习项目实战10例】（一）：利用线性回归实现股票预测分析

【机器学习项目实战10例】（一）：利用线性回归实现股票预测分析

💥 项目专栏：【机器学习项目实战10例】 文章目录 一、利用线性回归实现股票预测分析二、加载股票数据三、将数据进行标准化四、形成训练数据五、加载数据集六、构建线性回归模型七、精度测试八、网格搜索九、绘制结果一、利用线性回归实现股票预测分析 股价预测其实是一个较…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023