HTML5网页设计样式-补充

块元素转换为行内元素

如果块元素的内容为空，有设置宽高属性；当它转换为行内元素之后，页面上会显示为空。

行内元素转换为块元素

方法一：两个标签之间加入一个空白的p标签（不推荐）

方法二：设置样式display:block。

块级元素block：独占一行；可以用宽高属性定义大小；h p 列表 div。

行内元素inline：不独占一行；不能由宽高属性定义大小（不起作用，大小靠内容撑起来）；b strong em i a span。

行内块元素（inline-block）:可以控制宽高，不独占一行。​​​​​​​

Img是行内块元素代表标签

Div块元素代表

Span行内元素代表

Div Span都本身不具备任何语义，更多是处理文档结构上

块元素，它的宽高属性和独占一行无关，只要是块元素都会独占一行，宽度为整个页面宽度，高为0。

把块元素转换成行内元素之后，原来的红色方块会消失不见，这是因为块元素的大小由内容决定，不受宽高属性控制。

行内元素，它的内容会根据代码书写顺序从左到右依次排列，不独占一行。

使行内元素里的内容独占一行的方法：①标签之间加一个空的p标签（不推荐。首先，应该靠样式实现，而不是改变本身的结构，在描述结构清楚的情况下，html结构里的标签越少越好。其次，p标签自带样式。再次，网页里常常用后代选择器设置样式，容易把空的p标签选中）；②把其中一个或两个都变成块元素。设置样其式为display:block。

Img看做一个块头大的文字，以其图片底部为基准，与其他文字底部齐平。