CSS3-盒子模型-边距问题

news2024/11/14 17:45:47

    1 清除默认内外边距
        场景:浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开始前需要先清除这些标签默认的margin和padding,后续自己设置
            比如:body标签默认有margin:8px、p标签默认有上下的margin、ul标签默认由上下的margin和padding-left ……
        解决方法:
            *{
                margin: 0;
                padding: 0;
                /* 盒子自动内减*/
                box-sizing:border-box;
            }

    2 外边距折叠现象
        正常情况:
            场景:水平布局的盒子,左右的margin正常,互不影响
            结果:最终两者距离为左右margin的和
        
        合并现象:
            场景:垂直布局 的 块级元素,上下的margin会合并
            结果:最终两者距离为margin的最大值
            解决方法:避免就好,只给其中一个盒子设置margin即可

        塌陷现象(坑爹):
            场景:互相嵌套 的 块级元素,子元素的 margin-top 会作用在父元素上 因为父子的上外边界margin-top重合了
            结果:导致父元素一起往下移动
            解决方法:
                1 给父元素设置border-top 或者 padding-top(分隔父子元素的margin-top)
                2 给父元素设置overflow:hidden;
                3 转换成行内块元素 display:inline-block;

    3 行内元素的margin和padding无效情况
        场景:给行内元素设置margin和padding时
        结果:
            1 水平方向的margin和padding布局中有效
            2 垂直方向的margin和padding布局中无效,而padding-bottom 会和 div 重叠,因为行内元素不会因 padding 而占据更多空间,它们会按照文本流排列。

代码:清除默认外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 先注释,再打开,分别看效果 */
        *{
            margin: 0;
            padding: 0;
            /* 盒子自动内减*/
            box-sizing:border-box;
        }
        
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果图:注意上面和左边的边距变化

          

 

 

