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

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

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

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

  1. 块级元素 独占一行. 行内元素可互相排成一行.
  2. 块级元素 可以设置宽高,独占一行(但是本身自己的位置仅仅是自己设置的宽高).
  3. 行内元素设置宽高无效
  4. 块级元素 margin padding 都有用.
  5. 行内元素只有 水平方向有用.垂直方向无效(但是backgroud-color有效,所以对于行内元素不建议使用垂直方向的margin 与padding)
  6. display:block 是块级 display:inline 是行内
  7. 盒子模型 从外到内顺序 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; /* 无效 */
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hassen2010

你的鼓励我能输出跟多的好文章

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值