Day 10 CSS <元素显示模式>

1. 什麽是元素显示模式

元素显示模式就是元素(标签)以什麽方式进行显示

作用 : 网页的标签非常多，了解他们的特点可以更方便的布局网页

ex : <div>自己占一行，<span>一行可以放多个

2.元素显示模式的分类

HTML元素一般分为块元素和行内元素

块元素:

常见的块元素有<h1>~<h6>. <p>. <div> . <ul> <ol> <li>等

其中<div>为最典型的块元素

**特点 : **

a. 自己独占一行
b. 高度、宽度、外边距以及内边距都可以控制
c. 宽度默认是容器(父级宽度)的100%
d. 是一个容器及盒子，里面可以放行内或块级元素

注意 :

文字类的元素内不能使用块级元素

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

同理<h1>~<h6>里面也不能放其他块级元素

行内元素:

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

其中<span>为最典型的行内元素

特点 :

a. 相邻行内元素在一行上，一行可显示多个
b. 高、宽直接设置是无效的
c. 默认宽度就是本身内容的宽度
d. 行内元素只可容纳文本或其他行内元素

注意:

连接里面不可再放连接

特殊情况连结<a>内可以放块级元素，但要给<a>转换块级模式最安全

**行内块元素 : **

<img>、<input >、<td>等同时具有块元素和行内元素的特点

所以称之为行内块元素

特点 :

a. 和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙，一行可以显示多个(行内元素特点)
b. 默认宽度就是他本身内容的宽度(行内元素特点)
c. 高度 行高 外边距 以及内边距都可以控制(块元素特点)

3.元素显示模式的转换

特殊情况下需要进行元素模式的转换

简单理解 : 一个模式的元素需要另外一种模式的特性

EX : 想要增加连接<a>的触发范围

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