盒模型和元素转换

盒模型：

width+height

padding

margin

border

标准盒模型：box-sizing:content-box;

盒子实际宽度=width+border-left+border-right+padding-left+padding-right

盒子实际高度=height+border-top+border-bottom+padding-top+padding-bottom

怪异盒模型：直接进行內减（border、padding）：box-sizing:border-box;

盒子的实际宽=width

盒子的实际高=height

版心：版心宽度，自己去设计稿测量

css显示模式

html元素分为三大类：

块级元素、行级元素、行内块元素

块级元素——本身属性为display:block;的元素才能被称为块级元素

div、h系列、p、ul、li、ol、dl、dd、dt

块级元素的特性

独立成行、可以设置宽高

在不设置宽度的情况下：块级元素的宽度是他父级元素内容的宽度

在不设置高度的情况下：块级元素的高度是他本身内容的高度

可以设置四个方向的外边距和内填充

行级元素——本身属性为display:inline;的元素才能被称为行级元素

span、a、b、em、i、strong

行级元素的特性

默认并排显示，不可以设置宽高，宽高取决于能容

行级元素只能容纳文本或者其他的行级元素（不能再行级元素里面嵌套块级元素）

不能设置上下的内填充和外边距

行级元素之间有间隙（换行和空格会被解析）

行内块元素——本身属性为display:inline-block;的元素才能被称为行内块元素

img、input（表单）

行内块元素的特性

默认并排显示，可以设置宽高，宽高取决于内容

可以设置任意方向的内填充和外边距

并排排列时，有间距（换行和空格会被解析）

元素类型的相互转换

转化为块级元素：display:block;

转化为行级元素：display:inline;

转化为行内块元素：display:inline-block;