在css中，每个元素被视为一个框。

每个框具有3个属性：

border 框的边框

margin 框与相邻框之间的距离

padding 框内容和边框之间的距离

对于margin存在一种特例：当元素底部页边空白接触另一个元素的顶部页边空白，只会显示其中范围较大的页边空白，如果2个页边空白大小相同，则最终的页边空白将等于其中一个页边空白的大小。

默认情况下，块级元素将占用页面（或者包含它的元素）的整个宽度，而内联元素将仅占用它需要的空间。

img元素貌似块级元素，实际是内联元素。

元素实际宽度计算大小为：

act_width = margin-left + border-left + padding-left + width +

padding-right + border-right + margin-right

padding属性值的单位可以是百分比。如果指示body元素的内边距是10%，则浏览器窗口宽度的5%将作为body元素内容内的每一边的内边距。如果指示一个位于100像素正方形单元格td元素具有10%的内边距，则边框正方形每一边周围将具有5个像素的内边距。元素的padding属性不会继承。

height 设置框的高度

width 设置框的宽度

line-height 设置文本行的高度（类似于行距设置）

max-height 设置框的最大高度

min-height 设置框的最小高度

max-width 设置框的最大宽度

min-height 设置框的最小宽度

overflow 属性：

hidden 超出框范围内容被隐藏

scroll 框内增加滚动栏

css的框模型速查的更多相关文章

  1. CSS的框模型(div)与边距（margin、padding）

    所谓框模型,例如div标签,你就可以直接把它理解成一个相框. 这个相框里面的相片有高度和宽度,框本身也有一定的宽度.相框和别的相框之间,还有一定的边距. div设置常见属性 border:边框 pad ...

  2. css字体中英速查表

    例1(小米米官网):font-family: "Arial","Microsoft YaHei","黑体","宋体",s ...

  3. HTML、CSS、JS、JQ速查笔记

      一.HTML  1.编写html文件 a.格式 <!DOCTYPE html> <html> <head> <title>标题</title& ...

  4. CSS 框模型

    CSS 框模型 CSS 框模型概述 CSS 内边距 CSS 边框 CSS 外边距 CSS 外边距合并 一,CSS 框模型 (Box Model) 规定元素框处理元素内容.内边距.边框 和 外边距 的方 ...

  5. CSS 框模型( Box module )

    框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...

  6. HTML 学习笔记 CSS样式（框模型）

    CSS框模型( Box Model)规定了元素框处理元素的内容 内边距 边框 和 外边距的方式 CSS框模型概述 可以用下面的模型图概述

  7. CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式

    转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http:/ ...

  8. CSS框模型（框模型概述、内边距、边框、外边距、外边距合并）

    CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...

  9. KB006: CSS 框模型( Box module )

    框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...

随机推荐

  1. FFmpeg源代码简单分析：av_find_decoder()和av_find_encoder()

    ===================================================== FFmpeg的库函数源代码分析文章列表: [架构图] FFmpeg源代码结构图 - 解码 F ...

  2. UNIX环境高级编程——Linux终端设备详解

    终端是一种字符型设备,它有多种类型,通常使用tty来简称各种类型的终端设备.tty是Teletype的缩写.Teletype是最早出现的一种终端设备,很象电传打字机(或者说就是),是由Teletype ...

  3. android开发之AlertDialog点击按钮之后不消失

    最近有这样一个需求,我需要用户在一个弹出框里输入密码来验证,验证成功当然好说,但是如果验证失败则需要把alertdialog的标题改为"密码错误,请重新输入",并且这个alertd ...

  4. Nginx中502和504错误详解

    在使用Nginx时,经常会碰到502 Bad Gateway和504 Gateway Time-out错误,下面以Nginx+PHP-FPM来分析下这两种常见错误的原因和解决方案. 1.502 Bad ...

  5. J2EE进阶(七)利用SSH框架根据数据表建立model类

    J2EE进阶(七)利用SSH框架根据数据表建立model类 前言 在利用SSH框架进行项目开发时,若将数据库已经建好,并且数据表之间的依赖关系已经确定,可以利用Hibernate的反转功能进行mode ...

  6. 深入浅出Java MVC(Model View Controller) ---- （JSP + servlet + javabean实例）

    在DRP中终于接触到了MVC,感触是确实这样的架构系统灵活性不少,现在感触最深的就是使用tomcat作为服务器发布比IIS好多了,起码发布很简单,使用起来方便. 首先来简单的学习一下MVC的基础知识, ...

  7. SpriteBuilder实现2D精灵光影明暗反射效果(二)

    使用SpriteBuilder新建一个项目,将默认MainScene.ccb中的内容统统删掉,此时场景应该是一片漆黑. 将官网中的2张图片以及我自己做的2张图片全部拖拽到其文件视图中去: 其中加_n后 ...

  8. MySql下视图的创建

     (1).第一类:create view v as select * from table; (2).第二类:create view v as select id,name,age from ta ...

  9. 用SpriteBuilder简化"耕牛遍地走"的动画效果(一)

    这又是一个使用SpriteBuilder带来便捷的例子 原文地址在: http://www.raywenderlich.com/32045/how-to-use-animations-and-spri ...

  10. 迭代器模式之看芒果台还是央视nie？

    "大风车吱呀吱悠悠的转,这里的风景啊真好看,天好看,地好看,还有一群快乐的小伙伴,大风车转呀转悠悠,快乐的伙伴手牵着手,牵着你的手,牵着我的手......"童年的美好时光因为有了& ...