11-基本视觉格式化

1-元素、包含块
A-替换元素、非替换元素
A1-替换元素
PS：根据标签的属性来决定显示的内容,而不是文本内容。如<img src=“”/>,<input type=“text”/>
A2-非替换元素
PS：根据元素的文本内容来决定显示内容，HTML大多数都是非替换元素。

B-块级元素、行内元素
PS：区别
(1)-块级元素会自动换行，并在前后加上分隔符，行内元素则不会。
(2)-块级元素可以设置width和height样式，而行内非替换元素无效，但行内替换元素有效。
(3)-在CSS中，块级元素可以设置margin的上下，而行内非替换元素无效，但行内替换元素有效。

C-包含块
PS：由最近的块级祖先框、行内块祖先框、表单元格的内容边界构成

2-块级元素
A-水平格式化

包含块没设置width	元素宽度=width+padding-left+padding-right+border-left+border-right+margin-left+margin-right=父元素的width
包含块设置了 Width,以width=600px为例	1-超过	水平格式化属性值>父元素的width
	2-等于	水平格式化属性值=父元素的width

包含块设置了 Width,例如只设置外边距、宽度时，且父元素的宽度为600px,存在以下情况	3-小于	宽度+左外边距+右外边距<600px，则强制右外边距补充剩下的像素
	4-有1个auto	则有该值的属性补充剩下的像素
	5-有2个auto	1-左外边距、右外边距为auto时，则剩下的像素两个外边距平分。是设置元素居中的好方法，注意这里不是文本居中。 2-左(右)外边距、宽度为auto时，则外边距值为0，剩下的像素宽度补充。
	6-有3个auto	则外边距变为0，宽度补充剩下的像素，这相当于没有设置这三个属性。
特列	<img>标签的width属性设置成auto会是图像本来的宽度，而不会补充像素

B-垂直格式化

关于包含块的height	1	当包含块没设置height,没设置上下边框或内边距时，其height大小由子元素的垂直属性相加(但不包括最上面的子元素的上外边距和最下面的子元素的下外边距)
	2	当包含块没设置height,但设置上下边框或内边距时，其height大小由子元素的垂直属性相加(包括最上面的子元素的上外边距和最下面的子元素的下外边距)
	3	当包含块设置height,没设置上下边框或内边距时，其height 不包括最上面的子元素的上外边距
	4	当包含块设置height,设置上下边框或内边距时，其height 包括最上面的子元素的上外边距

包含块设置了 height,例如只设置外边距、高度时，且父元素的高度为600px,存在以下情况	1-超过	垂直格式化属性值>父元素的height
	2-等于	垂直格式化属性值=父元素的height
	3-小于	不存在强制补充像素的情况
	4-关于auto	当元素的上下外边距设置成auto时，值会默认成0. 当元素的height设置成auto时，该属性由子元素决定。
垂直外边距的合并	当两个相邻的元素都设置了外边距（如果元素没有设置边框或内边距，则子元素的外边距也参与合并），则最大的外边距将合并了其他小于它的外边距。

3-行内元素
块级元素、行内非替换、行内替换元素的布局关系，如下：

 

 

A-行内元素种类
PS：
(1)-非替换：<span>、<a>、<abbr>、<code>、<q>、<textarea>、<select>、<label>、<文本格式化标签>
(2)-替换：<img/>、< input/>
(3)-其他：<br/>

B-行内非替换元素
PS：
(1)-行内框：由内容区(不同字体大小生成不同的em框，一般字体到em框的上下边还有一小段距离，这个em框就是
内容区)、行间距(当行高大于字体大小，则将行高减去字体大小剩下的像素均分增加到上下内容区的边界，这就生成了行间距)构成，高度由行高决定。
(2)-行框：包含该行中的行内框的最高点和最低点的最小框。
(3)-盒属性：内边距、边框、外边距不会影响行内框的高度决定。但设置时会影响元素内容的布局，其中行内非替换元素不能设置width、height、margin-top、margin-bottom

C-行内替换元素
PS：
(1)-行内框：由内容区(有width、height、内边距、边
框、外边距”外边距为负数时，会减小行内框的高度”)决定。
其中，行间距对行内替换元素的行内框无影响，但行间距会应用到替换元素，因为设置垂直对齐属性时，要依靠行高来设置。
(2)-替换元素和基线：将行内框的底端放在基线上。

4-内容裁剪
Overflow:visible(默认值，不裁剪)、hidden(裁剪，不提供滚动条)、scroll(裁剪，提供滚动条)
PS：
(1)-应用于块元素

5-改变元素显示
A-display属性，改变元素显示
Display:值(none不显示、inline行内显示、block块级显示)
PS：
(1)-改变的只是元素的显示方式。但其本质并没有被改变，是行内元素依然行内元素。
B-元素可见性
Visibility：visible(默认值，元素可见，保留在文档流中)、hidden(元素不可见，保留在文档流中)
PS：
(1)-visibility:hidden与display:none的区别在于，是否保留在文档流中的。