12、前端开发:CSS知识总结——盒子模型(Box Model)(3)

简介: 12、前端开发:CSS知识总结——盒子模型(Box Model)(3)

内联元素的盒子:从“内容区、内边距、边框、外边距”分析行内元素的盒模型;


一、特点总结:


内联元素不能设置width和height


内联元素可以设置水平内边距、垂直方向内边距(垂直方向内边距不会影响页面布局)


内联元素可以设置边框,但是只有垂直的的边框不影响页面的布局


内联元素可以设置水平外边距但不重叠,但是不支持垂直外边距


二、内联元素与块元素转换


display样式可以修改元素类型


可选值:


inline : 可以将一个元素作为内联元素显示


block :可以将一个元素设置块元素显示


inline-block : 将一个元素转换为行内块元素


可以使一个元素既有悍内元素特点又有块元素特点


(既可设置宽高、又不会独占一行)


none : 不显示元素,并且元素不会再页面中继续占有位置


visibility :可以用来设置元素的隐藏和显示的状态


可选值:


visible : 默认值


hidden : 元素会隐藏不显示(但是 它的位置依然保存 )


注意:

在文档流中,子元素的宽度默认占父元素的全部

当元素设置浮动以后,会完全脱离文档流,块元素脱离文档流以后,高度和宽度都被内容撑开。

内联元素脱离文档流以后会变成块元素


相关文章
|
11月前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
11月前
|
前端开发 开发者
css两种盒子模型
在CSS中,有两种盒子模型:标准盒子模型和IE盒子模型(怪异盒子模型)。标准盒子模型中,`width`和`height`仅指内容区的尺寸,总宽度和高度还包括内边距、边框和外边距。IE盒子模型中,`width`和`height`包括内容区、内边距和边框,总宽度和高度仅加外边距。通过`box-sizing`属性可以切换这两种模型,`box-sizing: content-box;`表示标准盒子模型,`box-sizing: border-box;`表示IE盒子模型。
|
11月前
|
前端开发 容器
给 CSS 盒子模型添加边框时,需要注意什么?
在给CSS盒子模型添加边框时,需要注意边框的宽度、样式和颜色,以及它如何影响盒子的总尺寸和布局。边框会增加盒子的总宽度和高度,可能需要调整其他属性以保持布局的完整性。
|
7月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
170 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
12月前
|
前端开发
CSS属性:盒子模型
CSS属性:盒子模型
91 0
|
10月前
|
前端开发
CSS 盒子模型
CSS 盒子模型
65 4
|
12月前
|
前端开发
前端基础(八)_盒子模型(标准盒子模型和怪异盒子模型)
本文介绍了CSS盒子模型的基本概念,包括内容、内边距、边框和外边距的属性,以及标准盒子模型和怪异盒子模型的区别和转换方法。
293 1
前端基础(八)_盒子模型(标准盒子模型和怪异盒子模型)
|
11月前
|
前端开发
彻底搞懂css盒子模型
【10月更文挑战第1天】
185 9
|
12月前
|
前端开发
【前端web入门第五天】02 盒子模型基础
本文档详细介绍了CSS中的盒子模型及其组成部分,包括内容区域、内边距、边框线和外边距。通过具体示例展示了如何设置边框线、内边距及外边距,并解释了尺寸计算方法和版心居中的技巧。内容丰富,示例清晰,有助于理解盒子模型在网页布局中的应用。
136 7
|
前端开发 开发者
【前端大揭秘】CSS盒子模型的爱恨情仇:一场关于标准与IE模型的精彩对决!
【8月更文挑战第26天】本文深入探讨CSS中的两大盒子模型——标准盒模型与IE盒模型。通过理论解析与实例代码,清晰展示了两种模型下元素尺寸的构成方式及其应用场景。标准盒模型适合精确控制内容区尺寸,而IE盒模型在处理固定宽度元素时更为直观。掌握这些知识将帮助前端开发者在实际项目中做出更优的设计决策,提升网页布局的质量与美观性。
189 1

热门文章

最新文章