【CSS】盒模型简解

文章目录

    • 一、标准盒模型
      • 1.1、边框(border)
      • 1.2、内外边距(padding + margin)
      • 1.3、取值规则
    • 二、怪异盒模型

一、标准盒模型

简介:CSS 盒模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

【CSS】盒模型简解_第1张图片

说明:元素框的最内部分是实际的内容,直接包围内容的是内边距(padding)。内边距呈现了元素的背景。内边距的边缘是边框(border)。边框以外是外边距(margin),外边距默认是透明的,因此不会遮挡其后的任何元素。

提示: 背景应用于由内容(content)、内边距(padding)和边框(border)组成的区域!不包括外边距(margin)!

  • 盒子大小=元素宽高+边框厚度+内边距+外边距
1. 盒子宽度:(margin-left) + (border-left) + (padding-left) + width + (margin-right) + (border-right) + (padding-right)
2. 盒子高度:(margin-top) + (border-top) + (padding-top) + height + (margin-bottom) + (border-bottom) + (padding-bottom)

1.1、边框(border)

概述:border是围绕元素内容和内边距的一条或多条线,俗称边框。

说明:由于 border-style 的默认值是 none,如果没有声明样式,就相当于 border-style: none。因此,如果您希望边框出现,就必须声明一个边框样式。

  • style 属性有:
1. solid:实线
2. dashed:虚线
3. dotted:点状线
4. double:双线
5. none 或 0 去掉边框
  • 示例:设置 1px 实线 红色 边框
/* 一次设置 */
div {
  border: 1px solid red;
}
/* 分开设置 */
div {
  border-width: 1px;
  border-style: solid;
  border-color: red;
}
/* 单边设置 */
div {
  border-top: 10px solid #000;
  border-right: 20px dashed #111;
  border-bottom: 30px dotted #222;
  border-left: 40px double #333;
}

1.2、内外边距(padding + margin)

  • padding:是设定页面中一个元素内容到元素边框之间的距离,俗称内边距。
  • margin:是设定页面中一个元素外边的空白区域,俗称外边距。
相同点:
1. 两者均可以使用然后长度单位或百分比值!
2. 百分数值都是相对于其父元素的 width 计算的,如果父元素的 width 改变,它们也会改变。

不同点:
3. 外边距(margin)值可以是负值,内边距(padding)值不允许为负值!
4. 内边距(padding)是额外加在元素原有大小之上的,如果想要保证元素大小不变,需要重元素宽或高上减掉所添加的padding值大小。
5. 两个盒子之间会发生 margin 叠加,叠加后的值以最大外边距为准。
  • 用法1:设置四边属性值方法
/* 一个值写法:上下左右 */
h1 {
  padding: 10px;
  margin: 10px;
}
/* 两个值写法:上下 + 左右 */
h2 {
  padding: 10px 20px;
  margin: 10px 20px;
}
/* 三个值写法:上 + 左右 + 下 */
h3 {
  padding: 10px 20px 30px;
  margin: 10px 20px 30px;
}
/* 四个值写法:上 + 右 + 下 + 左 */
h4 {
  padding: 10px 20px 30px 40px;
  margin: 10px 20px 30px 40px;
}
  • 用法2: 单独设置某一方向值
/* 设置上方向 */
h1 {
  padding-top: 10px;
  margin-top: 10px;
}
/* 设置右方向 */
h1 {
  padding-right: 10px;
  margin-right: 10px;
}
/* 设置下方向 */
h1 {
  padding-bottom: 10px;
  margin-bottom: 10px;
}
/* 设置左方向 */
h1 {
  padding-left: 10px;
  margin-left: 10px;
}

1.3、取值规则

【CSS】盒模型简解_第2张图片

1. 如果指定了 3 个值,则第 4 个值(left)会从第 2 个值(right)复制得到。
2. 如果给定了 2 个值,第 4 个值会从第 2 个值复制得到,第 3 个值(bottom)会从第 1 个值(top)复制得到。
3. 最后一个情况,如果只给定 1 个值,那么其他 3 个外边距都由这个值(top)复制得到。

二、怪异盒模型

  • box-sizing :属性允许您以特定的方式定义匹配某个区域的特定元素
/* 标准盒模型属性:content-box */
div {
  box-sizing: content-box;
}

/* 怪异盒模型属性:border-box */
div {
  box-sizing: border-box;
}
1. content-box:
宽度和高度应用于元素的内容框(content),在宽度和高度之外绘制元素的内边距和边框。
相当于:元素宽度= width(content) + padding + border-width
2. border-box:
宽度和高度决定了元素的边框盒,在宽度和高度之内绘制元素的内边距和边框。
相当于:元素宽度= width = content + padding + border-width
  • 示例:
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
			div {
				width: 50px;
				height: 50px;
				padding: 5px;
				border: 6px solid red;
				margin: 7px;
			}
		style>
	head>
	<body>

		<div>1div>
		<div style="box-sizing: content-box">2div>
		<div style="box-sizing: border-box;">3div>

	body>
html>
  • 运行结果:
    【CSS】盒模型简解_第3张图片
  • 标准盒模型content-box

【CSS】盒模型简解_第4张图片

  • 怪异盒模型border-box

【CSS】盒模型简解_第5张图片

你可能感兴趣的:(CSS,笔记,css)