CSS基础入门教程:理解盒子模型

mEs_sAg3

mEs_sAg3

2016-02-20 00:16

图老师小编精心整理的CSS基础入门教程:理解盒子模型希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)盒子模型,是XHTML+CSS布局页面中的核心!要想学会用CSS布局页面,就首先要理解盒子模型!
什么是盒子模型?对于初学者来说,很难说出来,但是对于生活中的盒子大家熟悉吧,哈哈,这里提到的盒子模型你就可以理解成现实生活中的盒子就可以了,不然怎么能起个名字叫盒子模型呢

好!既然和现实生活中的盒子一样,那我们想一下,生活中的盒子内部是不是空的好用来存放东西,而里面存放东西的区域我们给他起个名字叫content(内容),而盒子的纸壁给他起个名字叫border(边框),如果盒子内部的东西比如是一块硬盘,但是硬盘怕震动,所以我们需要在硬盘的四周盒子的内部均匀填充一些防震材料,这时硬盘和盒子的边框就有了一定的距离了,我们称这部分距离叫padding(内边距),如果我们需要购买许多块硬盘,还是因为硬盘怕震动所以需要在盒子和盒子之间也需要一些防震材料来填充,那么盒子和盒子之间的距离我们称之为"margin(外边距)"

OK~!这下盒子模型的四要素就出来了分别是:content(内容)、border(边框)、padding(内边距)、margin(外边距),如下图

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
我们的页面就是由许许多多的盒子组成的哟~~~,但是和现实生活中的盒子我们会忽略外边距(margin),但是在页面中,我们是不能忽略外边距(margin)的,只有包括外边距的盒子模型在CSS中才是完整的,即使外边距为零,我们也不要忽略它,要知道他是存在的。

怎么样,理解盒子模型了没?就是这么点知识
展开更多 50%)
分享

猜你喜欢

CSS基础入门教程:理解盒子模型

Web开发
CSS基础入门教程:理解盒子模型

CSS入门教程——盒子(box)

Web开发
CSS入门教程——盒子(box)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS入门教程:语法基础

Html CSS布局 Div+CSS XHTML
CSS入门教程:语法基础

CSS入门教程:计算CSS盒模型宽和高

Web开发
CSS入门教程:计算CSS盒模型宽和高

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

IE盒子模型和标准W3C盒子模型

Web开发
IE盒子模型和标准W3C盒子模型

HTML和CSS的关键:盒子模型(Box model)

Web开发
HTML和CSS的关键:盒子模型(Box model)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Win10如何禁止公用网络环境下开启网络发现功能

Win10如何禁止公用网络环境下开启网络发现功能

Win10预览版10074高分屏下如何设置DPI缩放

Win10预览版10074高分屏下如何设置DPI缩放
下拉加载更多内容 ↓