CSS深入基础篇---CSS的元素显示模式- 块元素(3)

元素显示模式有什么作用呢?

作用是为了更好的让我们布局页面

什么是元素显示模式?

元素显示模式就是 元素(标签)以什么方式进行显示,比如 : <div>自己占一行 , 比如一行可以放多个 <span>

作用:网页的标签非常多,为了在不同的地方更好的使用不同类型的标签,了解他们的特点 可以更好的布局我们的页面

HTML元素一般分为块元素和行内元素两种类型 (在实际开发中如果想一行内放多个就用行内元素 如果想独占一行则用块元素)

块元素

常见的块元素有 <h1>到<h6>, <p>, <div>, <ul>, <ol>, <li>等, 其中 <div>标签是最典型的块元素

块级元素的特点:

1.独占一行

2.高度,宽度,外边距以及内边距都可以控制

3.宽度默认是容器(父级宽度)的100%

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

注意点:

文字类的元素(标签)内不能使用块级元素

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

<h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素

行内元素

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

其中 <span>标签 是最典型的行内元素,有的地方也将行内元素称为内联元素

行内元素的特点:

1.一行可以放多个行内元素,且在一行内显示

2.高,宽直接设置是无效的

3.默认宽度就是它本身内容的宽度

4.行内元素只能容纳文本或者其他行内元素

注意:

链接里面不能再放链接

        例子: <a>标签内已经有链接就不要 再放一个 <a>标签添加标签

特殊情况链接<a>里面可以放块级元素,但是<a>转换一下块级模式最安全

行内块元素

在行内元素中有几个特殊的标签----<img /> , <input />, <td>, ,它们同时具有块元素和行内元素的特点

行内块元素的特点:

1.和相邻行内元素(行内块)在一行上,但是它们之间会有空白间隙. 一行可以显示多个(行内元素特点)

2.默认宽度就是它内容本身的宽度(行内元素特点)

3.高度,行高,外边距以及内边距都可以控制(块级元素特点)