CSS盒子模型(重点)

盒子模型(Box Model)把HTML页面中的布局元素当做一个矩形盒子，也就是一个盛放内容的容器组成部分内容边框（border）内边距（padding）内容与边框的距离外边距（margin）盒子边框与相邻盒子边框的距离标准模型盒子边框（border）语法：border: border-width || border-style || border-color属性：...

李亚飞的博客

4798人浏览 · 2020-01-17 15:00:48

李亚飞的博客 · 2020-01-17 15:00:48 发布

盒子模型(Box Model)

把HTML页面中的布局元素当做一个矩形盒子，也就是一个盛放内容的容器

组成部分

内容
边框（border）
内边距（padding）内容与边框的距离
外边距（margin）盒子边框与相邻盒子边框的距离

标准模型

在这里插入图片描述

盒子边框（border）

语法：

border: border-width || border-style || border-color

属性：

border-width :定义边框粗细，默认单位px
border-style:边框的样式
- none:没有边框
- solid 边框为单实线
- dashed边框为虚线
- dotted 边框为点线
border-color:边框颜色

示例

div {
	width:500px;
	height:500px;
	/*边框宽度*/
	border-width: 5px;
	/*边框实线*/
	border-style:solid;
	/*边框颜色*/
	border-color: red;
	/*简写*/
	/*边框粗细 边框样式 边框颜色*/
	border: 5px solid red;
}

盒子边框单独指定样式

上边框	下边框	左边框	右边框
border-top-style:样式;	border-bottom-style:样式;	border-left-style:样式;	border-right-style:样式;
border-top-width:宽度;	border- bottom-width:宽度;	border-left-width:宽度;	border-right-width:宽度;
border-top-color:颜色;	border- bottom-color:颜色;	border-left-color:颜色;	border-right-color:颜色;
border-top:宽度样式颜色;	border-bottom:宽度样式颜色;	border-left:宽度样式颜色;	border-right:宽度样式颜色;

表格的细线边框

属性：
border-collapse:collapse
示例：

th,
td,
table {
	/*会发现表格边框是2px*/
	border: 1px solid red;
	/*合并相邻边框*/
	border-collapse:collapse;
}

内边距(padding)

边框与内容的距离

属性：

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

简写

padding: 10px 上下左右都为10px
padding: 10px 20px 上下 10px 左右20px
padding:10px 20px 30px 上 10px 左右20px 下30px
padding:10px 20px 30px 40px 上 10px 右20px 下30px 左40px (顺时针)
记忆方法：先分上下，再分左右

注意：

添加内边距之后，盒子边距会变大

内盒尺寸计算

盒子高度=内边距上下宽度+内容高度+边框宽度
盒子宽度=内边距左右宽度+内容高度+边框宽度

pandding不影响盒子大小的情况

div {
	width:100px;
	height:100px;
	background-color:red;
}
p {
	height:30px;
	background-color:orange;
	padding-left:30px;
}

<html>
	<body>	
		<div>
			<p> AAA</p>
		</div>
	</body>
</html>

效果
在这里插入图片描述
盒子模型

结论
如果盒子没有指定宽度，则不会被撑开

外边距(margin)

盒子与相邻盒子的距离
属性
与内边距相似，将padding替换为margin
简写
与内边距相同，上右下左

实现盒子居中对齐

	div {
		/*必须要有宽度*/
		width:300px;	
		/*让块级盒子居中对齐水平,左右外边距设置为auto*/
		margin: 0 auto;
		/*其他写法*/
		margin :auto;
		/*其他写法*/
		margin-left:auto;
		margin-right:auto;
	}

文字居中与盒子居中

 p{
 /*文本内容、行内元素、行内块元素*/
	text-algin:center;
	}
div {
/*块元素居中*/
	margin:0 auto;
}

插入图片与背景图片区别

插入图片：常用，一般做产品展示类
- 移动位置只能靠盒子模型 padding margin
背景图片：一般用作小图标或者超大图片
- 移动位置通过 background-position

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pic,
        .bg{
            width: 2000px;
            height: 1000px;
            background-color: aquamarine;
        }
        .pic img {
            margin: 200px;
        }

        .bg {
            /*padding: 200px;*/
            background-image: url(img/background.jpeg);
            background-repeat: no-repeat;
            background-position: 100px 100px;
        }
    </style>
</head>
<body>
    <div class="pic">
        <img src="img/background.jpeg" alt="">
    </div>
    <div class="bg"></div>

</body>
</html>

清楚默认内外边距

为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除

代码

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。

外边距合并

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

解决方案：尽量给只给一个盒子添加margin值。

嵌套块元素垂直外边距的合并（塌陷）

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
父元素的上外边距会与子元素的上外边距发生合并
合并后的外边距为两者中的较大者

解决方案：

可以为父元素定义上边框。
可以为父元素定义上内边距
可以为父元素添加overflow:hidden。

盒子模型布局稳定性

width 、 padding 、margin
稳定性： width > padding > margin
原因：

margin会有合并的问题
padding会撑大盒子，需要计算盒子数据

相关推荐：
《学习html看这个就够了》
《学习CSS看这个就够了(一)》
《学习CSS看这个就够了(二)》

在这里插入图片描述

本文参考尚硅谷前端学习课程

向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...