盒模型（一）

一盒模型：是建立在“块”之上。

1盒子模型：它是网页设计中CSS使用的一种思维模式，具有内容(content)、填充(padding)、边框(border)、边界(margin)属性的一种元素称为盒子模型。

2<!DOCTYPE html>:声明文档解析类型，避免浏览器的怪异模式：

BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面；元素的width=content+padding+border
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面；元素的width=content的宽度
CSS3新增一个box-sizing属性（解决上面问题）

content-box 元素的width（设定宽度是盒子内容宽度）；
border-box 元素的width=width（设定的宽度是盒子总宽度）；

3 盒子模型理解及相邻元素margin的计算规则：https://blog.csdn.net/lxcao/article/details/52620453

二盒模型定位：

Static(静态的）:默认的
Relative(相对的):相对定位会按照元素的原始位置对该元素进行移动。
Absolute(绝对的) :元素可以放置到页面上的任何位置。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>.
Fixed (固定的):元素相对于浏览器窗口对元素进行定位。通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。
Float (浮动的): 用于页面布局。CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。

三盒模型width 与margin注意点：

1 width/height

　　值:<length> | <percentage> | auto | inherit

　　初始值: auto

　　应用于: 块级元素和替换元素

　　继承性: 无

　　百分数: 相对于包含块的width/height

　　计算值: 对于auto和百分数值，根据指定确定；否则是一个绝对长度，除非元素不能应用该属性(此时为auto)

auto：宽高和margin可以设置auto。对于块级元素来说，宽度设置为auto，则会尽可能的宽。详细来说，元素宽度=包含块宽度—元素水平外边距-元素水平边距宽度-元素水平内边距；高度设置为auto，则会尽可能的窄。详细来说，元素高度=恰好足以包含其内联内容的高度。[注意]如果没有显式声明包含块的height，则元素的百分数高度会重置为auto

2 height:100%和height:100vh区别：

vh就是当前屏幕可见高度的1%，也就是说height:100vh == height:100%;

但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，但是设置height:100vh，该元素会被撑开屏幕高度一致。

四 margin:auto理解：https://www.cnblogs.com/raind/p/10726591.html