前端工程师养成计划html+css篇02-盒子模型

盒子模型是css中的重点，这篇文章就来详细的解析这个难点，本片文章将分成两大部分，盒子模型和怪异盒模型

前备知识

1.元素
html网页中每一个标签都是一个元素
2.
块级元素和行内元素的区别

块级元素特点：
	1.从新行开始（一个块级元素独占一行）
	2.高度，行高，外边距以及内边距都可以控制
	3.宽度默认是父容器100%
	4.可以容纳行内元素和其他块元素
行内元素特点：
	1.和相邻行内元素在一行上
	2.高，宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
	3.默认宽度就是它本身内容的宽度（意思是宽度需要元素内的内容撑起来，高度也是一样的）
	4.行内元素只能容纳文本或者其他行内元素（a特殊）
	行内元素注意点：
		1.只有文字能组成段落，所以p标签内不能再放块级元素，同理还有这些标签 h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
		2.链接里面不能再放链接。
行内块元素：同时具备行内元素和块元素的特性
	1.和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙。
	2.默认宽度就是它本身内容的宽度。
	3.高度，宽度，行高，外边距以及内边距都可以设置

标签显示模式转换display
块转行内：display：inline;
行内转块：display：block;

盒子模型

所有的标签元素都会生成一个矩形框，称为元素框，它描述了一个元素在网页布局中所占的位置大小，在网页整体布局中，每个元素不仅有自己的大小和位置，还会影响到其他元素的大小和位置
盒子模型主要有以下几个主要部分

1.width 元素宽度
width用来给元素设置宽度 注意：只有块(block)元素或者行内块(inline-block)元素才能够设置

2.height元素宽度
height用来给元素设置高度 注意：只有块(block)元素或者行内块(inline-block)元素才能够设置

3.盒子边框（border）
边框是盒子与外界的第一层屏障，边框的语法如下
border: border-width || border-style || border-color
4.内边距（padding）
内边距是指边框与内容之间的距离
内边距的书写格式，组合写法：
padding：padding-top padding-right padding-bottom padding-left
也可以每个方向单独来写内边距

盒子模型下盒子的大小计算

在盒子模型下，盒子大小的计算公式为
宽：width+border-left*2+padding-left*2
高：width+border-top*2+padding-top*2

关于盒子模型的大小，有以下几个注意点
1.padding内边距会使盒子变大
2.border也要算进盒子的大小中

5.外边距（margin）
margin属性用于设置盒子外边距。设置外边距会元素之间创建”空白“，创建的这一段对白通常不能放置其他内容。
margin和padding的写法格式一样

盒子居中

盒子居中是一个最有话题的问题，在这里我将演示一个让盒子居中的方法
外边距实现盒子居中
首先满足两个条件：
1.必须是块级元素
2.盒子必须指定了宽度
我们设置左右的外边距为auto，就可以使块级元素水平居中了
p { width: 100px;margin: 0 auto;}

外边距合并

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

当上下相邻的两个块元素相遇时，上方的块元素有下外边距margin-bottom，下面的块元素有上外边距margin-top，那么这两个快元素的垂直间距不是这两个元素的margin-bottom与margin-top的和，而是这两者之间的数值较大者，这种现象被称为相邻元素垂直外边距合并（也称为外边距塌陷）

嵌套块元素垂直外边距的合并

如果两个块元素存在嵌套关系（一个块元素在另一个块元素内），如果父元素（外部元素）没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并
解决方法：
1.可以为父元素定义1像素的上边框或者上内边距
2.可以为父元素添加overflow：hidden

content宽度和高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制
width和height可以写不同数值和相对于父元素的百分比，实际常用像素值

盒子模型
/*元素的空间尺寸*/
高：content height + padding + border + margin
宽：content width + padding + border + margin
/*元素的实际大小*/
高：content height + padding + border
宽：content width + padding + border
注：
1.宽度和高度仅适用于块级元素，对行内元素无效（img和input标签除外）
2.计算盒子模型的总高度=时，需要考虑上下两个盒子的垂直外边距合并的情况
3.如果一个盒子会像父元素一样占满父元素的宽度，如果此盒子没有给定其宽度，则padding不会影响到该盒子的大小

怪异盒子模型

怪异盒模型是IE盒子模型，我们可以通过css样式box-sizing来进行切换

box-sizing: border-box; 怪异盒子模型
box-sizing: content-box; 标准盒子模型

怪异盒模型中：
当内边距和边框宽度相加 < 内容width的时候 总宽度就是设置的width的宽度，内容content宽度为总宽度-内边距和边框宽度

当内边距和边框宽度相加 > 内容width的时候 总宽度就是内边距和边框的宽度，此时内容content被压缩到0

怪异盒子模型的 宽度 高度计算 和标准盒子模型计算方式不同 怪异盒子模型的 content内容宽度会把padding和border算入其中 是由外而内的计算宽度

两种盒子模型区别

注意：主要区别在于盒子的整体宽度高度计算方式不同

1. 用途：正常盒模型主要用于PC端，怪异盒模型主要用于手机端。
2. 原理：正常盒模型的大小是由内到外的，由内部决定外部的大小；而怪异盒模型是由外而内的。
3. 可以同时设置 box-sizing属性来使用这一特性，是其改变border宽度也不影响其他元素；
4. box-sizing:简单理解就是盒子大小基于什么计算的;

盒子模型相关知识点补充说明

高度样式设置auto

图片标签 给设置具体宽度后 可以给高度设置为 auto(自动) 值让其实现等比例自动计算

同行宽度问题

一行内如果多个元素 站位宽度(margin+border+padding+width) 相加大于 容器宽度 无法完整放入的元素会被挤下一行展示

内外边距问题

1. 外边距垂直方向会合并 选最大值 , 水平方向会进行叠加
2. 外边距如果父容器没有边界(硬性边界,边框,内边距) 就会产生穿透效果 子元素的外边距会穿透父元素生效
3. 内外边距都只能设置为整数 不要设置带小数的 边距 长宽

行高与高度

当行高与高度相等的时候 文本垂直居中