使用chrome development tool观察box 模型-阿里云开发者社区

开发者社区> 开发者小助手-bz5> 正文

使用chrome development tool观察box 模型

简介: 使用chrome development tool观察box 模型
+关注继续查看

测试代码如下:image.png将光标置于parent div node,在右边的Computed tab里即可观测box model的各项attribute:

image.png

整个window在Computed view里显示为如下图右下角颜色:

image.pngimage.png

   child的margin区域的计算基准是基于parent的content-box区域:

image.pngimage.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.


Collapsing margins

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.


Horizontal margins never collapse.


view port

User agents for continuous media generally offer users a viewport (a window or other viewing area on the screen) through which users consult a document. User agents may change the document’s layout when the viewport is resized (see the initial containing block).


Continuous media 的user agent通常给用户提供了一个view port,即一个窗口或屏幕上其他viewing area,通过view port用户可以同document交互。


当viewport 尺寸发生变化时,User agent会将document重新布局。


containing block

In CSS 2.1, many box positions and sizes are calculated with respect to the edges of a rectangular box called a containing block.


盒模型的位置和尺寸计算都基于一个称之为containing block的矩形框的边界。


In general, generated boxes act as containing blocks for descendant boxes; we say that a box “establishes” the containing block for its descendants.


生成的box扮演后代盒子的containing block, 我们称这个过程为"establish".


The phrase “a box’s containing block” means “the containing block in which the box lives,” not the one it generates.


“a box’s containing block” 意思是box位于的containing block,而不是该box生成的containing block.


block-level elements

Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs).


以块的方式显示的元素。


The following values of the ‘display’ property make an element block-level: ‘block’, ‘list-item’, and ‘table’.


下列display属性的值,让element以块的方式显示元素:


block

list-item

table

Each block-level element generates a principal block-level box that contains descendant boxes and generated content and is also the box involved in any positioning scheme.


每个block level的元素,都会生成一个principal block-level的盒模型,包含descendant盒模型,以及生成的content. 该principal block-level box也会参与到positioning scheme中。


Some block-level elements may generate additional boxes in addition to the principal box: ‘list-item’ elements. These additional boxes are placed with respect to the principal box.


Anonymous block boxes

看这段代码:

image.png

(and assuming the DIV and the P both have ‘display: block’), the DIV appears to have both inline content and block content. To make it easier to define the formatting, we assume that there is an anonymous block box around “Some text”.



image.png

Inline level element

Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.).


The following values of the ‘display’ property make an element inline-level: ‘inline’, ‘inline-table’, and ‘inline-block’.


下列属性让element具有inline-level:


inline

inline-table

inline-block

Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.


看个例子:


Some emphasized text

1image.png


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
C#.NET使用Task,await,async,异步执行控件耗时事件(event),不阻塞UI线程和不跨线程执行UI更新,以及其他方式比较
原文:C#.NET使用Task,await,async,异步执行控件耗时事件(event),不阻塞UI线程和不跨线程执行UI更新,以及其他方式比较 使用Task,await,async,异步执行事件(event),不阻塞UI线程和不跨线程执行UI更新   使用Task,await,async 的异步模式 去执行事件(event) 解决不阻塞UI线程和不夸跨线程执行UI更新报错的最佳实践,附加几种其他方式比较 由于是Winform代码和其他原因,本文章只做代码截图演示,不做界面UI展示,当然所有代码都会在截图展示。
3293 0
使用Chrome的inspect element注意事项
使用Chrome的inspect element注意事项
5 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
8624 0
C#中使用EventLog类写Windows事件日志
在程序中经常需要将指定的信息(包括异常信息和正常处理信息)写到日志中。从C#3.0开始可以使用EventLog类(在System.Diagnostics命名空间中)将各种信息写入Windows日志。
661 0
使用Chrome development tool查看代码内存泄露
使用Chrome development tool查看代码内存泄露
6 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10451 0
2497
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载