CSS的盒子模型(Box Model)

news2024/9/24 4:46:11

所有HTML元素都可以看作盒子,在CSS中盒子模型是用来设计和布局的,CSS盒子模型本质上是一个盒子,分装周围的HTML元素包括:外边距,边框,内边距和实际内容。

Margin(外边距) 

清除边框外的区域,外边距是透明的。

Border(边框)

围绕在内边距和内容外的边框。

Padding(内边距)

清楚内容周围的区域。

Content(内容)

盒子的内容,显示文本图像。

如果把盒子模型看作是一个生活中的快递,那么内容部分等同于实物部分,内边距等同于盒子中的泡沫,边框等同于快递盒子,外边距等同于快递与快递之间的距离。

例:
首先添加内容
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="continer"></div>
</body>

添加内边距
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 50px 50px;/*第一个值表示上下内边距的大小,第二个值表示左右的大小*/
        }
    </style>
</head>
<body>
    <div class="continer"></div>
</body>

:可以通过使用padding-left/right/top/bottom来实现单个边距的添加。

添加边框
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 50px 50px;/*第一个值表示上下内边距的大小,第二个值表示左右的大小*/
            border: 5px solid black;/*第一个值表示边框的粗细,第二个值表示实线,第三个之为边框的颜色*/
        }
    </style>
</head>
<body>
    <div class="continer"></div>
</body>

添加外边距

 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 50px 50px;/*第一个值表示上下内边距的大小,第二个值表示左右的大小*/
            border: 5px solid black;/*第一个值表示边框的粗细,第二个值表示实线,第三个之为边框的颜色*/
            margin: 100px 100px;/*第一个值表示上下外边距的大小,第二个值表示左右边距的大小*/ 
        }
    </style>
</head>
<body>
    <div class="continer"></div>
</body>

注: 可以使用margin-left/right/top/bottom来单个更改某一边距离。

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

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

相关文章

CSS的弹性盒子模型(Flex box)

弹性盒子模型是CSS3的一种新的布局模式&#xff0c;弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保拥有合适的布局方式&#xff0c;引入弹性盒子模型的目的时提供更加有效的方式来对一个容器中的子元素进行排列&#xff0c;对齐和分配空白空间。 弹性盒子由弹性容…

Linux复习--网络基础(OSI七层、TCP三次握手与四次挥手、子网掩码计算)

一、ISO/OSI七层模型的分层与作用 1、ISO/OSI的七层模型 2、作用 应用层&#xff1a;为用户提供服务&#xff0c;给用户一个操作界面表示层&#xff1a;数据提供表示&#xff1b;加密&#xff1b;压缩&#xff1b;会话层&#xff1a;确定数据是否需要进行网络传递传输层&…

好用的idea方法分隔符插件

好用的idea方法分隔符插件

OpenCV特征检测(12)检测图像中的潜在角点函数preCornerDetect()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 计算用于角点检测的特征图。 该函数计算源图像的基于复杂空间导数的函数 dst ( D x src ) 2 ⋅ D y y src ( D y src ) 2 ⋅ D x x src − 2 …

OpenCV 3

模板匹配方法 尽量采用归一化的方法&#xff0c;因为它更加精细。 匹配效果展示 匹配单一图像 这是一段Python代码&#xff0c;主要使用了OpenCV库进行图像处理。这段代码的主要功能是通过模板匹配方法在一张大图中找到一个小图的位置。 具体来说&#xff1a; - 第一行的for…

项目实战:Qt+OSG爆破动力学仿真三维引擎测试工具v1.1.0(加载.K模型,子弹轨迹模拟动画,支持windows、linux、国产麒麟系统)

若该文为原创文章&#xff0c;转载请注明出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/142454993 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、Op…

验收测试:从需求到交付的全程把控!

在软件开发过程中&#xff0c;验收测试是一个至关重要的环节。它不仅是对软件质量的把关&#xff0c;也是对整个项目周期的全程把控。从需求分析到最终的软件交付&#xff0c;验收测试都需要严格进行&#xff0c;以确保软件能够符合预期的质量和性能要求。 一、需求分析阶段 在…

[uni-app]小兔鲜-01项目起步

项目介绍 效果演示 技术架构 创建项目 HBuilderX创建 下载HBuilderX编辑器 HBuilderX/创建项目: 选择模板/选择Vue版本/创建 安装插件: 工具/插件安装/uni-app(Vue3)编译器 vue代码不能直接运行在小程序环境, 编译插件帮助我们进行代码转换 绑定微信开发者工具: 指定微信开…

Linux 基本指令(二)

目录 1. more指令 2. less指令(重要) 3. head指令 4. tail指令 5. date指令 (1)可以通过选项来指定格式&#xff1a; ​编辑 (2)在设定时间方面 (3)时间戳 6. cal指令 7. find指令 8. grep指令 9. alias指令 10. zip指令与unzip指令 (1). zip指令 (2). unzip指令…

