CSS盒子模型-元素类型

本文介绍了HTML中的两种主要元素类型:块元素与内联元素。块元素如<div>和<p>等,它们在页面上以新行开始和结束,并尽可能占据全部宽度。而内联元素如<span>和<em>等,则在文本流中与周围内容并排显示。此外还探讨了如何使用CSS的display属性来改变这些元素的默认行为。

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

一、块元素
块元素是作为内容的独特块显示的元素,它以新行开始和结束。除了<p>标签之外,HTML中的其他块元素包括<div> <blockquote> <table> <br> <ol>,以及<h1>到<h6>标签。
块元素逐个列出,沿页面垂直向下。它们尽可能地宽,这就意味着除非用某种方法限制它们(通过其他块元素、CSS属性或HTML标记),否则它们会伸展到整个页面。

二、内联元素
内联元素没有开始行和结束行,它包含于文本流之内。内联标签的例子有<em> <span> <b> <img> <input> <a>。
内联元素在某一行中逐个出现,没有换行,水平放置在页面中,直到现有空间用尽为止,然后在下一行中继续前一行。

display属性可以使元素在块元素和内联元素之间转换,也可以让元素不显示。

三、表格单元(<td>)既不是内联元素也不是块元素,它的display属性为table-cell,设置了display:table-cell的元素像表格一样显示,这样的元素没有外边距。                                                                                                                                                                                                                                                                                     

### CSS 盒子模型学习笔记 CSS 盒子模型(Box Model)是 CSS 中的核心概念之一,用于描述 HTML 元素的布局和结构[^1]。每个 HTML 元素都被视为一个矩形盒子,这个盒子由内容区域(content)、内边距(padding)、边框(border)以及外边距(margin)组成[^2]。 #### 盒子模型的基本组成部分 1. **Content(内容区域)** 这是盒子中实际显示内容的部分,例如文本或图片。它的尺寸可以通过 `width` 和 `height` 属性来设置[^1]。 2. **Padding(内边距)** 内边距位于内容区域和边框之间,用于控制内容与边框之间的间距。可以通过 `padding` 属性进行设置[^2]。 3. **Border(边框)** 边框围绕在内边距之外,用于定义盒子的边界。可以通过 `border` 属性设置边框的宽度、样式和颜色[^1]。 4. **Margin(外边距)** 外边距位于边框之外,用于控制当前盒子与其他盒子之间的间距。可以通过 `margin` 属性进行设置。 #### 盒子模型的两种类型 - **标准盒子模型(W3C 盒子模型)** 在标准盒子模型中,元素的总宽度等于 `content width + padding + border + margin`[^1]。 - **IE 盒子模型(怪异盒子模型)** 在 IE 盒子模型中,`padding` 和 `border` 被包含在 `width` 和 `height` 的值内。这种模型在早期版本的 Internet Explorer 中使用。 #### 如何切换盒子模型 通过设置 `box-sizing` 属性,可以切换盒子模型的计算方式。默认情况下,元素使用标准盒子模型,而通过设置 `box-sizing: border-box;`,可以让元素使用 IE 盒子模型。 ```css /* 示例代码:使用 border-box 模型 */ * { box-sizing: border-box; } ``` #### 学习资源推荐 为了更好地理解 CSS 盒子模型,以下是一些推荐的学习资源: 1. MDN Web Docs - [CSS 盒子模型](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) 2. W3Schools - [CSS 盒子模型教程](https://www.w3schools.com/css/css_boxmodel.asp) #### 注意事项 在实际开发中,不同浏览器可能会对盒子模型的实现存在差异。因此,建议始终为项目添加全局样式重置,并统一设置 `box-sizing` 属性以避免兼容性问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值