您在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元素默认的不为零的内边距和外边距。这可以通过将元素的 marginpadding 设置为零来覆盖这些浏览器的默认样式。这可以分别进行设置,也可以使用通用选择器(*号)对所有元素进行设置(但我们并不推荐用“*”号,请参考这里: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入门教程

添加评论



站长杂谈

最新动态 | 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