文档章节

CSS 框模型(Box Model)

toddler
 toddler
发布于 2014/12/28 01:03
字数 254
阅读 817
收藏 24

CSS 框模型(Box Model)

所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了框模型(Box Model):


CSS box-model

不同部分的说明:

  • Margin - 清除边框区域。Margin没有背景颜色,它是完全透明

  • Border - 边框周围的填充和内容。边框是受到盒子的背景颜色影响

  • Padding - 清除内容周围的区域。会受到框中填充的背景颜色影响

  • Content - 盒子的内容,显示文本和图像

摘自:W3CSCHOOL

http://www.w3cschool.cc/css/css-boxmodel.html

-------------------------------------------------------------------------------------------------------------------------------

BoxModule就像一个快递包裹:

Margin:快递塑料包装

Border:快递纸盒

Padding:纸盒里紧贴内壁的一层泡沫板

Content:你的东西


© 著作权归作者所有

toddler
粉丝 13
博文 33
码字总数 21659
作品 1
济南
QA/测试工程师
私信 提问
加载中

评论(2)

a_day
a_day
以为除了盒子模型又一个新奇概念,
iehyou
iehyou
最好能讲下各个浏览器的差异
想要清晰的明白(一): CSS视觉格式化模型|盒模型|定位方案|BFC

视觉格式化模型 页面(文档树)可以想象成是由一个个的Box组合而成的,而视觉格式化模型(Visual formatting model)是一套规则,将这些框布局成访问者看到的样子。 哪些因素控制了这些布局 下文...

mooonx
2017/11/29
0
0
CSS中各种布局的背后(*FC)

CSS中各种布局的背后,实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。 盒模型(Box Model) 上图为W3C标准盒模型,另外还有一种IE盒模型(IE6以下),唯一的...

啊咩
2018/12/10
0
0
background-clip:从box-sizing:border-box属性入手,来了解盒模型

从最开始学习CSS的时候,就了解了盒模型的概念,今天,我们从其中的box-sizing:border-box;的属性入手,来重新认识一下盒模型在实际项目中的运用。 背景:先声明一下运用的场景,假如项目布局...

飞翔的熊blabla
01/02
0
0
CSS 盒子模型 Box Model

CSS 盒子模型概述 element : 元素。 padding : 内边距,也有资料将其翻译为填充。 border : 边框。 margin : 外边距,也有资料将其翻译为空白或空白边。 盒子模型有两种,分别是 IE 盒子模型...

ivon_lee
2014/04/19
0
1
CSS3 Box-sizing的理解

box-sizing是CSS3的box属性之一。一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性。那么CSS3的Box-sizing跟盒...

柠檬酷
2015/09/16
51
0

没有更多内容

加载失败,请刷新页面

加载更多

Qt编写数据可视化大屏界面电子看板9-曲线效果

一、前言 为了编写数据可视化大屏界面电子看板系统,为了能够兼容Qt4和嵌入式linux系统,尤其是那种主频很低的,但是老板又需要在这种硬件上(比如树莓派、香橙派、全志H3、imx6)展示这么华...

飞扬青云
18分钟前
0
0
责任链模式

//这篇博客的博主真的不错,解析的都很清晰明了, https://blog.csdn.net/jason0539/article/details/45091639

南桥北木
44分钟前
3
0
Flutter -------- dio网络请求

dio是Flutter中文网开源的一个强大的Dart Http请求库,支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时等... 1.添加依赖# dependencies: dio: 2.1.x #...

切切歆语
54分钟前
1
0
PHP的学习

PHP变量的命名必须以$符开始,如: $i;$j;$name; $符后面的第一个字符不可以是数字,只能是字母或者下划线(_)。 除了下划线(_)之外,变量中不能出现任何特殊字符,也就是变量只能包含...

墨冥
今天
3
0
一篇文章彻底搞懂Java虚拟机

概念: 虚拟机:指以软件的方式模拟具有完整硬件系统功能、运行在一个完全隔离环境中的完整计算机系统 ,是物理机的软件实现。常用的虚拟机有VMWare,Visual Box,Java Virtual Machine(Jav...

骚年锦时
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部