码迷,mamicode.com
首页 > Web开发 > 详细

CSS布局之块级元素、块级元素和行内块元素

时间:2020-06-29 21:27:16      阅读:101      评论:0      收藏:0      [点我收藏+]

标签:block   换行   display   不可   通过   code   影响   上下   左右   

元素有行内元素(inline)块级元素(block)以及行内块元素(inline-block)之分,对应地它们之间的盒模型也会有不同。

1. 行内元素(inline)

通过display: inline可将元素声明为行内元素,顾名思义指在行里面的元素,因此没有换行的行为。

1.1 宽度和高度

行内元素不能设置宽度和高度,宽度和高度由内容撑开;

1.2 内边距

行内元素可以设置内边距,上下内边距不会影响行内元素的位置,但左右内边距会影响行内元素的位置;

1.3 边框

行内元素可以设置边框,上下边框不会影响行内元素的位置,但左右边框会影响行内元素的位置

1.4 外边距

行内元素不可以设置上下外边距(无效),但可以设置左右内边距,且会影响元素的位置。

2. 块级元素(block)

通过display: block可将元素声明为块级元素,块级元素拥有换行的行为。

2.1 宽度和高度

块级元素可以自由设置宽度和高度,其中宽度默认为父元素内容区的宽度,而高度则由内容高度撑开。

2.2 内边距

块级元素的内边距也可自由设置,默认为0;

2.3 边框

块级元素的边框可自由设置,默认为0;

2.4 外边距

块级元素的外边距可自由设置,默认为0。值得注意的是,上下两个元素的外边距会发生重叠,比如A元素下外边距(margin-botom)10px,A元素的上外边距(margin-top)20px,两者之间的外间距为20px,而非想象中的30px。

3. 行内块元素(inline-block)

通过display: inline-block可将元素声明为行内块元素,行内块元素没有换行的行为,却可以设置宽度和高度,相当于行内元素块级元素的综合体。

3.1 宽度和高度

行内块可自由设置宽度和高度;

3.2 内边距

行内块元素可正常设置内边距;

3.3 边框

行内块元素可正常设置边框;

3.4 外边距

行内块元素可正常设置外边距。值得注意的是,行内块的外边距跟其他行内块元素块级元素的外边距不会发生重叠。

CSS布局之块级元素、块级元素和行内块元素

标签:block   换行   display   不可   通过   code   影响   上下   左右   

原文地址:https://www.cnblogs.com/juetan/p/13210364.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!