CSS元素显示模式

CSS元素显示模式

（一）什么是元素显示模式

作用：网页标签，可以更好布局我们的网页

HTML元素分为块元素和行内元素：

1.块元素

a.独占一行

b.高度，宽度，外边框以及内边框

c.宽度默认是（父级宽度）的100%

d.在一个容器及其盒子，里面可以放行内或者块级元素

注意：

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

b.<p>标签主要用于存放文字，不可以使用

2.行内元素

<span>标签属于最典型的（内联元素）

a.可以一行显示多个

b.高宽设置是无效的

c.默认元素内容本身

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

e.链接里面不可以方式链接

f.特殊情况下链接<a>里面放置块级元素，但是给<a>转换一下块级模式最安全

3.行内块元素

a. 特殊标签<img/> <input/> <td> 同时具有块元素和行内元素的

b.显示在一行上，之间有空白缝隙，一行可以显示多个（行内特点）

c.默认宽度，但是可以自行调节

4.总结

元素模式	元素排列	设置样式	默认宽度	包含
行内块元素	以行为单位，可以放放置多个	无法设置宽高	内容本身	容纳文本或则其他给行内元素
块级元素	以块为单位，一行一个	可以设置宽高	浏览器的100%大小	所有标签
行内块级元素	一行出现多个块	可以设置宽高	内容本身

5.元素显示模式转换

a.转换为块级元素

语法：

display: block;

b. 转换为行内元素

语法：

display: inline;

c.转换为行内块元素

语法：

display: inline-block