Web基础(从零开始)——CSS盒子模型（块元素、行内元素、行内块元素）

1.块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等

特点：（1）自己独占一行，就算设置了宽度，也是独占一行

           （2）高度、宽度、外边距、内边距都可以控制

           （3）宽度默认是父元素的100%

           （4）是一个容器及盒子，里面可以放行内或者块级元素

注：（1）文字类的元素不能使用块级元素

        （2）<p>标签主要用于存放文字，因此<p>里面不能存放块级元素，特别不能放<div>

        （3）同理，<h1>~<h6>等都是文字类块级标签，里面也不能存放其他块级元素

2.行内元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等

其中<span>标签是最典型的行内元素。

特点：（1）相邻行内元素在一行上，一行可以显示多个

           （2）高宽直接设置是无效的

            （3）默认宽度就是他本身内容的宽度

            （4）行内元素只能容纳文本或其他行内元素

注：链接里面不能放链接，特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。

3.行内块元素：行内元素有几个特殊的标签<img/>、<input/>、<td>，他们同时具有块元素和行内元素的特点。

特点：（1）和相邻元素在一行上，但是他们会有空白缝隙，一行可以显示多个

           （2）默认宽度就是它本身内容的宽度

           （3）高度，行高，外边距以及内边距都可以控制

元素显示模式转换：

转化为块元素：display:block;

转化为行内元素：display:inline;

转化为行内块元素：display:inline-block;