Box model

  1. 盒子模型概念:

盒子模型(Box Model)是CSS控制页面时一个很重要的概念。

image.png

content edge or inner edge
The content edge surrounds the rectangle given by the width and height of the box, which often depend on the element's rendered content. The four content edges define the box's content box
.
padding edge
The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge. The four padding edges define the box's padding box
.
border edge
The border edge surrounds the box's border. If the border has 0 width, the border edge is the same as the padding edge. The four border edges define the box's border box
.
margin edge or outer edge
The margin edge surrounds the box margin. If the margin has 0 width, the margin edge is the same as the border edge. The four margin edges define the box's margin box
.

  1. 盒子模型属性:
  • 边框(border):用于分隔不同元素、会占据空间、有4条边框、可无边框(设置为0)。
    border : border-width || border-style || border-color
  • 填充(padding):用于控制内容与边框之间的距离;会占据空间;
    可设置盒子模型上、右、下、左4个方向的内边距值;padding属性的值可以为0,即无内边距。
  • 边界(margin):用于控制元素与元素之间的距离;会占据空间;
    可设置盒子模型上、右、下、左4个方向的外边距值;margin属性的值可以为0,即无外边距。
  • 内容(content) :
    内容本身的宽=width
    内容本身的高=height
  • 盒子模型总尺寸
    盒子模型总尺寸=border-width+padding+margin+内容尺寸(宽度/高度)
  1. 盒子之间关系:
  • DOM是 Document Object Model的缩写,即“文档对象模型”。一个网页的所有元素组织在一起,就构成了一个棵“DOM”树。
    任意一个HTML文档都对应一棵DOM树,body是所有对象的根节点。而该DOM树的节点如何在浏览器中表现,则由CSS确定。即HTML控制网页的结构,CSS控制网页的表现。

  • 标准文档流
    “标准文档流”简称“标准流”。指在不适用其他的与排版和定位相关的特殊CSS规则是,各种元素的排列规则。
    (1). 块级元素(block level)
    总是以一个块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右撑满。
    (2). 行内元素(inline)
    标记本身不占有独立的区域,仅仅实在其他元素的基础上指出了一定的范围。
    行内元素在DOM树种同样是一个节点。从DOM的角度来看,块级元素和行内元素是没有区别的,都是树上的一个节点;而从CSS的角度来看,二者有很大的区别,块级元素拥有自己的区域,行内元素则没有。
    标准流就是CSS规定的默认的块级元素和行内元素的排列方式

  • 盒子在标准流中的定位原则
    (1) 行内元素之间的水平margin
    当两个行内元素紧邻时,他们之间的距离为 第一个元素的 margin-right 加上第2个元素的margin-left。
    (2)块级元素之间的竖直margin
    两个竖直块级元素之间的距离不是margin-bottom与margin-top的总和,而是两者中的较大者。这个现象称为 margin 的“塌陷”现象。
    (3)嵌套盒子之间的margin
    如果父div的高度值小于子块div的高度加上margin的值,此时IE浏览器会自动扩大,保持子元素的margin-bottom的空间以及父元素自身的padding-bottom。而firefox会保证父元素的高度完全吻合,子元素会超出父元素的范围。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,552评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,666评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,519评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,180评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,205评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,344评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,781评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,449评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,635评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,467评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,515评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,217评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,775评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,851评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,084评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,637评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,204评论 2 341

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1 92
  • 盒模型,可以简单解释为:盒模型用来描述元素�所占据的空间。 有两种盒模型:W3C盒模型(标准盒模型)和IE盒模型这...
    就叫初九吧阅读 3,682评论 1 1
  • 1.盒模型包括哪些属性 以上图为例,去阐述盒模型的各个属性: content属性:规定内容区域,在标准盒模型中,宽...
    犯迷糊的小羊阅读 474评论 0 0
  • 7月27日,难得的晴,深圳 01. 今天我回来的时候,在等地铁,前面有个女生,长发,发梢毛躁。 跟你的发质一样糟糕...
    我叫阿嘉阅读 186评论 0 2
  • 吃,是一种幸福。 做,亦是一种幸福。 美食,一份暖心的享受和满足。 有时,乡愁是一种味道的思念, 寒冷冬夜的一碗热...
    马老大_阅读 521评论 2 2