CSS基础:盒子模型详解

你好,我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃,大专生,一枚程序媛,感谢关注。回复 “前端基础题”,可免费获得前端基础 100 题汇总,回复 “前端工具”,可获取 Web 开发工具合集

271篇原创内容-gz.h

后台回复“前端工具”可获取开发工具,持续更新中

后台回复“前端基础题”可得到前端基础100题汇总,持续更新中

后台回复“前端电子书”可获取20+本精选电子书

前言

盒模型时,也叫"框模型",指的是 CSS 中元素的布局方式和尺寸计算规则。盒模型定义了一个元素在页面布局中所占的空间,包括了元素的内容、内边距、边框和外边距,没错,而这些,正是我们前几篇文所提到的。比如:

CSS 基础:border 的 3 个基础属性和简写方法

CSS基础:margin属性4种值类型,4个写法规则详解

CSS基础:最详细 padding的 4 种用法解析

CSS基础:width,height尺寸属性详解

理解盒模型对于前端开发者来说至关重要,它可以控制元素的尺寸和布局,美化页面样式,是实现各种复杂页面布局的基础。

那我们一起来看看吧。

CSS 盒模型

盒模型的主要组成部分包括以下几个方面:

  1. 内容区域(Content): 指的是元素内部的实际内容,比如文字、图片或其他嵌套的元素。内容区域的大小由元素的 width 和 height 属性决定。

  2. 内边距(Padding): 内边距是内容区域与边框之间的空间,用于控制元素内部内容与边框之间的距离。可以使用 padding 属性来设置内边距的大小,是透明的。

  3. 边框(Border): 边框是围绕在内容区域和内边距外部的线条,用于界定元素的边界。可以使用 border 属性来设置边框的样式、宽度和颜色。

  4. 外边距(Margin): 外边距是边框外部的空白区域,用于控制元素与其他元素之间的距离。可以使用 margin 属性来设置外边距的大小,是透明的。

如图所示:

图片

在 HTML 中,每个元素都具有一个盒模型,这个盒模型包括了内容区域、内边距、边框和外边距。当我们在页面上选中一个元素的盒模型任一部分时,会看到相应的盒模型边界,这有助于我们直观地了解元素在页面中的布局情况。

通过这种实践观察调试,即使新手可以更好地理解盒模型的概念,并在编写页面和排查问题时更加得心应手。所以,建议你可以多写多观察其构成,加深对盒模型的认识和掌握。

需要注意的是:背景(background)属性可以应用于整个盒模型,包括内容区域、内边距、边框和外边距。

CSS 重置

我们有没有发现一个问题?当写一个新页面的时候,在页面上始终无法从头写,而是有一些间距?那我们在 google 浏览器检查一下看下这个是什么,然后呢就发现,body 标签 的盒模型始终有个 margin:8px 的值?对吧,如下图。

图片

这些啊,是浏览器对元素的默认样式,像 bug 一样对吧。其实啊,不只是 body 标签,很多标签默认都有一些盒模型的值,那我们如果想要清除这些默认浏览器的样式,怎么做呢?

只需要在 CSS 的开头,加上这个:

* {margin: 0;padding: 0;
}

整体代码如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>boxModel</title><style>* {margin: 0;padding: 0;}</style></head><body><h1>大标题</h1><h2>二标题</h2><p>这是段落</p><ul><li>li-1</li><li>li-2</li><li>li-3</li></ul></body>
</html>

那效果就如下图了:

图片

这样,是不是就好了。

其实,重置 CSS 中的 margin 和 padding 为 0 是一种常见的做法,原因有很多,比如以下 4 点:

  1. 统一浏览器样式: 不只是谷歌,不同的浏览器(IE,360,火狐等)对元素的默认样式有所不同,特别是对于 margin 和 padding 的默认值可能存在差异。通过将 margin 和 padding 重置为 0,可以消除不同浏览器之间的差异,确保页面在各个浏览器中呈现一致的效果。

  2. 清除默认样式: 浏览器会为一些元素(如 <body><ul><li> 等)设置默认的 margin 和 padding,如果不进行重置,可能会导致页面样式不如预期。重置为 0 可以清除这些默认样式,从而更加灵活地自定义页面样式。

  3. 规范化布局: 重置 margin 和 padding 为 0 可以让页面布局更加规范化和可控。开发者可以根据实际需求,自行设置元素的 margin 和 padding,而不受浏览器默认样式的影响。

  4. 减少意外空白: 有时候元素之间的间距会受到 margin 和 padding 的影响,如果不加以控制,可能会出现意外的空白或布局错乱。将 margin 和 padding 设置为 0 可以避免这种情况的发生。

