您在divcss.net的位置首页 >> DIV+CSS教程 >> 教程正文

第十课 什么是CSS框模型

 skeeter | Div+css教程 | 2010-3-20 | 239点击 | 0评论

这一课我们将学习什么是CSS框模型,并了解于CSS框模型相关的内边距padding属性,边框border属性和外边距margin属性

CSS 框模型  包括了内边距、边框 和 外边距（也就是css边距）。


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


概述


术语翻译：

1.  element : 元素

2.  padding : 内边距

3.  border : 边框

4.  margin : 外边距



元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何HTML元素。
所以，每个HTML元素从里到外的次序可分为： 内容 ----> 内边距 ----> 边框 ----> 外边距


内边距、边框和外边距都是可选的值，默认值为 0。


只有外边距的值可以为负，并且会常用到负的外边距。


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


但是，有些浏览器会给于某些HTML元素默认的不为零的内边距和外边距。这可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器的默认样式。这可以分别进行设置，也可以使用通用选择器（*号）对所有元素进行设置（但我们并不推荐用“*”号，请参考这里：css重置）：

* {

  margin: 0;

  padding: 0;

}


在 CSS 中，width 和 height 属性指的是实际内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加整个元素框的尺寸。

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：


#boxs {

  width: 70px;

  margin: 10px;

  padding: 5px;

}


提示：内边距、边框和外边距可以应用于一个元素的所有方向（一共4个方向），也可以应用于指定的一个或多个方向。

关键字:什么是CSS框模型,内边距padding属性,边框border属性,外边距margin属性,div+css入门教程

上一篇:第九课 如何设置CSS 列表属性下一篇:第十一课 如何设置CSS边距

添加评论



站长杂谈

最新动态 | SEO | 网站推广 | 网站建设

  • 传腾讯全面购康盛创想 discuz!落户腾讯 传腾讯全面购康盛创想 discuz!落户腾讯 2010-8-23 11:57:15 26次阅读

    今日有媒体爆出腾讯已经全面收购建站平台Discuz！的开发公司——北京康盛创想，进军中小网站市场

  • 侵权盗版网站黑名单即将建立 侵权盗版网站黑名单即将建立 2010-7-22 11:47:41 52次阅读

    此次行动后将建立侵权盗版网站黑名单制度。名单将在国家版权局网站上不定期发布并抄送提交三大电信...

  • 如何应对拍照备案 如何应对拍照备案 2010-7-19 10:37:03 72次阅读

    就目前而言，拍照备案已成定局。 据一名行业网站的站长透露，目前他最担心的就是需要现场拍照，因...

  • 日本称中国网购仿冒品泛滥 日本称中国网购仿冒品泛滥 2010-7-11 12:55:34 60次阅读

    据日本共同社10日报道，为掌握仿冒品的流通情况，日本经产省于2009年度在中国的主要网络商城...

好书推荐

DIV+CSS | SEO | 网络编程 | 网站设计

鄂ICP备06008892号divcss.net