CSS盒模型 盒子尺寸问题

什么是盒模型 

CSS盒模型分为用来放置内容的content区域,用来调整内容和边框距离的padding区域。用来限制盒子边界的border区域以及用于调整盒子之间距离的margin区域。现在去掉margin,只考虑盒子内部的尺寸问题。

我们先来制作一个盒子。 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="box"></div><style>*{margin: 0;padding: 0;}.box{width: 300px;height: 200px;background-color: aqua;padding: 20px;border: 20px solid red;}</style>
</body>
</html>

 

这里的width和height 仅仅指的是content区域的尺寸。盒子整体所占据的空间还要加上水平和垂直方向上两队的border和padding的值。 也就是分别加上20*4 =  80px 最后盒子所占有的空间为380*280px 。

我们如何不借助其他属性制作一个空间为300✖️200的盒子呢? 

由于我们的boder和padding占据了80px的空间,所以我们只能压缩我们的content区域,将宽度和高度重新设置为220✖️120px。

 这样做出来的盒子就是占据空间为300✖️200的盒子了。

 

在CSS2的时代,我们也只能通过这种方式来设置我们的盒子整体大小。但是在CSS3更新了box-sizing属性后,一切变得简单起来了。

我们将width和height的值恢复回来,然后设置box-sizing:border-box;

    .box{width: 300px;height: 200px;background-color: aqua;padding: 20px;border: 20px solid red;box-sizing: border-box;}

 我们会发现效果跟我们单独设置width和height的效果是一样的。

 

box-sizing:border-box;原理

box-sizing:border-box;其实这个属性是用来设置 width和height到底指的是哪个区域的值?他有两个可选值,一个是content-box,一个是border-box;content-box为默认值,也等同于我们不设置box-sizing这个属性。如果设置了border-box,width和height指的就是border以内的区域。也就是content+padding+border的尺寸为300*200;所以此时content区域的尺寸就自动计算为220*120了。

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

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

相关文章

一篇文章让你快速入门Redis(含安装使用客户端)

声明&#xff1a;文章内容皆取于学习黑马课程、若想了解原版内容请去B站了解黑马程序员Redis课程 1.Redis入门篇 1.什么是Redis Redis全称为Remote Dictionary Server,远程词典服务器,基于内存的键值型NoSQL数据库 NoSQL(Not only SQL)是对不同于传统的关系数据库的数据库管…

芸鹰蓬飞:抖店的运营技巧是什么?

抖店&#xff0c;作为抖音平台上的电商业务&#xff0c;为商家提供了一个全新的销售渠道。然而&#xff0c;要成功运营抖店&#xff0c;商家需要掌握一定的方法和技巧。下面&#xff0c;我们就来详细介绍一下抖店的运行方式。 商品选择&#xff1a;首先&#xff0c;商家需要选择…

单片稳压集成电路78LXX系列——固定的电压输出,适用于需100mA电源供给的应用场合(网络产品,声卡和电脑主板等产品)

78LXX系列是一款单片稳压集成电路&#xff0c;它们有一系列固定的电压输出&#xff0c;适用于需100mA电源供给的应用场合。78LXX系列采用T0-92和SOT-89-3L的封装形式。 主要特点&#xff1a; ● 最大输出电流为100mA ● 输出电压为3.3V. 5V. 6V. 8V、9V、10V、 12V和15V ● 热…

网络面试题总结

url从输入到渲染页面的全过程 URL 从输入到页面渲染可以分为以下步骤&#xff1a; 输入 URL&#xff1a;在浏览器地址栏中输入 URL&#xff08;统一资源定位符&#xff09;。DNS 解析&#xff1a;浏览器通过 DNS&#xff08;域名系统&#xff09;将 URL 解析成 IP 地址&#…

美易官方:美联储FOMC声明重点

美联储FOMC声明重点 美联储FOMC声明是美联储货币政策的重要文件&#xff0c;其重点内容主要包括以下几个方面&#xff1a; 1. 利率政策 美联储FOMC声明中最重要的内容之一是利率政策。声明会明确美联储的利率目标区间&#xff0c;以及未来可能的调整方向。利率政策是美联储调节…

git查看commit提交记录详情

相关的命令 git log&#xff1a;查看所有的commit提交记录&#xff1b;git show&#xff1a; 查看提交的详情&#xff1b; 首先&#xff0c;需要通过git log显示所有commit记录&#xff1a; 查看最新的commit&#xff1a;git show查看指定commit的所有修改&#xff1a;git s…

Zxing库的使用⭐️实现给自己的博客主页生成一张二维码链接,有源码可以直接复制到本地执行