总的来说,重置 margin 和 padding 为 0 是一种良好的开发习惯,能够帮助开发者更好地控制页面布局和样式,提高开发效率和代码可维护性。在写 CSS 的时候,把这个规则,放在最前面就可以了。

计算元素的宽度和高度

要正确设置元素的宽度和高度,必须了解盒模型的工作原理,这样后续在网页实战时,才能更愉快地代码。

要理解的事,在设置元素的 width 和 height 属性时,应该只考虑内容区域的宽度和高度。要计算元素的整体大小,需要加上内边距、边框和外边距的值。

假设我们有一个<div>元素:

.box {width: 300px;padding: 20px;border: 2px solid black;margin: 10px;
}

我们来计算这个<div>元素的总宽度:

  • 宽度:300px

  • 左右内边距:20px + 20px = 40px

  • 左右边框:2px + 2px = 4px

  • 左右外边距:10px + 10px = 20px

总宽度计算:

300px(宽度) + 40px(左右内边距) + 4px(左右边框) + 20px(左右外边距) = 364px.

所以,这个<div>元素的总宽度是 364px。

ok,以上,希望你多多实践来理解,其实,很多知识点是在实践中会逐渐拨开迷雾的,更多前端系列内容可以go公众.h:云桃桃,本文完。

图片

推荐阅读:

高颜值登录页面第 2 波(CV即可,带动态背景!)

高颜值登录页面(一键复制)

作者介绍:

深耕互联网行业 9 年,在写作的程序媛。24 岁实现月入过万,26 岁独立买房。终身学习者,陪你一起成长,一起变富。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Liunx挂载硬件设备

一、mount命令&#xff08;用于挂载文件系统&#xff09; &#xff08;一&#xff09;语法格式&#xff1a;mount 参数 源设备路径 目的路径 &#xff08;二&#xff09;参数 1、-t&#xff1a;指定挂载的文件系统 &#xff08;1&#xff09;iso9660&#xff1a;光盘或光盘…

微服务架构中的业务可监控设计

目录 监控指标的定义与收集 监控指标的定义 监控数据的收集 业务的可监控设计技术解决方案 建立统一的监控平台 实施智能告警系统 分布式追踪与可视化 自动化测试和性能基准 安全监控与防御 可视化与告警系统 可视化系统的应用 实时数据展示 历史数据分析 多维度…

【nvm最新解决方案】Node.js v16.20.2 is not yet released or available

【nvm最新解决方案】Node.js v16.20.2 is not yet released or available 解决办法&#xff1a;下载想安装的node压缩包&#xff0c;放入nvm对应目录。 2024年最新node压缩包地址&#xff1a;https://nodejs.org/dist/ 1、选择对应的node版本&#xff1a;例如&#xff0c;我选的…

乡政府管理系统|基于Springboot的乡政府管理系统设计与实现(源码+数据库+文档)

乡政府管理系统目录 目录 基于Springboot的乡政府管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、用户信息管理 2、活动信息管理 3、新闻类型管理 4、新闻动态管理 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选题推…

FPGA中按键程序设计示例

本文中使用Zynq 7000系列中的xc7z035ffg676-2器件的100MHz PL侧的外部差分时钟来检测外部按键是否按下&#xff0c;当按键被按下时&#xff0c;对应的灯会被点亮。当松开按键时&#xff0c;对应的灯会熄灭。 1、编写代码 新建工程&#xff0c;选用xc7z035ffg676-2器件。 点击…

ansible执行mysql脚本

目录 概述实践环境要求ansible yml脚本命令离线包 概述 ansible执行mysql脚本 实践 官网文档 环境要求 环境需要安装以下内容: 1.mysql客户端(安装了mysql即会有)2.安装MySQL-python (Python 2.X) 详细插件安装链接 ansible yml脚本 关键代码如下&#xff1a; # 剧本…

vscode设置conda默认python环境,简单有效

本地conda 可能安装了各种环境&#xff0c;默认的vscode总是base环境&#xff0c;这时你想要在vscode调试python代码&#xff0c;使用默认的环境没有安装对应的包就会遇到报错解决这个问题的方法很简单ctrlshiftp 调出命令面板 再输入 select interpreter , 选择 python 选择解…

设计模式——2_9 模版方法(Template Method)

人们往往把任性也叫做自由&#xff0c;但是任性只是非理性的自由&#xff0c;人性的选择和自决都不是出于意志的理性&#xff0c;而是出于偶然的动机以及这种动机对感性外在世界的依赖 ——黑格尔 文章目录 定义图纸一个例子&#xff1a;从文件中获取信息分几步&#xff1f;Rea…

为什么用CubeMX配置STM32H7主频只能配到200,但实际配到400没报错,超过400报错,其他深色也要把前边的分频器向小调?