链表分割-----------lg

现有一链表的头指针 ListNode* pHead&#xff0c;给一定值x&#xff0c;编写一段代码将所有小于x的结点排在其余结点之前&#xff0c;且不能改变原来的数据顺序&#xff0c;返回重新排列后的链表的头指针。 我们可以假设x为36&#xff0c;则小于36都排在前边&#xff0c;>3…

桌面便签哪个好用?好用的便签软件推荐?

随着信息技术的发展&#xff0c;我们的生活方式也发生了翻天覆地的变化。从纸质笔记本到电子便签&#xff0c;这不仅仅是载体的转换&#xff0c;更是思维习惯的一次革新。在这个数字时代&#xff0c;如何利用科技工具来辅助我们更好地管理时间和信息&#xff0c;成为了值得探讨…

linux环境oracle11.2.0.4打补丁(p31537677_112040_Linux-x86-64.zip)

上传补丁及opatch工具 创建目录并上传opatch工具和补丁包 [oraclerhel64 ~]$ mkdir /u01/psu [oraclerhel64 ~]$ cd /u01/psu [oraclerhel64 psu]$ ll total 514572 -rw-r--r-- 1 oracle oinstall 391781147 Sep 23 17:37 p31537677_112040_Linux-x86-64.zip -rw-r--r-- 1 or…

中电金信 :基于开放架构的私有云建设实践

01开放架构私有云诞生背景 随着国产化创新建设的深化&#xff0c;产业侧行业软件持续进行云原生改造&#xff0c;金融机构拥抱云和容器技术&#xff0c;实现数智化转型已是大势所趋。近年&#xff0c;云原生技术以及架构发展速度更是惊人&#xff0c;私有云开始有了新架构、有了…

idea使用spring initializr快速创建springboot项目

idea使用spring initializr快速创建springboot项目 1.打开idea&#xff0c;新建项目如图&#xff0c;选择好java版本&#xff0c;我这里是17。2.点击next&#xff0c;首先选择springboot版本&#xff0c;我这里选择3.3.4。勾选springweb&#xff0c;它会帮我们下载关于springmv…

【高效且应用广泛的排序 —— 快速排序算法】

高效且应用广泛的排序 —— 快速排序算法 快速排序是一种常用的排序算法&#xff0c;主要采用分治的思想。以下是对快速排序算法的详细介绍及代码示例&#xff1a; 快速排序的基本思路是&#xff0c;每次将一个位置上的数据归位&#xff0c;使得该数左边的所有数据都比该数小…

小程序开发设计-小程序的宿主环境:组件⑦

上一篇文章导航&#xff1a; 小程序开发设计-小程序的宿主环境&#xff1a;宿主环境简介⑥-CSDN博客https://blog.csdn.net/qq_60872637/article/details/142425131?spm1001.2014.3001.5501 注&#xff1a;不同版本选项有所不同&#xff0c;并无大碍。 目录 上一篇文章导航…

阿里巴巴首页pc端1688店铺招牌店铺装修教程

1688运营1688批发首页1688装修模板1688店铺怎么装修模板自定义装修代码1688店铺装修模板旺铺装修阿里店铺首页怎么装修1688店铺装修教程视频全屏通栏代码1688店铺装修模板阿里巴巴店铺装修设计 阿里巴巴首页pc端1688店铺招牌店铺装修教程 工具&#xff1a;一秒美工

英特尔:昔日芯片霸主的命运抉择

英特尔&#xff1a;昔日芯片霸主的命运抉择 简介 英特尔的辉煌与困境 高通的崛起与收购意向 英特尔困境的原因 英特尔的未来走向 简介 据美国《华尔街日报》9月20日报道&#xff0c;芯片巨头高通公司近日就收购事宜与英特尔公司进行了接洽。但目前这只是一个意向&#xff…

centos7 docker部署nacos

1. 一行代码安装git yum -y install git 2. 下载最新版nacos源码&#xff1a; git clone https://github.com/nacos-group/nacos-docker.git 进入nacos-docker文件 cd nacos-docker 3.docker安装数据库Mysql8 按这个来就行&#xff0c;非常好 Docker安装mysql8-超详细、每…

828华为云征文|华为云Flexus云服务器X实例 基于CentOS系统镜像快速部署Laravel开源论坛

最近公司可热闹了&#xff01;大家都在为搭建博客论坛系统忙得不可开交&#xff0c;尤其是在选服务器这件事儿上&#xff0c;那叫一个纠结。 同事 A 说&#xff1a;“咱得选个厉害的服务器&#xff0c;不然这论坛以后卡得跟蜗牛爬似的可咋办&#xff1f;” 同事 B 回应道&#…