2.替换和不可替换元素，元素的格式化
替换和不可替换元素
1.替换元素
<img><input><textarea>
<select><object>
1.替换的行内元素具有“内在尺寸”，尺寸是有自身决定的，而不会受周围环境的影响，如<img>和<input>等，但是如果同时定义<img>标签的width属性，和css的width属性，根据层叠原理，css的属性将优先于<img>标签的width属性;替换的行内元素的高度是有height属性决定；
2.非替换元素
2.非替换的行内元素（如 a,span等元素）的宽度是其内容经过浏览器解释后实际的宽度，而不能通过设定width属性为非替换的行内元素设置宽度，非替换的行内元素的高度是有框高度的行高决定的。
3.我们也知道，行内元素设置width，height无效。那么来了img标签、input标签为啥可以设置呢？
他们属于行内替换元素
1. 行内替换元素img input，除了具备行内元素同行并列的特点，他可以设置影响文档流布局的
内外边距以及宽高。且设置高度等同于设置行高，会垂直居中
2.margin 行内元素的边距，不会合并（替换非替换）。不同于块级元素，会合并上下，
左右边距。
盒模型
1.盒模型需要弄清的几个概念
1. 标准盒模型宽高指的是盒模型中内容的高度，盒模型指的是盒子在网页中占得的大小，当改变
margin，border，padding时，盒子的宽高不会改变，但是盒子在网页中占据的空间会变大。
2. IE盒模型宽高指的是盒模型中内容的高度+padding+border，根据Doctype确定是哪种盒子。
3. min-width/max-width有兼容性问题，IE不支持
4. 可以设置宽高的元素只有块级元素和替换元素。（img, input, textarea）
5. 垂直方向，两个相邻的元素都设置外边距，外边距会发生合并。
6. 内联元素和使用display：inline设置为内联元素的宽高无效，垂直方向的padding，margin
无效，水平方向的padding，margin有效。
7. 块级元素和使用display：block设置为块级元素的padding，margin，width，height都生效。
8. display：inline-block，元素呈现为inline,但是具有block特性。
9. 对于块级元素，设置height=line-height，可以垂直居中。
10. 盒子模型当只设置了宽或者高没有设置的时候，默认为auto，那么这个属性值是由盒子模型
的内容和子元素的内容决定的，但是浮动的子元素不能撑开盒子。
html文档中的每个元素都被描绘成矩形盒子，盒模型通过四个边界来描述：margin（外边距），border（边框），padding（内边距），content（内容区域）
image.png
2.1 元素背景区域
如果边框的颜色为透明，背景将应用于内容，内边距和边框组成的区域。
2.2 水平格式化
非替换元素的水平格式化
水平格式化的7大属性值加起来是父级元素的width值
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
2.2其中margin-left，width，margin-right可以设置为auto。
1.如果三个属性中某个属性设置了auto：
设置auto的属性值=width-另外两个确定的值
2.三者的值都确定了但是总和不等于父级元素的width
在FF中，margin-right的值为开发者设定的值
在Chrome中，margin-right被强制为auto
3.如果margin-left和amrgin-right都设置为auto
margin-left和amrgin-right会设置相等的值，因此元素将在父级元素中居中，
注：text-align设置为center只适用于块级元素中的内联内容居中，并不能使块级元素居中。
4.某个外边距和width设置成auto
设置为auto的外边距会为0，width会设置为所需的值来填充父级元素。
5.全设置成auto
两个外边距会设置为0，width会尽可能宽。
6.负外边距
7个属性只要都是大于等于0的值，总和总是等于父级元素的width，不会超过父级元素的区域
但是可以通过制定负外边距来得到比父级元素width更大的区域
margin设置负值那么整个盒子的宽度会变大
替换元素的水平格式化
替换元素的水平格式化规则和非替换元素的规则类似，只有一个width有区别，如果width设置为auto，则元素的宽度是内容的固有宽度。注意：对于img标签，如果width不等于其固有宽度，则height也会等比例增加，除非设置特定值。反过来如果height设置高度，width也会等比例增加
2.3 垂直格式化的7大属性值加起来是父级元素的width值
margin-top
border-top
padding-top
height
padding-bottom
border-bottom
margin-bottom
其中margin-top，margin-bottom和height可以设置成auto
一个正常流中的块元素的margin-top和margin-bottom设置为auto后，会被设置为0，即不能将元素垂直居中，实际上元素没有外边距。定位元素如果设置成auto有不同的处理结果。
