黑马程序员技术交流社区
标题:
css中盒子标签的三种显示模式
[打印本页]
作者:
李润
时间:
2019-7-24 23:41
标题:
css中盒子标签的三种显示模式
块级元素
特点
01
、独占一行，设置宽高能够生效，也可以控制外边距和内边距；
02
、默认的宽度是父级的
100%；
03
、是一个容器盒子，里面可以放行内或者块元素；
注意：
p标签是块级元素，但是p标签里面不能放div标签；
同理
h标签（标题标签）dt等都是文字类块级标签，里面尽量不能放其他块级元素；
常见的块级元素：
div、p、h1-h6
、
ul、li、ol、dl、dt、dd
行内元素
特点
01
、一行可以共存多个，设置宽高不生效；
02
、行内元素的默认宽度是内容撑开的；
02
、行内元素里面最好只放文本或者其他的行内元素；
常见的行内元素：
a span
u s del strong em i ins 等；
注意：
超链接里面不能嵌套超链接；
特殊情况
a标签里面可以放块级元素，但是最好给a转换成块级模式；
行内块元素
特点：
01
一行可以共存多个；
02
可是设置固定的宽高并且生效；
常见的行内块元素：
img、input
显示模式的总结
块级元素：
一行只能放一个元素，可以设置宽高，默认的宽度为
100%，容器可以包含任何标签；
行内元素：
一行可以放多个元素，不可以直接设置宽高，默认的宽度是有内容撑开的，尽量包含文本或者其他行内元素，超链接
a有特殊情况；
行内块元素：
一行放多个元素，可以设置宽高，默认的宽度是内容撑开的；
显示模式之间的转换
将元素转化为块级元素：
display:block;
将元素转化为行内元素：
display:inline;
将元素转化为行内块元素：
display:inline-block;
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2