CSS 块级元素行内元素盒子模型

最新推荐文章于 2022-09-05 14:40:10 发布

hassen2010

最新推荐文章于 2022-09-05 14:40:10 发布

阅读量502

点赞数

CC 4.0 BY-SA版权

文章标签：块级元素行内元素

本文为博主原创文章，未经博主允许不得转载，如有技术需要联系3684170@qq.com!

本文链接：https://blog.youkuaiyun.com/harrison2010/article/details/74076435

本文详细介绍了网页布局中块级元素与行内元素的特点及应用，包括它们的显示方式、宽度高度设置的有效性、内外边距的应用等，并解释了如何通过display属性转换元素类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

块级元素 p li div ul form h
行内元素 span

块级元素独占一行. 行内元素可互相排成一行.
块级元素可以设置宽高,独占一行（但是本身自己的位置仅仅是自己设置的宽高）.
行内元素设置宽高无效
块级元素 margin padding 都有用.
行内元素只有水平方向有用.垂直方向无效（但是backgroud-color有效，所以对于行内元素不建议使用垂直方向的margin 与padding）
display:block 是块级 display:inline 是行内
盒子模型从外到内顺序 margin border padding content，标准盒子模型width与height只包含content，IE的盒子模型包含（content + padding + border）

如果想在某段文字上下留有间距，一定考虑使用块级元素，或者使用块级元素下再包含行内元素

.hangnei {
    background-color: red;
    width: 10000px; /* 无效 */
    height: 10000px;/* 无效 */
    padding-left: 200px;
    padding-right: 200px;
    padding-top:100px;   /* 位置无效,但是backgroud-color有效，不建议使用 */
    padding-bottom:100px;/* 位置无效,但是backgroud-color有效，不建议使用 */
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 100px; /* 无效 */
    margin-bottom: 100px; /* 无效 */
}