盒子模型（20210705）

1.盒子模型

每个HTML元素都可以看作一个装了东西的盒子：

• 宽度、高度：盒子本身内容的宽度（width）和高度（height）
• 内边距：盒子里面的内容到盒子边框之间的距离即内边距（padding）
• 边框：盒子本身有边框（border）。
• 外边距：盒子边框外和其他盒子之间，还有外边距（margin）

标准盒子模型示意图：

.d1{
	//盒子内容的宽和高
	width:200px;
	height:200px;
	//边框 
	border:1px solid pink;
	border-top-width:5px;//上边框像素
	border-right-style:dashed;//右边框虚线
	border-bottom-color:blue;//下边框颜色
	//内间距：盒子内容与边框的距离
	padding:20px;//上下左右20px
	padding-left:5px;//左侧内间距5px
	padding-top:30px;//上方内间距30px
	padding-right:10px;//右侧内间距10px
	padding-bottom:40px;//下方内间距40px
	//外间距
	margin-top:50px;//上外
	margin-left:10px;//左外
	margin-bottom:10px;//下外
}

<div class="d1">
	div内容
</div>

1.1边框样式
位置：top，bottom，left，right；
属性：width，style，color；

• border-(位置)-width： 设置或检索该位置对象边框宽度。
• border-(位置)-style： 设置或检索该位置对象边框样式（实线，虚线等）。
• border-(位置)-color： 设置或检索该位置对象边框颜色。
• border-属性(width/style/color):a
  四边框相同设置。
• border-属性(width/style/color):a b
  上下设置为a，左右设置为b。
• border-属性(width/style/color):a b c
  上设置为a，左右设置为b，下设置为c。
• border-属性(width/style/color):a b c d
  上设置为a，右设置为b，下设置为c，左设置为d（顺时针）

1.2内边距样式

1.3外边距样式

• 通过设置外边距 可以让某个盒子在它的父标记中整体居中
  margin: 0 auto（常用）;
• 两个标记同时设置了上下外边距 边距=较大值
• 两个标记同时设置了左右外边距 边距=两边距之和

2.元素默认样式与CSS重置

常用元素默认样式：

• body的margin为8px
• p标签的上下外边距为16px
• h1标签的上下外边距为21.440px
• ul标签的上下外边距也为16px，左内边距也为40px
  CSS重置：在实际开发中，为了兼容性，也为了开发者更好的设置自己想要的样式，那么凡是浏览默认的样式，都不会使用，这就是CSS重置。

/********************** 这是一个最简单的CSS重置 **********************/
body,div,ul,ol,li,p,h1,h2,h3,h4,h5,h6,span,a,img,form{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}

3.元素分类

3.1行级标记

• 可以和同类型标记共处一行。
• width，height，margin-top，margin-bottom无效。
• 上记以外盒子模型属性都有效可设置（border，padding，margin-left，margin-right）。
• 最常用行级标记的是span，因为span标签没有默认的样式。

span{
	/* 边框有效 */
	border: 1px solid red;
	/* 宽高无效 */
	width: 200px;
	height: 200px;
	/* padding有效 */
	padding-left: 10px;
	padding-bottom: 10px;
	/* margin左右有效,上下无效 */
	margin-left:10px ;
}

3.2块级标记

• 块级标记独占一行显示。
• 块级标记如果不设置宽度width默认占满这一行，如果不设置高度height 默认由内容撑开。
• 支持所有的盒子模型样式属性。
• 最常用块级标记的是div，div没有默认的样式，常常当做一个容器。
  区域 header nav section aside footer

3.3行内块标记

• 可以和同类型标记以及行级标记共处一行显示。
• 支持所有盒子模型的样式属性
• 例：input,img,button,textarea,label

4.display

• 控制盒子的显示与隐藏
  属性值：none；设置元素不会被显示。

span{
	display: none;
}

• 行级标记，块级标记，行内块标记的转变
  属性值：block；标记被显示为块级标记。
  属性值：inline；标记被显示为行级标记。
  属性值：inline-block；标记被显示为行内块级标记。

span{
	display: block;
}

5.overflow-内容溢出

块的尺寸是固定的，内容可能超出其尺寸时，使用overflow。

div{
	width: 100px;
	border: 1px solid red;
	/* overflow: hidden; */
	overflow: auto; //滚动条
}

注意：不想以滚动条展示，希望内容自动折行时，使用word-break：break-all；

div{
	width: 100px;
	border: 1px solid red;
	/* overflow: hidden; */
	/* overflow: auto; */
	/* 自动折行 */
	word-break: break-all;
}

6.边框盒子：border-box

边框盒子总体尺寸不受边框、内边距影响，总体尺寸始终等于width与height的设置。

div{
	box-sizing: border-box;
	/* 如果是边框盒子 width就代表整体尺寸 */
	width: 300px;
	border: 1px solid red;
	padding:50px;
	margin: 20px;
}

默认： content-box：内容盒子
css3之前盒子模型是内容盒子，也就是宽和高都是内容的宽和高
css3之后新增的盒子是边框盒子，宽和高是边框的宽和高
可以使用box-sizing设置盒子的类型