（4）HTML&&CSS笔记（外边距合并）

最新推荐文章于 2024-06-08 17:41:35 发布
最新推荐文章于 2024-06-08 17:41:35 发布
阅读量135 收藏
点赞数
分类专栏： HTML&&CSS 文章标签： HTML CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoma_666/article/details/97249776
版权

外边距合并
一个元素与另一个元素之间在垂直方向上合并起来。

解决方案：
1、给父级加内边距来撑开垂直方向的内容。

<html>
	<head>
		<meta charset='utf-8'/>
		<title> Document</title>
		<meta name='keywords' content=''/>
		<meta name='description' content=''/>
		<style type="text/css">
			body{
				margin:0;
			}
			.mydiv1{
				width:500px;
				height:500px;
				background-color:#90f;
				/* margin-top:50px; */
				padding-top:50px;
				box-sizing:border-box;
			}
			.mydiv2{
				width:300px;
				height:300px;
				background-color:#ff0;
				/* margin-top:50px; */
			}
			.mydiv3{
				width:100px;
				height:100px;
				background-color:deeppink;
			}
		</style>
	</head>
	<body>
		<div class="mydiv1">
			<div class="mydiv2">
				<div class="mydiv3"></div>
			</div>
		</div>
	</body>
</html>

2、给父级加边框线来阻止触发BFC机制

<html>
	<head>
		<meta charset='utf-8'/>
		<title> Document</title>
		<meta name='keywords' content=''/>
		<meta name='description' content=''/>
		<style type="text/css">
			body{
				margin:0;
			}
			.mydiv1{
				width:500px;
				height:500px;
				background-color:#90f;
				/* margin-top:50px; */
				/* padding-top:50px; */
				/* box-sizing:border-box; */
				border:1px solid transparent;
			}
			.mydiv2{
				width:300px;
				height:300px;
				background-color:#ff0;
				margin-top:50px; 
			}
			.mydiv3{
				width:100px;
				height:100px;
				background-color:deeppink;
			}
		</style>
	</head>
	<body>
		<div class="mydiv1">
			<div class="mydiv2">
				<div class="mydiv3"></div>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述
兄弟元素之间外边距合并：
元素1加下外边距，元素2加上外边距；
两者之间会产生外边距合并，外边距取两者中的最大值；

解决方案：
直接给一方加设定的外边距；

<!doctype html>
<html>
	<head>
		<meta charset='utf-8'/>
		<title> Document</title>
		<meta name='keywords' content=''/>
		<meta name='description' content=''/>
		<style type="text/css">
			body{
				margin:0;
			}
			.mydiv1{
				width:200px;
				height:200px;
				background-color:#90f;
				border:1px solid transparent;
				margin-bottom:130px;
			}
			.mydiv2{
				width:300px;
				height:300px;
				background-color:#ff0;
			}
		</style>
	</head>
	<body>
		<div class="mydiv1"></div>
		<div class="mydiv2"></div>
	</body>
</html>

布局技巧
1、从外面到里面
2、从简单到复杂
3、从大到小
4、使用辅助线（边框线，背景颜色）

