css04_标准文档流

标准文档流

标准文档流指的是元素的排版是自动从按左往右，从上往下的顺序排列。（宏观的讲，web页面和Photoshop等设计软件有本质区别：web页面制作必须从上而下，而设计软件可以想往哪画就往哪画。）

1、标准文档流的性质

• 1、空白折叠现象。
  比如：如果我们想让img标签之间没有空隙，必须紧密连接

<img src="img/00.jpg"/><img src="img/02.jpg"/>

• 2、高矮不齐，底边对齐
• 3、自动换行，一行写不完换行写
• 4、在标准文档流中，竖直方向的margin不叠加，以较大的为准。
• 5、将标签分为2种，块级元素和行内元素

2、HTML将标签分为容器级和文本级标签

• 容器级：h系列、ol、ul、li、dl、dt(定义标题)、dd(定义描述内容)、div
• 文本级：a、b、p、span、img、i、u、em(空格)

css中将标签分为块级元素和行内元素
html中将标签分为容器级标签和文本级标签
所有的容器级加上p标签都是块级元素
所有的文本级标签都是行内元素除了p，p是文本级，但是是块级元素

3、块级元素和行内元素性质

标准文档流等级森严，标准文档流将标签分为两等级：

1. 块级元素
   • 占一行，不能与其他任何元素并列一行
   • 可以设置width,height属性有效果)默认宽度为父亲的宽度，默认高度为0
   • 可以设置margin和padding属性
2. 行内元素
   • 与其他行内元素并列一行
   • 不能设置宽高，默认的宽/高度，就是文字的宽/高度，没有文字则为0
   • 行内元素水平方向的margin和padding(如margin-left、padding-right)可以产生边距效果，但是竖直方向的(如padding-top和margin-bottom)不会产生边距效果

替换元素

替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如：浏览器会根据标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；

又例如：根据标签的type属性来决定是显示输入框，还是单选按钮等。

(X)HTML中的、、、、都是替换元素。这些元素往往没有实际的内容，即是一个空元素，浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。

行内替换元素

属于行内元素，且有块级元素特点。即width、 height、 margin的四个方向、 padding的四个方向都正常显示，遵循标准的css盒模型。
例如：img、input属于行内替换元素。属性width/height/padding/margin均可用。效果等于块元素，但不独占一行。

行内非替换元素

width、 height不起作用，用line-height来控制高度。

padding左右起作用，上下不会影响行高，但是对于有背景色和内边距的行内非替换元素，背景可以向元素上下延伸，但是行高没有改变。因此视觉效果就是与前面的行重叠。(《css权威指南》 P249)

margin左右作用起作用，上下不起作用，原因在于：行内非替换元素的外边距不会改变一个元素的行高（《css权威指南》 P227）。

4、标签嵌套

• 1.块级元素 — 任何元素可以的。
• 2.行内元素 – 行内元素 只 嵌套元素 b u span i - s
• 3.P 不能放 div 。
• 4.a 无所不能 。 a里面不能放 a input 等

5、块级元素和行内元素的相互转换

块级元素转行内元素

div{
<!--此时div就变成了行内元素，可以并排显示。inline就是行内的意思-->
	    display: inline;
	}

display：是“显示模式“的意思，用来改变元素的行内，块级性质

行内元素转块级元素

span{
<!--此时div就变成了行内元素,可以设置宽高。block是砖块的意思-->
		display: block;
	}

display：inline-block；可以让元素具有块级元素和行内元素的特性：既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。是一个很实用的属性

标准文档流做不出网页，因为能并排的不能改宽高，能改宽高的不能并排。所以需要让标签脱离标准文档流

脱离标准流

css有3种方式脱离标准流：

1. 浮动
2. 绝对定位
3. 固定定位