web前端开发基础------外边距折叠现象

    引言

    在设置样式时,需要遵循先整体再细节,先通用样式再特殊样式的顺序进行设置

    一,什么是外边距折叠现象呢?

    外边距折叠

   定义: 外边距折叠是指相邻的两个或者多个外边距(margin)在垂直方向会合并一个外边距,数值取较大的垂直外边距。

    通常有如下两种情况

    1,两个块级元素为标准流中两个相邻的兄弟块级元素,垂直外边距会折叠,以较大的垂直外边距为准。

    2,父级块元素和标准流下的第一个子级元素之间也会发生外边距折叠现象。

二,示例代码

<!DOCTYPE html>
<html lang="en">
<head>外边距折叠现象的两种情况展示 --><style type="text/css">#top{width: 200px;height: 200px;background: red;margin-bottom: 50px;}#buttom{width: 200px;height: 200px;background: blue;margin-top: 100px;}#father{width: 500px;height: 300px;background: pink;margin-top: 100px;}#son{width: 200px;height: 200px;background: red;margin-top: 50px;}</style><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>这是兄弟间的上下外边距折叠现象,此时兄弟之间的上下边距为100px</p><div id="top"></div><div id="buttom"></div><p>这是父子之间的外边距折叠现象</p><div id="father"><div id="son"></div></div>
</body>
</html>

    三,如何设置可消除父子之间的外边距折叠现象呢?

       方式1:给父级块元素加溢出隐藏样式   overflow:hidden;

       方式2:给父级块元素加上内边距       padding-top:1px;

       方式3:给父级元素加上边框           border-top:1px solid transparent;

       方式4:将父级块元素与子级块元素均设置为浮动  

    

 四,那么什么又是块级元素,什么又是内联元素呢?

       CSS采用盒子模型来构建每一个HTML元素,而这些元素分为两种类型:块级元素和内联元素。

       通常块级元素独占一行,可以设置宽度和高度来控制盒子的大小。

       内联元素一行可以共存多个,可以设置宽高但是不生效,自身尺度根据元素内部嵌套的内容来确定。这就是标准流布局。

       常见的块级元素:

            p,div,h1~h6,ul-li等

        常见的内联元素:

            a,span,img,b,i,em等

        让HTML元素脱离标准流可以采用浮动。

  五,如何转换块级元素和内联元素呢?

    块级元素与内联元素的转换(可以使用属性display来设置)

        display:block;将元素设置为块级元素

        display:inline;将元素设置为内联元素

        display:inline-block;将元素设置为内联-块级元素,含有两者的特性。

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

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

相关文章

老生常谈 - 从输入URL到页面加载的过程(详细版)

从输入URL到页面加载的过程 之前一直都是直接看一下总结的八股文章&#xff0c;对于实际的整个链路并不是特别熟悉&#xff0c;这次花了一天多的时间看了很多资料&#xff0c;对于整个页面加载的流程有了自己的理解&#xff0c;从前端开始访问的浏览器多线程、缓存等问题&#…

5-11一个球从100米自由落下

#include<stdio.h> int main(){double down100;double back down/2;int n;//次数for(n2;n<10;n){downdownback*2;backback/2; }printf("第10次落地经过%f米\n",down);printf("第10次反弹%f米\n",back);return 0;}

测试数据不会造?可以用这个工具Faker

在测试过程中&#xff0c;大家应该都遇到过各种各样的数据构造问题。e.g. 构造一批通讯录、构造一批用户三要素(姓名手机号身份证)、构造一批银行卡数据…… 这时候&#xff0c;测试数据大多数可能是这样的: 张三, 130 0000 0001 李四, 130 0000 0002 王五, 130 0000 0003 …

【C/PTA —— 11.函数2(课外实践)】

C/PTA —— 11.函数2&#xff08;课外实践&#xff09; 一.函数题6-1 计算A[n]1/(1 A[n-1])6-2 递归实现顺序输出整数6-3 自然数的位数(递归版)6-4 分治法求解金块问题6-5 汉诺塔6-6 重复显示字符(递归版)6-7 显示平行四边形(右)(递归版) 二.编程题7-2 N阶楼梯上楼问题 一.函数…

python实现存款日利息计算器(窗口界面形式)

输入存款金额&#xff0c;7日年化收益率&#xff0c;输出每日利息 完整源码如下&#xff1a; import tkinter as tk from tkinter import messageboxdef calculate_interest():deposit float(entry_deposit.get())interest_rate float(entry_interest_rate.get())daily_int…

【数据结构】二叉排序树(c风格、结合c++引用)

目录 1 基本概念 结构体定义 各种接口 2 二叉排序树的构建和中序遍历 递归版单次插入 非递归版单次插入 3 二叉排序树的查找 非递归版本 递归版本 4 二叉排序树的删除&#xff08;难点&#xff09; 1 基本概念 普通二叉排序树是一种简单的数据结构&#xff0c;节点的值…

Cortex-M与RISC-V区别