沭瑾
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css怎么把多个块合并,CSS外边距合并&块格式上下文
weixin_39590601的博客
08-04 592
前言之前在前端开发的过程中，都没有遇到外边距合并的问题(其实是因为大多时候都直接用前端样式库(〃'▽'〃))，这一次需要动手排一个页面，也挺简单，但是遇到了一个奇怪的问题，所以学习记录一下。问题测试代码如下：test* {margin: 0;padding: 0;}body {max-width: 750px;margin: 0 auto;}.div1 {background: yellow;he...
web之html&css相关笔记
09-26
9. **盒模型**：盒模型包括内容（content）、内边距（padding）、边框（border）和外边距（margin）四部分，决定了元素的尺寸和空间关系。 10. **CSS复合选择器**： - 后代选择器（如`div p`） - 子代选择器（如`...
CSS笔记——盒模型及外边距合并解决
bqiuer的博客
09-25 175
是用于布局和定位HTML元素的一种概念
HTML&CSS笔记
最新发布
owen0409liu的博客
06-08 1010
HTML指的是超文本标记语言，是一种用来描述网页的语言；它不是一种编程语言，而是一种标记语言它可以加入图片、声音、动画、多媒体等内容（超越文本限制）它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超链接文本）CSS（层叠样式表）也是一种标记语言，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式CSS用于美化HTML页面选择器的作用：根据不同需求把不同的标签选出来，简而言之就是选择标签。
HTML&CSS 学习笔记
王珂的专栏
04-22 1912
HTML5 CSS3 定位 布局
【温故知新】CSS学习笔记（外边距合并）
少年休闲海
05-07 1160
CSS外边距合并 外边距合并 使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。 一、相邻块元素垂直外边距的合并 当上下相邻的两个块元素相遇的时候，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距并不是margin-bottom加上margin-top之和，而是两者之间的较大者，这种现象被称之为相邻...
JavaWeb基础4——HTML,JavaScript&CSS
vincewm的博客
07-24 9456
HTML,JavaScript&CSS、元素、标签、css 选择器、属性、JavaScript基础语法、JavaScript对象、BOM浏览器对象模型、DOM文档对象模型、事件监听、正则对象RegExp/ES6
HTMLCSS笔记
weixin_50116360的博客
03-01 1235
HTML、CSS学习笔记
HTML CSS整理笔记
热门推荐
Lin16819的博客
12-12 3万+
常见字体单位： 1.em 移动端常用的字体尺寸单位，说白em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5。 但当div进行嵌套时，em始终按当前div继承的字体大小来缩放。 2.rem r是root的意思，即相对于根节点html的font-size进行缩放，当有嵌套关系时，嵌套关系的元素的字体大小始终按照根节点的字体大小...
HTML5 & CSS学习笔记
m0_56387086的博客
05-26 987
1.html骨架 <head>头标签</head> <body>主体标签</body> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
Html与Css学习笔记以及经验总结
06-23
CSS还提供了盒模型，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)，这四部分共同决定了元素的总尺寸和布局。 在实际应用中，CSS预处理器如Sass和Less可以提升CSS的编写效率，提供变量、嵌套...
html+css笔记总结1
08-04
HTML 和 CSS 是网页设计的基础，本笔记主要涵盖了HTML和CSS的一些关键知识点，包括元素的布局、样式设置以及一些实用技巧。 1. **padding, border, margin的关系**：这三者决定了元素的尺寸和间距。`width` 和 `...
HTML与CSS笔记总结.pdf
04-03
层叠是CSS的一个核心概念，它意味着样式可以来自多个源，如内联、内部和外部样式表，这些样式会被合并成一个最终样式，用于决定元素的显示效果。如果没有指定样式，浏览器会应用默认样式。不同的浏览器可能会有轻微...
HTML+CSS+JS学习笔记
10-25
4. 图片标签`<img>`：引入图像，通过`src`属性指定图像路径，可设置宽度`width`、高度`height`、标题`title`（鼠标悬停时显示）和备用文本`alt`（图片加载失败时显示）。 5. 超链接标签`<a>`：链接到其他资源，`...
文本标签在div内水平垂直居中显示
沭瑾
08-31 2406
在写页面时，通常导航栏和页面最底部的信息一般都是文字信息，而且都是居中显示的。 能实现这种效果的方法有很多，用定位或者浮动都可以，我今天就介绍两种别的方法来实现这种效果。 1）给父级元素加display：table；text-align：center； 给子元素添加display：table-cell；vertical-align：center； 上图代码： <style> ...
外部样式表的调用
沭瑾
08-29 1338
1、第一种写法： <link rel="stylesheet" type="text/css" href="目标文件路径及全称" /> 2、第二种写法： <style type="text/css"> @import url(目标路径及全称); </style> link和@import的区别（建议使用link元素加载外部样式表） 本质上，这两种方式都是为...
（15）HTML&&CSS笔记（HTML5标签，hsl颜色）
沭瑾
07-26 973
1、html5 最新版本； canvas、svg、数据交互、css3动画效果、css3选择器； 2、h5 结构标签 header 头部标签 section 板块标签 nav 导航栏 footer 页脚 aside 侧边栏，轮播图，nav导航栏 3、语义化标签 article 文章标签或内容标签 hgroup 标题组的标签 time 表示时间或日期的标签 address 地址标签 mark ...
css属性
沭瑾
08-29 457
1、css属性 1）每个css样式都必须由两部分组成：选择符（Selector）和声明（Decleration） 注：声明又包括属性（Properyt）和属性值（Value） 2）css属性：属性是指定选择符具有的属性，他是css的核心，css2共有150多个属性； 3）css属性值 ：属性值包括法定属性值和常规的数值加单位或颜色值(colorValue)；如（25px）。 2、关于文本的css声...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值