原因&#xff1a; STM32CUBEMX配置STM32H750时钟480M时失败_stm32h750 时钟配置_小李干净又卫生的博客-CSDN博客 STM32CUBEMX默认设置的是VOS1&#xff0c;是不能支持480M运行的&#xff0c;只能400 但还不清楚为什么这里没有更多选项Scale &#xff1f;

BRC20铭文铭刻解析

BRC20铭文铭刻的出现对于智能制造无疑是一个重要的里程碑。随着科技的飞速发展&#xff0c;智能制造已经成为制造业发展的必然趋势&#xff01;智能制造是指通过运用人工智能、物联网、大数据等先进技术&#xff0c;实现生产过程的自动化、智能化和高效化。 1. BRC20铭文的概念…

栈的应用--括号匹配问题

括号匹配问题:给一个字符串,其中包括小括号、中括号、大括号.求该字符串中的括号是否匹配? 例如: ()()[]{} --> 匹配 ([{()}]) --> 匹配 []{ --> 不匹配 [(]] --> 不匹配 这里可以借助栈的思想来做: 1.遍历字符串:从左边开始…

阿里巴巴Java规约p3c-pmd与maven集成,实现maven package打包前校验

前言 网上复制来&#xff0c;复制去&#xff0c;都不知道原因&#xff0c;瞎搞。故写了此篇文档&#xff1b; 以下代码&#xff0c;直接复制到pom.xml中就好使。 需求 阿里巴巴Java规约p3c-pmd与maven集成&#xff0c;实现maven package打包前校验&#xff0c;如果校验不通过…

9. Vue Router4 过渡动效

Vue Router 4 提供了强大的动态过渡动效功能&#xff0c;可以让你的页面在路由切换时有流畅的过渡效果。这主要通过 Vue 的 <transition> 组件实现。 基本使用 首先&#xff0c;我们需要在路由组件外部包裹一个 <transition> 组件。然后&#xff0c;给 <trans…

【Git】从零开始的 Git 基本操作

文章目录 1. 创建 Git 本地仓库2. 配置 Git3. 认识工作区、暂存区、版本库3.1 添加文件 | 场景一3.2 查看 .git 文件3.3 添加文件 | 场景二 4. 修改文件5. 版本回退6. 撤销修改6.1 情况一&#xff1a;对于工作区的代码&#xff0c;还没有 add6.2 情况二&#xff1a;已经 add&am…

实在IDP文档审阅产品导引

实在IDP文档审阅&#xff1a;智能文档处理的革新者 一、引言 在数字化转型的浪潮中&#xff0c;文档处理的智能化成为企业提效的关键。实在智能科技有限公司推出的实在IDP文档审阅&#xff0c;是一款利用AI技术快速理解、处理文档的智能平台&#xff0c;旨在为企业打造专属的…

MyBatis-知识点详解

本文将详细地介绍MyBatis框架&#xff0c;从其优缺点、适用场景到工作原理&#xff0c;全面解析MyBatis的懒加载、延迟加载机制&#xff0c;以及如何管理实体与数据库字段的映射差异。同时&#xff0c;探讨动态SQL、缓存策略、事务处理&#xff0c;并比较MyBatis与Hibernate的不…

Qt 6子窗口全屏显示

一、全屏显示效果 二、全屏相关函数 1,全屏显示函数 QWidget::showFullScreen(); // 此方法只对顶级窗口有效&#xff0c;对子窗口无效 2&#xff0c;恢复显示函数 QWidget::showNormal(); // 此方法也只对顶级窗口有效&#xff0c;对子窗口无效 3&#xff0c;最小化显示函…

go语言并发实战——日志收集系统(五) 基于go-ini包读取日志收集服务的配置文件

实现日志收集服务的客户端 前言 从这篇文章开始我们就正式进入了日志收集系统的编写&#xff0c;后面几篇文章我们将学习到如何编写日志收集服务的客户端,话不多说,让我们进入今天的内容吧&#xff01; 需要实现的功能 我们要收集指定目录下的日志文件&#xff0c;将它们发…

12. MyBatis(二)

源码位置&#xff1a;MyBatis_demo 上篇文章我们学习了MyBatis的定义以及增删查改操作&#xff0c;并且学习了如何在xml文件中编写SQL时使用#{}的方式将参数和对象的属性映射到SQL语句中&#xff0c;上篇的内容已经足以应对大部分场景&#xff0c;本篇文章我们就要学习一下MyBa…

uniapp+vue3监听输入框内容watch

代码 <view class"searchBox"><view class"searchLeft"><wh-icon name"search" size"40"></wh-icon><input type"text" placeholder"请输入搜索内容" v-model"search" /&g…