HTML5 05_标签显示模式

一.标签显示模式

1.块级元素(block-level)

①每个块元素通常都会独自占据一整行或多整行，可以对其设置高度、宽度、对齐等属性，常用于网页布局和网页结构的搭建

②常见块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<form>等

2.行内元素(inline-level)

①行内元素（内联元素）不占有独立的区域，行内元素只能容纳文本或其他行内元素（a特殊）。一般不可以设置宽度、高度、对齐等属性，但水平方向的padding和margin可以设置，常用于控制页面中文本的样式

②常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等

③p标签中不能放块级元素，链接里面不能在放链接

3.行内块元素(inline-block)

①在行内元素中有几个特殊的标签——、，可以对它们设置宽高和对齐属性

②行内块元素和相邻行内元素（行内块）在一行上，但是之间会有空白间隙

③默认宽度就是它本身内容的宽度而且宽高、内外边距都可以控制

4.标签显示模式转换(display)

4.1.块转行内：display:inline;

块级元素转为行内元素，宽高会失效

4.2.行内转块：display:block;

行内元素转为块级元素，可以设置宽高

4.3.块、行内元素转换为行内块：display:inline-block;

行内元素转为行内块元素，可以设置宽高，在一行内显示