目录 前言 一、简介 二、本地实现 2.1 引入依赖&#xff08;根据自己springboot项目来&#xff09; 2.2 实现类 三、运行一次 前言 小伙伴们大家好&#xff0c;自从地铁上刷到Zxing库的使用后&#xff0c;一直想本地部署玩一玩 一、简介 ZXing&#xff08;全称为 Zebra Cr…

Mac搭建Frida逆向开发环境

一、简介 Frida是一种基于Python+JavaScript的动态分析工具,可以用于逆向开发、应用程序的安全测试、反欺诈技术等领域,本质是一种动态插桩技术。Frida主要用于在已安装的应用程序上运行自己的JavaScript代码,从而进行动态分析、调试、修改等操作,能够绕过应用程序的安全措…

nodejs使用express框架启动服务操作mysql数据库

描述: 首先在本地搭建mysql数据库,配置:host: ‘192.168.3.249’,user: ‘mkx’,password: ‘123456’,database: ‘gg’.测试连接正常.使用express写两个接口, 1.查询所有学生的接口,使用的get请求,无参数. 2.插入一条学生信息,使用post请求,body是一个json的学生信息{name:“…

土壤科学灌溉CG-36 土壤水势传感器

土壤科学灌溉CG-36 土壤水势传感器产品概述 土壤水势传感器可以很方便地插入到土壤剖面坑中&#xff0c;在其周围包裹上湿土即可。测定和记录非常简单。免维护、无需校准即可测量较大范围的土壤水势&#xff1b;无需灌水&#xff0c;大量程使得它成为测量自然系统水势的理想传…

十个Vue3实用但是冷门的API

文章目录 一、前言二、readonly三、shallowRef四、shallowReactive五、toRef & toRefs5.1、 toRef5.2、toRefs 六、toRaw & markRaw & unref6.1、toRaw6.2、markRaw6.3、unref 七、effectScope & onScopeDispose7.1、收集副作用7.2、全局状态管理 八、provide …

Docker - Android源码编译与烧写

创建源代码 并挂载到win目录 docker run -v /mnt/f/android8.0:/data/android8.0 -it --name android8.0 49a981f2b85f /bin/bash 使用 docker update 命令动态调整内存限制&#xff1a; 重新运行一个容器 docker run -m 512m my_container 修改运行中容器 显示运行中容器 d…

【1day】复现I Doc View系统upload接口任意文件读取漏洞

注:该文章来自作者日常学习笔记,请勿利用文章内的相关技术从事非法测试,如因此产生的一切不良后果与作者无关。 目录 一、漏洞描述 二、影响版本 三、资产测绘 四、漏洞复现

【剑指offer|图解|二分查找】点名 + 统计目标成绩的出现次数

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;剑指offer每日一练 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 一. ⛳️点名1.1 题目1.2 示例1.3 限制1.4 解题思路一c代码 1.5 解题思路二c代码 二. ⛳️统计目标成绩…

开发信的基本要点有哪些?如何撰写开发信?

开发信的关键要素是什么&#xff1f;外贸开发信的写作技巧方法&#xff1f; 开发信是一种至关重要的沟通工具&#xff0c;无论是初创企业还是已经建立的公司&#xff0c;开发信都是与潜在客户、合作伙伴或投资者建立联系的关键步骤。蜂邮将讨论开发信的基本要点&#xff0c;以…

(NeRF学习)3D Gaussian Splatting Instant-NGP环境配置

学习参考&#xff1a; 3D gaussian splatting 安装步骤拆解23.9月3D Gaussian Splatting入门指南【五分钟学会渲染自己的NeRF模型&#xff0c;有手就行&#xff01;】 三维重建instant-ngp环境部署与colmap、ffmpeg的脚本参数使用 一、3D Gaussian Splatting &#xff08;一&…

快看!AI竟然可以这样……

自从ChatGPT诞生之后&#xff0c;还有谁不知道AI的名号吗&#xff1f;我相信只有极少部分人吧。人工智能技术在21世纪粉墨登场&#xff0c;拉开了信息化时代的蓝图&#xff0c;被广泛应用于各个产业&#xff0c;来实现产业赋能&#xff0c;推动了经济社会的快速发展。 5G使用还…

PyPDF2库对PDF实现读取的应用

目录 一、PyPDF2 库的使用 1. 文档打开和页面读取 2. 文本提取功能 3. 示例代码

java获取字符串最后一个字符

要获取字符串的最后一个字符&#xff0c;你可以使用以下方法之一&#xff1a; 方法1&#xff1a;使用 charAt() 方法 String str "Hello World"; char lastChar str.charAt(str.length() - 1); System.out.println("最后一个字符是&#xff1a;" last…

【数据结构】什么是堆?

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 堆的概念及结构 堆的定义如下: n个元素的序列{k1,k2,...,kn}当且仅当满足以下关系时,称之为堆. 或 把这个序列对应的一维数组(即以一维数组作此序列的存储结构)看成是一个…