为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【学习笔记】html基础第九更/盒子模型(css布局②)

【学习笔记】html基础第九更/盒子模型(css布局②)

2016.03.02 19:08 3074浏览
CSS盒子模型:W3C组织建议把所有的网页上的对象都放在一个盒子中(在定义盒子宽高的时候,要考虑到内填充,边框,边界的存在)

一个盒子的构成:
盒子中的内容:content
盒子的边框:border
盒子边框与内容之间的距离:称为填充---padding内边距(内补丁)
如果有多个盒子存在,盒子与盒子之间的距离:称为边界---margin,外边距(外补丁)

整个盒子模型在网页中所占的宽度:左边界+左边框+左填充+内容+右填充+右边框+右边界

CSS盒子模型的属性:
内容属性:宽=width 高=height
内填充属性(内容与边框之间的距离):padding
外边距属性:margin(使用该属性的时候注意浏览器的兼容性)
内填充与边界的规则:
如果有四个参数:表示上右下左,也可以单单指定某个方向
如果只有一个参数:表示上右下左
如果有两个参数: 第一个参数表示上下 第二个参数表示左右
如果三个参数:表示上 左右 下
边框属性:border

盒子模型有两种,分为IE盒子模型标准W3C盒子模型,我们只学习标准盒子模型,如下图
图片描述
图片描述

标准 W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分

上面提到了,我们只学习标准盒子模型,并且期望在实际操作中也去选择标准盒子模型,那么如何选择“标准 W3C 盒子模型”呢?

很简单——在网页的顶部加上 DOCTYPE 声明

(如果不加 DOCTYPE 声明,那么各个浏览器会根据自己的行为去理解网页,即 IE 浏览器会采用 IE 盒子模型去解释你的盒子,而 FF 会采用标准 W3C 盒子模型解释你的盒子,所以网页在不同的浏览器中就显示的不一样了。) 如果加上了 DOCTYPE 声明,那么所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子,就能保证我们的网页在各个浏览器中显示一致了。

本笔记整理自imooc课程及度娘,感兴趣的童鞋可以自行搜索之~多谢观看啦!!☆⌒(*^-゜)v

点击查看更多内容
11人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
104
获赞与收藏
2004

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消