css的元素显示模式

css的元素显示模式

什么是元素的显示模式?

元素(标签)以什么方式进行显示

元素显示模式的分类

html元素一般分为块元素和行内元素两种类型

块元素:<h1>~<h6> <p> <ul> < ol> <li>等 <div>是最经典的块元素.

特点:1.比较霸道 独占一行

​ 2.宽.高,外边距都可以控制

​ 3.是一个容器及盒子,可以放行内或者块元素

文字类的元素内不能使用块级元素
p标签 存放文字,p里面不能放块级元素 特别不可以放div
同理 h1-h6 都文字类块级标签，里面不能放其他块级元素

行内元素: 常见的行内元素 a strong b em i del s ins u span… span标签是最典型的行内元素

行内元素的特点
1.相邻的行内元素在一行，一行可以显示多个
2.高，宽度直接设置无效的
3.默认宽度就是本身的内容的宽度
4.行内元素只能容纳文本或者其他的行内元素

注意:
链接里面不能再去放链接的
特殊的情况a 快级元素 a 转换成块级元素

行内块元素
特殊的标签 img input td 他们同时具有块元素和行内元素的特点

行内块元素的特点:
1.和相邻的行内元素(行内块)在一行上，但是他们之间空白的缝隙，一行显示多个
2.默认宽度是内容的宽度(行内元素的特点)
3.高度，行高，边距以内边距都可以控制 （块元素的特点）

元素的显示模式转换
转换为块元素：display:block;
转换为行内元素:display:inline;
转换为行内块:display:inline-block;