【web前端开发】超详细讲解CSS盒子模型

文章目录

  • 1.盒子模型介绍
  • 2.内容
  • 3.边框
  • 4.内边距
  • 5.⭐盒子大小计算
  • 6.⭐内减模式
  • 7.外边距
    • 外边距的合并
    • 外边距的塌陷
    • 行内元素的垂直外边距
  • 8.⭐清除默认样式
  • 9.⭐版心居中

1.盒子模型介绍

所有HTML元素可以看作盒子,CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒子模型结构图:
在这里插入图片描述

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

2.内容

作用:利用width和height属性设置内容区域的大小,默认是盒子内容区域的大小
属性值:width和height
取值:数字+px

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div {
          width: 200px;
           width: 200px;
      }
    </style>
</head>
<body>
    <div>这是一个div</div>
</body>
</html>

在浏览器中按F12进行检查,就可以看到盒子的内容区域正是我设置的 width: 200px; width: 200px;
在这里插入图片描述

3.边框

属性名:border (这是一个复合属性)
属性值:数字+px 线条的种类 颜色(不分先后顺序)

线条的种类有两个最常用的: solid(实线) dashed(虚线)
示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div {
          width: 200px;
          height: 120px;
          border: 10px solid red;
      }
    </style>
</head>
<body>
    <div>这是一个div</div>
</body>
</html>

效果:
在这里插入图片描述

border也可以给指定的方向设置边框

写法:border-方位名词

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div {
          width: 200px;
          height: 120px;
          border-left: 3px solid red;
      }
    </style>
</head>
<body>
    <div>这是一个div</div>
</body>
</html>

效果:
在这里插入图片描述

4.内边距

属性名:padding
取值:数字+px

padding可以当作复合属性来使用,可以给单独的方向设置内边距,最多取4个值(上下左右)

取值个数效果
1个给上下左右同时设置相同的内边距
4个分别对应盒子的 上 右 下 左 (顺时针的顺序)
3个对应盒子的 上 左右 下
2个对应盒子的 上下 左右

5.⭐盒子大小计算

盒子的大小只是内容区域的大小吗? -其实并不是
给盒子设置border和padding时,盒子会被撑大
示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      width: 100px;
      height: 60px;
      background-color: blue;
      border: 5px solid #000;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div>这是一个div</div>
</body>
</html>

效果:
在这里插入图片描述
这里的盒子就是被border和padding给撑大了

盒子的大小 = 内容区域的大小+2*border的大小+2*padding的大小

如果不想让盒子被撑大,有两种办法:

  1. 手动减去border和padding的大小(很麻烦,需要大量的计算)
  2. 使用内减模式(浏览器会自动帮我们计算多余的大小,在内容区域减去)

6.⭐内减模式

使用方法:给盒子设置 box-sizing: border-box; 即可

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      width: 100px;
      height: 60px;
      background-color: blue;
      border: 5px solid #000;
      padding: 10px;
      /*使用内减模式*/
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div>这是一个div</div>
</body>
</html>

效果:
在这里插入图片描述
这也是CSS3的盒子模型,如果不想让盒子被撑大,建议使用这种方式解决

7.外边距

外边距和内边距的写法一样,可以给四个方向都设置外边距,也可以给单独的方向设置外间距
取值的个数效果都是一样的.掌握内边距的写法,外边距就很容易了

接下来说外边距的两个问题:外边距的合并和外边距的塌陷

外边距的合并

垂直布局的块元素,上下的margin会合并

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      width: 100px;
      height: 60px;
      background-color: blue;
    }
    
    .one{
      margin-bottom: 20px;
    }
    .two{
      margin-top: 20px;
    }
  </style>
</head>
<body>
<div class="one">这是一个div</div>
<div class="two">这是一个div</div>
</body>
</html>

给一个div设置下外边距为20px,另一个上边距设置上外边距为20px
在这里插入图片描述
最后的显示效果,只有20px,而不是40px
在这里插入图片描述
这就是外边距的合并的合并现象

外边距合并时,会取两个margin的最大值
解决方法:尽量避免,只给一个盒子设置外边距就好

