前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【说站】css边距重叠是什么

【说站】css边距重叠是什么

作者头像
很酷的站长
发布于 2022-11-24 06:36:36
发布于 2022-11-24 06:36:36
1K00
代码可运行
举报
运行总次数:0
代码可运行

css边距重叠是什么

1、边界重叠是指两个或两个以上盒子的相邻边界重合在一起,构成单一边界。

可以相邻也可以嵌套,其中没有非空内容、补白、边框。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
       .neighbor{
height: 100px;
background: red;
}
.father{
background: #f436365e;
}
.child{
height: 100px;
margin-top: 10px;
background: #00800047;
}
<div>
this is neighbor
</div>
<div>
<div>
this is child
</div>
</div>

2、这两个或两个以上块级盒的垂直邻接边界重合,其边界宽度为相邻边界宽度的值。

请注意,水平线不重合。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style type="text/css">
.father{
background: #f436365e;
overflow: hidden;
}
.child{
height: 20px;
margin: 30px auto 30px;
background: #00800047;
}
</style>
<div>
<div>
this is child1
</div>
<div>
this is child2
</div>
<div>
this is child1
</div>
</div>

以上就是css边距重叠的介绍,希望对大家有所帮助。更多css学习指路:css教程

本文教程操作环境:windows7系统、css3版,DELL G3电脑。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
(2019)[前端]面试题[1]:CSS BFC是什么【BFC详解】
BFC(Block Formatting Context)格式化上下文,是盒模型的一种渲染布局,简言之可以理解为 一个独立的容器,不受外部影响,不影响外部。
无道
2019/11/13
1.8K0
(2019)[前端]面试题[1]:CSS BFC是什么【BFC详解】
学习过CSS,那你知道BFC是什么吗?
虽然可能你没听过BFC是什么,但是你一定用过,其是一种在CSS中存在的技术,你可能只是一直不知道有这样一个专业名词,本文就来介绍一下到底什么是BFC
JowayYoung
2020/11/23
7410
学习过CSS,那你知道BFC是什么吗?
CSS 7:网页布局(传统布局,flex布局,布局套路)
width: 1000px; //或 max-width: 1000px; margin-left: auto; margin-right: auto; 演示地址范例
代码之风
2019/03/14
4.2K0
CSS 7:网页布局(传统布局,flex布局,布局套路)
【前端芝士树】详解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth
2018搜狐前端笔试题 盒模型本质上是用以封装HTML元素的概念盒子,它包含了边距,边框,填充以及实际内容。 即由外向里是 margin, border, padding, content
CloudCat
2022/06/15
1.1K0
【前端芝士树】详解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth
【CSS】:圆角矩形与元素的显示模式
在我们使用电脑时,大多数的窗口都是圆角的。个人觉得圆角确实比直角耐看。 为了把网页上的窗口也做成圆角,我们可以通过border-radius使得边框带有圆角效果。 基本语法:
Yui_
2025/02/03
1960
【CSS】:圆角矩形与元素的显示模式
09·灵魂前端工程师养成-CSS入门
-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台(功能如下): 1)整合了各个公有云API,自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机,连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
DriverZeng
2022/09/26
6250
09·灵魂前端工程师养成-CSS入门
由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)
写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的是可以顺着一路扯到normal flow、containing block、bfc、margin collapse,base line,writing mode,bidi,这样一路问下去的,奈何第一个问题(亲我真的只问了position有哪些取值和行为啊)就悲剧了…… 说到position,那么稍微对c
Sb_Coco
2018/05/28
1.2K0
【说站】css中BFC布局规则是什么
以上就是css中BFC布局规则的介绍,希望对大家有所帮助。更多css学习指路:css教程
很酷的站长
2022/11/23
3080
【说站】css中BFC布局规则是什么
【说站】css浮动有哪些特性
可以设置width和height,所以float通常用来制作横向配列的菜单,可以设置大小和横向排列。
很酷的站长
2022/11/23
4750
【说站】css浮动有哪些特性
两个CSS知识点:BFC和选择器权重
BFC 全称 Block Formatting Context,翻译过来就是块格式化上下文,它是 CSS 规范的一部分。
多云转晴
2020/07/23
8620
两个CSS知识点:BFC和选择器权重
【说站】css定位叠放次序是什么
2、z-index可以用来控制盒子的前后顺序(z轴)。值可为正整数、负整数或0,默认auto,值越大,盒子越高。
很酷的站长
2022/11/24
3180
连BFC都不知道谈什么前端工程师
简单的说 它就是一块封闭的区域,里面的盒子在怎么动也不会影响外面的布局。 创建BFC也有条件 只有display属性为 block,list-item,table的元素才能创建BFC BFC有宽度,高度。有外边距margin,有内边距外边框
切图仔
2022/09/08
3370
连BFC都不知道谈什么前端工程师
【CSS】340- 常用九宫格布局的几大方法汇总
其实换一种角度和思路,又是一个解决方法,不用margin负值,我们想要li要对其ul两端效果,之所以纠结是因为li又需要margin-right,而右边最后一个li的margin又会撑开和父亲ul的距离,让我们头疼。 那既然是节外生枝,我们直接让祖父砍掉多出来的那一节不就行了?父亲ul设置宽度,坚持让儿子占他的位置,而box祖父就做一个坏人,使用overflow砍掉多余出来的一个margin-right的距离。
pingan8787
2019/09/05
1.4K0
【CSS】340- 常用九宫格布局的几大方法汇总
【CSS】:Floats
最初,引入 float 属性是为了能让 web 开发人员实现文字环绕效果(例如:报纸排版)。
WEBJ2EE
2020/02/26
5260
【面试题解】什么是外边距重叠?如何解决?什么是BFC?
本系列面试题旨在学会相关知识点,从而轻松应对面试题的各种形式,本文讲解了 BFC 以及 利用 BFC 解决外边距重叠问题。
一尾流莺
2022/12/10
8590
【面试题解】什么是外边距重叠?如何解决?什么是BFC?
【说站】css中align-content属性是什么
1、align-content可以看成是和justify-content是相似且对立的属性,是指垂直方向每一行 flex子项的对齐和分布方式。
很酷的站长
2022/11/24
6220
【说站】css中align-content属性是什么
【说站】css浮动元素的规则介绍
如果两个元素一个向左浮动,另一个向右浮动,左浮动元素的marginRight不会与右浮动元素的marginLeft相邻。
很酷的站长
2022/11/23
6180
【说站】css浮动元素的规则介绍
[重拾CSS]一道面试题来看伪元素、包含块和高度坍塌
前几天某个群友在群里问了一道面试题,就是关于一个自适应的正方形布局的困惑,先贴上代码。我其实很长一段时间没有写 CSS 了,对于里面的一些细节也比较模糊了,因此决定重拾 CSS,来重新捋一捋这题目中的一些知识点。(本文大多采用的讲解方式为 w3 的 CSS 标准 + MDN,如果对标准比较熟悉的大神请跳过这篇文章)
秋风的笔记
2020/10/27
1.2K0
[重拾CSS]一道面试题来看伪元素、包含块和高度坍塌
Day5:html和css
如何实现盒子居中问题,要让盒子实现水平居中,要满足是快级元素,而且盒子的宽度要定义。然后数值为auto即可。
达达前端
2019/07/03
9420
css多浏览常见问题
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是. 以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK. (注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ wid
用户1112962
2018/07/03
1.1K0
相关推荐
(2019)[前端]面试题[1]:CSS BFC是什么【BFC详解】
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验