代码:盒子外边距合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div{
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background-color: pink;
        }
        .one{
            margin-bottom: 20px;
        }
        .two{
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="one">盒子一</div>
    <div class="two">盒子二</div>
</body>
</html>

效果图:

 

 

代码:盒子外边距塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .father{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: green;
            /* 给子盒子设置上外边距,应该是子对父下移30px才对,但是父子一起下移了 */
            /* 这是因为父子的上外边界margin-top重合了 */
            margin-top: 30px;
        }

    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
</body>
</html>

效果图:

 

代码:行内元素的margin和padding无效情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div{
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background-color: pink;
        }
        span{
            background-color: green;
            /* 1 水平方向的margin和padding布局中有效 */
            margin-right: 20px;
            padding-left: 20px;
            /* 2 垂直方向的margin和padding布局中无效 */
            margin-top: 30px;
            /* padding-bottom 会和 div 重叠,因为行内元素不会因 padding 而占据更多空间,它们会按照文本流排列。 */
            padding-bottom: 30px;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <span>1我是一个行内元素1</span><span>2我是一个行内元素2</span><span>3我是一个行内元素3</span>
    <div class="two"></div>
</body>
</html>

效果图:

 

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

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

相关文章

一句提示词生成整个代码库——Gpt Engineer神级项目开源(附演示视频)

近日&#xff0c;一个名为Gpt Engineer神级项目开源&#xff0c;并迅速火爆全网。 短短几天内&#xff0c;该项目已经得到了25K的星星。 使用GPT-engineer进行人工智能软件开发&#xff0c;可以改变软件开发的未来。 在软件开发领域&#xff0c;一场巨大的革命正在开始。这一转…

【计算机视觉 | 目标检测】arxiv 计算机视觉关于目标检测的学术速递(6月 22 日论文合集)

文章目录 一、检测相关(9篇)1.1 Wildfire Detection Via Transfer Learning: A Survey1.2 Polygon Detection for Room Layout Estimation using Heterogeneous Graphs and Wireframes1.3 Exploiting Multimodal Synthetic Data for Egocentric Human-Object Interaction Detec…

前端中的相关概念

谁道人生无再少&#xff0c; 门前流水尚能西。 桃花落尽胭脂透&#xff0c; 庭院无声五更鸡。 —— 杜甫《端午节》 HTML中class属性 HTML中class属性是一种用于为元素定义样式和标识的属性&#xff0c;以下是class属性的几种常见用法实例&#xff0c;包括标识元素、定义样…

利用OpenCV计算条形物体的长度

0、前言 在图像处理中&#xff0c;我们可能会遇到求一个线条长度的场景&#xff0c;比如&#xff0c;现在有一条裂缝&#xff0c;需要求其长度&#xff0c;或者有一个长条形的零件需要知道其长度。 本文利用OpenCV和skimage两个库&#xff0c;提供了一个解决方案。 1、解决步…

贪心法与动态规划的对比分析

高级算法设计课程论文 题 目&#xff1a;贪心法与动态规划的对比分析 作者姓名&#xff1a; 作者学号&#xff1a; 专业班级&#xff1a; 提交时间&#xff1a; 2023/6/3 目 录 1 引言 1 2 分析过程 2 2.1多段图的最短路径问题 2 2.2最小生成树问题 4 3动态规划与贪心法的对…

【动态规划算法练习】day3

文章目录 一、931. 下降路径最小和1.题目简介2.解题思路3.代码4.运行结果 二、64. 最小路径和1.题目简介2.解题思路3.代码4.运行结果 三、面试题 17.16. 按摩师1.题目简介2.解题思路3.代码4.运行结果 总结 一、931. 下降路径最小和 1.题目简介 931. 下降路径最小和 题目描述&…

浅析 GeoServer CVE-2023-25157 SQL注入

原创稿件征集 邮箱&#xff1a;eduantvsion.com QQ&#xff1a;3200599554 黑客与极客相关&#xff0c;互联网安全领域里 的热点话题 漏洞、技术相关的调查或分析 稿件通过并发布还能收获 200-800元不等的稿酬 更多详情&#xff0c;点我查看&#xff01; 简介 GeoServer是一个开…

十八、网络基础(一)

一、协议 &#xff08;一&#xff09;前置 协议其实是一种约定&#xff01;&#xff01;&#xff01; 计算机之间的传输媒介是光信号和电信号 , 通过 " 频率 " 和 " 强弱 " 来表示 0 和 1 这样的信息 , 要想传递各种不同的信息 , 就需要约定好双方的数据…

(自己动手开发自己的语言练手级应用)JSON(JavaScript Object Notation) 产生式(BNF)

写自己的开发语言时&#xff0c;很多人都会拿JSON当第一个练习对象 开源net json FJSON 解析工具https://dbrwe.blog.csdn.net/article/details/107611540?spm1001.2014.3001.5502 <json> :: <object> | <array> <object> :: "{" [ <me…

分布式学习第三天 nginx学习

目录 1. 一些基本概念 1.1 Nginx初步认识 1.2 正向/反向代理 1.3 域名和IP 2. Nginx 安装和配置 2.1 安装 2.2 配置 3. Nginx的使用 3.1 部署静态网页 3.2 反向代理和负载均衡 课外知识导读 1. URL和URI 2. DNS解析过程 复习 1. 一些基本概念 1.1 Nginx初步认识…

团体程序设计天梯赛-练习集L1篇②

&#x1f680;欢迎来到本文&#x1f680; &#x1f349;个人简介&#xff1a;Hello大家好呀&#xff0c;我是陈童学&#xff0c;一个与你一样正在慢慢前行的普通人。 &#x1f3c0;个人主页&#xff1a;陈童学哦CSDN &#x1f4a1;所属专栏&#xff1a;PTA &#x1f381;希望各…

在我掉入计算机的大坑并深陷其中时,一门名为“C语言”的编程语言让我沉迷

各位CSDN的uu们你们好呀&#xff0c;小雅兰好久没有更新博客啦&#xff0c;今天来小试牛刀&#xff01;&#xff01;&#xff01; 上一篇博客小雅兰是说自己原本是自动化专业的学生&#xff0c;但是因为一次偶然的机会对计算机的相关知识产生了浓厚的兴趣。那么&#xff0c;小雅…

Linux Ubuntu man文档的图文安装教程

文章目录 前言man文档的起源man文档的安装man文档的使用总结 前言 当提及"man文档"时&#xff0c;通常是指Unix和类Unix系统中的手册页&#xff08;man page&#xff09;&#xff0c;因为Linux是在Unix的基础上发展而来的操作系统&#xff0c;所以我们的Linux也有ma…

操作系统 - 内存管理

✅作者简介&#xff1a;人工智能专业本科在读&#xff0c;喜欢计算机与编程&#xff0c;写博客记录自己的学习历程。 &#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&…

INDEMIND相机ROS bag包数据的回放

实验需要IMU相机&#xff0c;跑算法是在ROS下跑&#xff0c;在 ROS 系统中&#xff0c;可以使用 bag 文件来保存和恢复系统的运行状态&#xff0c;比如相机话题的 bag 包&#xff0c;然后回放用来进行联合外参标定&#xff0c;也可以使用EVO工具显示算法轨迹&#xff0c;这里记…

合宙Air724UG Cat.1模块硬件设计指南--GPIO控制

GPIO控制 简介 GPIO&#xff08;General-purpose input/output&#xff09;&#xff0c;通用型之输入输出的简称&#xff0c;可实现某时刻电平状态的输出与输入&#xff0c;即可以通过它们输出高低电平或者通过它们读入引脚的状态-是高电平或是低电平。 特性 共支持28个GPIO&a…

A Neural Conversational Model 读后感

目录 摘要 1、介绍 2、相关工作 3、模型 4、数据&#xff08;后面都是具体的东西&#xff0c;不赘述&#xff09; 5、总结 使用微软翻译得到的中文原文&#xff1a; 摘要 会话建模是自然语言理解和机器智能中的一项重要任务。尽管存在以前的方法&#xff0c;但它们通常仅…

MySQL数据库:数据库的约束以及数据的聚合、联合查询

目录 一.关系模型的简要概述 二.数据库的约束 2.1约束类型 2.2NULL约束 2.3 UNIQUE&#xff1a;唯一约束 2.4 默认约束 2.5 PRIMARY KEY&#xff1a;主键约束 2.6 FOREIGN KEY&#xff1a;外键约束 2.7 CHECK约束 三.高效率查询 3.1高效率查询的分类 3.2聚合查询 …

Nginx热升级到1.23.4过程指导手册

一、问题描述 因环境内部安全扫描发现CVE-2021-23017、CVE-2022-41741、CVE-2022-41742、CVE-2019-20372漏洞&#xff0c;经分析后&#xff0c;需要将nginx升级到1.23.4版本&#xff1b; 现场环境&#xff1a;centos7.4 1708、nginx 1.20.1 资料&#xff1a;软件下载、360安全…

spring框架-循环依赖问题(二)

文章目录 什么是循环依赖解决循环依赖的办法知识扩展 什么是循环依赖 两个或多个类之间存在彼此依赖的情况,形成一个循环依赖链 代码&#xff1a; 单例bean的循环依赖&#xff1a; 先了解Bean的生命周期&#xff1a;1.实例化 2.初始化、3.使用 4.销毁 详细了解Bean生命周期…