精通CSS学习笔记第三章盒子模型定位_精通盒子模型-优快云博客

本文链接：https://blog.youkuaiyun.com/One_punchman_zxl/article/details/118734172

本文详细介绍了CSS的核心概念，包括盒模型的两种类型及其对元素尺寸的影响，块级、行内和行内块元素的区别，外边距折叠规则，以及包含块在定位中的作用。此外，还讨论了浮动元素如何影响布局，以及如何通过清除浮动和创建块级格式化上下文来处理布局问题。最后，通过实例展示了如何使用`overflow:auto`实现两栏布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总结一下就是这章讲了css核心，就是盒子模型，然后讲了一些比较特殊的情况，比如合并外边距，关于两栏布局里面那个overflow:auto为什么可以实现两栏布局的答案也在这。

1.盒模型：

outline->padding->border->margin->content

默认情况下，为标准盒模型，也就是box-sizing为content-box，这种情况下，width和heigth是指的内容的宽度和高度；当box-sizing为border-box，这时的宽度和高度为加上边框和内边距的宽度和高度。

当我们用border-box时，就可以保证盒子的大小为多少多少，不会受边框和内边距的影响。

可以设置max-width和min-width，来保证元素的尺寸区间。

2.分类：
块级盒子，行内盒子，行内块。

行盒子指一行文本形成的水平盒子。

对应block，inline，inline-block。

块级独占一行，宽度高度能设置。

行内盒子水平流动，水平方向受内边距，外边距，边框影响，垂直方向不受影响，给行内盒子设置宽度高度是无效的（行盒子设置line-height）。

行盒子（注意和行内盒子区分），它的高度由行内盒子决定，设置line-height设置行高，行内盒子的水平方向外边距，内边距，边框也会算入宽度。

匿名盒子：就是不带标签，直接写文本的盒子，会变成块盒子。

3.外边距折叠

任何两个相邻的外边距相互接触后，都会折叠为一个，取值为大的那个值，多个相接触取最大的值。

任何两个就表示，一个元素上外边距和下外边距接触也会折叠。

4.包含块

元素属性假如用百分比，那么参考的就是包含块的高度，上下左右内，外边距都是基于包含块的高度！不基于宽度。

包含块和定位有很大关系：

默认，也就是static，静态定位，或者relative相对定位，包含块就是最近父元素，并且该父元素必须能够提供类似块级的上下文，如block，inline-block，table-cell，list-item等。
绝对定位，包含块为display为static以外的任何值的祖先元素。没有就是html元素（起始包含块）。
固定定位，fixed，包含块是视口。
浮动，float，浮动模型，盒子可以向左右移动，直到接触到包含块的外边沿或者遇到浮动元素。如果包含块太窄，会“卡住”：

5.浮动盒子

浮动盒子会影响行盒子的内容的排列，也就类似文字绕图片的效果。

可以通过clear 加方向，left，right，both，来处理行盒子接触浮动盒子内容偏移的情况。

6.格式化上下文
也就是一些排布规则：

下面这个叫块级格式化上下文：

下面这些情况会让元素自动包含突出的浮动元素，而且所有块级盒子的左边界默认与包含块的左边界对其（和文字顺序同方向）：

display为inline-block或者table-cell之类的元素。
float属性不是none
绝对定位的元素
overflow属性不是visible的元素

总的来说，就是上面这些情况，盒子就会把内部的浮动元素包含进来，也就是会改变盒子的宽度高度等。

当一个元素触发上面的条件，并且紧挨着一个浮动元素，那么就会忽略必须接触边界的条件，宽度缩短，和浮动元素并排，假如父类宽度不够就换行。

一个demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<section>
			<div class="demo-div"></div>
			<p class="clear-demo-p">现在的回答：
				首先说一下，**为什么要异步加载？**
				因为JavaScript脚本会阻塞HTML和CSS对页面渲染，影响上屏时间，所以要异步加载JavaScript脚本。
				然后说一下，**两种异步加载属性的特点和区别**
				两个属性，async和defer，会告诉浏览器，立刻异步下载JavaScript文件。区别在于async是下载完后立刻执行，而defer是界面渲染完后执行。多个defer会按出现顺序执行，而async是只要下载完就执行。
			</p>
			<p>
				后代选择符：

				```css
				blockquote p{
				padding-left:2em;
				}
				```

				3.id和类选择符：

				```css
				#intro{
				...
				}

				.date-post{
				...
				}
				```
				4.子选择符：</p>
		</section>
		<div class="media-block">
			<img class="media-fig" src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="The Pic" />
			<div class="media-body">
				<h3>Title of this</h3>
				<p>Brief description of this</p>
			</div>
			<!-- <div style="clear: both;"></div> -->
		</div>
		
		<div class="media-block-1">
			<img class="media-fig-1" src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="The Pic" />
			<div class="media-body-1">
				<h3>Title of this</h3>
				<p>Brief description of this</p>
			</div>
			<!-- <div style="clear: both;"></div> -->
		</div>
		<style>
			.media-block-1{
				background-color: gray;
				border: solid 1px black;
			}
			
			.media-fig-1{
				float: left;
				margin-right: 5%;
				
			}
			
			.media-block-1,.media-body-1{
				/* overflow: auto; */
				/* display: inline-block; */
				/* display: table-cell; */
				overflow: auto;
			}
		    .media-block::after{
				content: " ";
				clear: both;
				display: block;
			}
			.media-block {
				background-color: gray;
				border: solid 1px black;
			}

			.media-fig {
				float: left;
				width: 30%;
			}

			.media-body {
				float: right;
				width: 65%;
			}
			.media-body{
				float: right;	
				width: 65%;
			}
			.demo-div {
				width: 50px;
				height: 50px;
				outline: #FF0000 solid 1px;
				float: left;
			}

			.clear-demo-p {
				/* clear:left; */
			}
		</style>
	</body>
</html>