环境 Cortex-M以STM32H750为代表&#xff0c;RISC-V以芯来为代表 RTOS版本为RT-Thread 4.1.1 寄存器 RISC-V 常用汇编 RISC-V 关于STORE x4, 4(sp)这种寄存器前面带数字的写法&#xff0c;其意思为将x4的值存入sp4这个地址&#xff0c;即前面的数字表示偏移的意思 反之LOA…

【LM358AD运放方波振荡器可控输出幅值】2022-2-25

缘由仿真如何缩小方波振荡电路方波幅值?-有问必答-CSDN问答

使用Pytorch从零开始构建LSTM

长短期记忆&#xff08;LSTM&#xff09;网络已被广泛用于解决各种顺序任务。让我们了解这些网络如何工作以及如何实施它们。 就像我们一样&#xff0c;循环神经网络&#xff08;RNN&#xff09;也可能很健忘。这种与短期记忆的斗争导致 RNN 在大多数任务中失去有效性。不过&a…

发送一个网络数据包的过程解析

在 ip_queue_xmit 中&#xff0c;也即 IP 层的发送函数里面&#xff0c;有三部分逻辑。第一部分&#xff0c;选取路由&#xff0c;也即我要发送这个包应该从哪个网卡出去。 这件事情主要由 ip_route_output_ports 函数完成。接下来的调用链为&#xff1a;ip_route_output_port…

改进YOLOv8 | YOLOv5系列:RFAConv续作,即插即用具有任意采样形状和任意数目参数的卷积核AKCOnv

RFAConv续作,构建具有任意采样形状的卷积AKConv 一、论文yolov5加入的方式论文 源代码 一、论文 基于卷积运算的神经网络在深度学习领域取得了显著的成果,但标准卷积运算存在两个固有缺陷:一方面,卷积运算被限制在一个局部窗口,不能从其他位置捕获信息,并且其采样形状是…

Matlab进阶绘图第33期—双曲面图

在《Matlab论文插图绘制模板第56期—曲面图&#xff08;Surf&#xff09;》中&#xff0c;我分享过曲面图的绘制模板。 然而&#xff0c;有的时候&#xff0c;需要在一张图上绘制两个及以上的曲面图&#xff0c;且每个曲面图使用不同的配色方案。 在Matlab中&#xff0c;一张…

C++基础入门(超详细)

话不多说&#xff0c;序言搞起来&#xff1a; 自从开始学老师布置的任务后&#xff0c;目前还是OpenCV&#xff0c;哈~哈。我就莫名问老师&#xff1a;“以后编程是用C还是python&#xff1f;”&#xff0c;果然还是太年轻&#xff0c;老师说&#xff1a;“两们都要精通”。唉&…

set和map + multiset和multimap(使用+封装(RBTree))

set和map 前言一、使用1. set(1)、模板参数列表(2)、常见构造(3)、find和count(4)、insert和erase(5)、iterator(6)、lower_bound和upper_bound 2. multiset3. map(1)、模板参数列表(2)、构造(3)、modifiers和operations(4)、operator[] 4. multimap 二、封装RBTree迭代器原理R…

9.输出国际象棋盘【2023.11.24】

1.问题描述 要求输出国际象棋棋盘。 2.解决思路 国际象棋棋盘由64个黑白相间的格子组成&#xff0c;分为8行*8列。用i控制行&#xff0c;j控制列&#xff0c;根据ij的和的变化来控制输出黑方格还是白方格。 3.代码实现 #include<stdio.h> int main(){for(int i0;i&…

基于广义正态分布算法优化概率神经网络PNN的分类预测 - 附代码

基于广义正态分布算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于广义正态分布算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于广义正态分布优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xf…

网络安全—自学

1.网络安全是什么 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 2.网络安全市场 一、是市场需求量高&#xff1b; 二、则是发展相对成熟…

深度学习之基于Pytorch照片图像转漫画风格网络系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 以下是一个基本的设计介绍&#xff1a; 数据准备&#xff1a;收集足够的真实照片和漫画图像&#xff0c;用于训练模…

typora中的快捷键shift enter 和 enter的交换

1 问题&#xff1a; 我最近在用 typora 进行写作&#xff0c;但是在合格 typora 的 markdown 编辑器很奇怪&#xff0c;它的一个回车符是两次换行&#xff0c;而用 shfit ent 找了半天都不知道怎么解决的这个问题&#xff0c;然后我就去了这个 typora 在 github 开源的问题仓库…

hive 报错return code 40000 from org.apache.hadoop.hive.ql.exec.MoveTask解决思路

参考学习 https://github.com/apache/hive/blob/2b57dd27ad61e552f93817ac69313066af6562d9/ql/src/java/org/apache/hadoop/hive/ql/ErrorMsg.java#L47 为啥学习error code 开发过程中遇到以下错误&#xff0c;大家觉得应该怎么办&#xff1f;从哪方面入手呢&#xff1f; 1.百…