外边距的塌陷

互相嵌套的块级元素,子元素的margin-top 会作用在父元素上面

先看案例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .one{
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }
    .two{
      width: 100px;
      height: 100px;
      background-color: #4c4c4c;

      margin-top: 50px;
    }
  </style>
</head>
<body>
<div class="one">
  <div class="two"></div>
</div>
</body>
</html>

在这里插入图片描述

原本第二个div是设置了外边距的,但是并没有生效,反而是里面的子元素的div把父元素的div一起拉下来了,这就是外边距的塌陷现象

解决方法:

  • 给父元素设置border-top或者padding-top
  • ⭐给父元素设置overflow: hidden;
  • 设置浮动
  • 转成行内块元素

行内元素的垂直外边距

不能通过改变margin和padding来改变行内标签的垂直位置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .one{
      margin: 100px;
    }
  </style>
</head>
<body>
<span>这是一个span</span>
<br>
<span class="one">这是一个span</span>
</body>
</html>

效果:
在这里插入图片描述

行内元素的margin-top margin-bottom padding-top padding-bottom是不生效的

如果想改变行内元素的垂直位置可以使用行高 line-height

8.⭐清除默认样式

在默认情况下,有些标签是有默认的margin和padding的 ,因此一般做项目时要先把标签的默认样式给清除了

清除默认样式的方法:

margin: 0;
padding: 0;

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .one {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <p>这是一个p标签</p>
  <p>这是一个p标签</p>
  <p class="one">这是一个p标签</p>
  <p class="one">这是一个p标签</p>
</body>
</html>

效果:
在这里插入图片描述
还有其它的标签也有默认样式,如果要清除默认样式,可以使用通配符选择器

9.⭐版心居中

版心居中就是将内容在浏览器中居中显示,通常页面都是这么布局的

设置方法: margin: 0 auto;

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      width: 70%;
      height:500px;
      background-color: skyblue;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div>这是一个div</div>
</body>
</html>

效果:
在这里插入图片描述
根据需求可以调整盒子的高度,这样浏览器的主要内容就在浏览器居中显示了

感谢你的观看!希望这篇文章能帮到你!
专栏:《web前端开发》 在不断更新中,欢迎订阅!
“愿与君共勉,携手共进!”
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

C#多线程锁

C#多线程锁

背景&#xff1a;再一次测试中用户和我几乎同一时刻&#xff08;不知道谁先谁后&#xff0c;估计间隔在毫秒级&#xff09;操作了系统。 用户那边反馈显示的操作日志是我登录的信息。于是开始查找问题。首先排除了全局变量先后操作被覆盖的原因。首先A账户登录&#xff0c;然后…
阅读更多...
基于stm32mp157 linux开发板ARM裸机开发教程3：Cortex-A7 架构与工作模式（连载中）

基于stm32mp157 linux开发板ARM裸机开发教程3：Cortex-A7 架构与工作模式（连载中）

前言&#xff1a; 目前针对ARM Cortex-A7裸机开发文档及视频进行了二次升级持续更新中&#xff0c;使其内容更加丰富&#xff0c;讲解更加细致&#xff0c;全文所使用的开发平台均为华清远见FS-MP1A开发板&#xff08;STM32MP157开发板&#xff09; 针对对FS-MP1A开发板&…
阅读更多...
用 ChatGPT 尝试 JavaScript 交互式学习体验，有用但不完美

用 ChatGPT 尝试 JavaScript 交互式学习体验，有用但不完美

很好&#xff0c;但还不能取代专家导师&#xff0c;有时还会犯错&#xff01;ChatGPT 教小狗编程&#xff08; Midjourney 创作&#xff09;GPT-4刚刚发布&#xff0c;相较于GPT-3.5&#xff0c;它有显著的增强功能。其中之一是它在更长时间的交互和更大的提示下&#xff0c;能…
阅读更多...
Pytorch环境配置 完整流程 从CUDA和cuDNN到Torch安装

Pytorch环境配置 完整流程 从CUDA和cuDNN到Torch安装

目录1. 安装CUDA2. 安装cuDNN3. 安装Pytorch1. 安装CUDA 确认需要的CUDA版本 nvidia-smi 下载CUDA.exe CUDA下载地址 结合自己电脑的情况下载对印度个版本 安装 双击后安装&#xff0c;可以修改安装路径&#xff0c;我安装在了D盘 安装方式选择自定义 全部勾选 这里如果电脑没…
阅读更多...
nnAudio的简单介绍

nnAudio的简单介绍

官方实现 https://github.com/KinWaiCheuk/nnAudio&#xff1b; 论文实现&#xff1a; nnAudio: An on-the-Fly GPU Audio to Spectrogram Conversion Toolbox Using 1D Convolutional Neural Networks&#xff1b; 以下先对文章解读&#xff1a; abstract 在本文中&#x…
阅读更多...
美国站针对磁铁产品新政策16 CFR 1262详解

美国站针对磁铁产品新政策16 CFR 1262详解

近日&#xff0c;亚马逊美国站公布磁铁产品&#xff08;不包括玩具&#xff09;的新政策更新公告&#xff0c;公告如下&#xff1a; 公告显示&#xff0c;由于美国消费品安全委员会&#xff08;US Consumer Product Safety Commission&#xff09;出台了新的安全规定&#xff…
阅读更多...
海王算法（看完不会变成海王）

海王算法（看完不会变成海王）

&#x1f4a7;学了海王算法会变成海王吗&#xff0c;它又能解决什么样的问题呢&#xff1f;&#x1f4a7; &#x1f337; 仰望天空&#xff0c;妳我亦是行人.✨ &#x1f984; 个人主页——微风撞见云的博客&#x1f390; &#x1f433; 数据结构与算法专栏的文章图文…
阅读更多...
内存池解释及线程池(Linux)实现

内存池解释及线程池(Linux)实现

1.内存池1.什么是内存池内存池是一种内存分配方式。在真正使用内存之前&#xff0c;先申请分配一定数量的、大小相等的内存块留作备用。当有新的内存需求时&#xff0c;就从内存池中分出一部分内存块&#xff0c;若内存块不够再继续申请新的内存。使用内存池的优点有&#xff1…
阅读更多...
Pyspark_SQL3

Pyspark_SQL3

Pyspark 注&#xff1a;大家觉得博客好的话&#xff0c;别忘了点赞收藏呀&#xff0c;本人每周都会更新关于人工智能和大数据相关的内容&#xff0c;内容多为原创&#xff0c;Python Java Scala SQL 代码&#xff0c;CV NLP 推荐系统等&#xff0c;Spark Flink Kafka Hbase Hi…
阅读更多...
会声会影2023新版本功能详情讲解

会声会影2023新版本功能详情讲解

会声会影2023Corel VideoStudio一款功能丰富的视频编辑软件。会声会影2023简单易用&#xff0c;具有史无前例的强大功能&#xff0c;拖放式标题、转场、覆叠和滤镜&#xff0c;色彩分级、动态分屏视频和新增强的遮罩创建器&#xff0c;超越基本编辑&#xff0c;实现影院级效果。…
阅读更多...
【Django 网页Web开发】12. 实战项目：分页组件的封装 面向接口编程（05）（保姆级图文）

【Django 网页Web开发】12. 实战项目：分页组件的封装 面向接口编程（05）（保姆级图文）

目录1. 对象的方式使用分页组件2. 项目结构3. 编写pagination.py3.1 pagination.py3.2 view.py4. bug修改之&#xff1a;url中搜索关键词q和page4.1 构造url的一个雏形4.2 修改我们的分页组件4.3 搜索小bug5. 应用分页组件&#xff0c;几行代码实现用户管理分页5.1 批量创建用户…
阅读更多...
『 MySQL篇 』：MySQL 索引相关问题

『 MySQL篇 』：MySQL 索引相关问题

目录 一 . 认识索引 二. 索引的数据结构 1 . B Tree vs Hash 2 . B Tree vs 二叉树/红黑树 3 . B 树 vs B树 三. 索引的使用 1. 索引分类 2. 索引用法 一 . 认识索引 当我们在查询一本书中的内容时 , 你会选择翻页每一页去查询呢 ? 还是说按照书的目录去找 ? 答案是…
阅读更多...
springmvc（一）

springmvc（一）

SpringMVC是隶属于Spring框架的一部分&#xff0c;主要是用来进行Web开发&#xff0c;是对Servlet进行了封装。 对于SpringMVC我们主要学习如下内容: SpringMVC简介 请求与响应 REST风格 SSM整合(注解版) 拦截器 SpringMVC是处于Web层的框架&#xff0c;所以其主要的作用就是用…
阅读更多...
微信小程序开发：微信小程序生命周期总结

微信小程序开发：微信小程序生命周期总结

前言 在微信小程序开发中&#xff0c;关于微信小程序API的使用是必备技能&#xff0c;但是关于微信小程序的生命周期也是首先要了解和掌握的知识点。尤其是现在的前端开发领域&#xff0c;关于前端的各种框架和技术都要会&#xff0c;而且微信小程序的语法就是JS的翻版&#xf…
阅读更多...
Java 线程安全

Java 线程安全

一、什么是线程安全 当多个线程访问共享资源时&#xff0c;每个线程都会各自对共享资源进程操作&#xff0c;导致数据不一致&#xff0c;造成程序不能正确的得到结果&#xff0c;此时需要让多个线程排队访问共享资源&#xff0c;让线程安全&#xff0c;才能保证数据安全的被访问…
阅读更多...
Jdk动态代理和Cglib动态代理的区别

Jdk动态代理和Cglib动态代理的区别

一&#xff1a; 前言&#xff1a; 代理模式分为 静态代理 和 动态代理&#xff0c;今天我要讲的是动态代理的两种常见、也是被广泛使用的实现方式-------jdk动态代理 和 Cglib动态代理 二&#xff1a;Jdk动态代理实现分析&#xff1a; 结构示意图如下&#xff0c;我定义了一…
阅读更多...
FrIf-FrIf_Transmit发送流程【配置参数FrIfImmediate:立即传输还是解耦传输】和代码分析

FrIf-FrIf_Transmit发送流程【配置参数FrIfImmediate:立即传输还是解耦传输】和代码分析

总目录链接==>> AutoSAR入门和实战系列总目录 文章目录 1 FrIf_Transmit中的 PDU 的配置的传输模式2 代码分析1 FrIf_Transmit中的 PDU 的配置的传输模式 每当FrIf的上层模块想要请求特定 PDU 的传输时，它都会调用 FrIf_Transmit 函数。调用 FrIf_Transmit的时候传递…
阅读更多...
C语言--文件操作

C语言--文件操作

目录前言什么是文件程序文件数据文件文件指针FILE结构的维护文件的打开和关闭文件的打开方式文件的顺序读写fputcfgetcfputsfgetsfprintffscanf文件流 标准输入/输出流sscanf和sprintf前言 在讲文件操作之前&#xff0c;我们先来思考这个问题&#xff1a; 我们为什么要使用文件…
阅读更多...
大数据技术之Spark（一）——Spark概述

大数据技术之Spark（一）——Spark概述

大数据技术之Spark&#xff08;一&#xff09;——Spark概述 文章目录前言一、Spark基础1.1 Spark是什么1.2 Spark VS Hadoop1.3 Spark优势及特点1.3.1 优秀的数据模型和丰富计算抽象1.3.3 spark的特点1.4 Spark 运行环境1.5 Spark运行架构1.5.1 Driver1.5.2 Executor1.5.3 Mas…
阅读更多...
Java设计模式-4、适配器模式

Java设计模式-4、适配器模式

适配器模式 在我们的应⽤程序中我们可能需要将两个不同接⼝的类来进⾏通信&#xff0c;在不 修改这两个的前提下我们可能会需要某个中间件来完成这个衔接的过程。 这个中间件就是适配器。所谓适配器模式就是将⼀个类的接⼝&#xff0c;转换成客 户期望的另⼀个接⼝。它可以让原…
阅读更多...
最新文章

Copyright @ 2022~2023