boxlayout's People
Contributors
Watchers
boxlayout's Issues
Relationships between 'display', 'position', and 'float'
The three properties that affect box generation and layout — 'display', 'position', and 'float' — interact as follows:
If 'display' has the value 'none', then 'position' and 'float' do not apply. In this case, the element generates no box.
Otherwise, if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below. The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.
Otherwise, if 'float' has a value other than 'none', the box is floated and 'display' is set according to the table below.
Otherwise, if the element is the root element, 'display' is set according to the table below, except that it is undefined in CSS 2.1 whether a specified value of 'list-item' becomes a computed value of 'block' or 'list-item'.
Otherwise, the remaining 'display' property values apply as specified.
| Specified value | Computed value |
|---|---|
| inline-table | table |
| inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block | block |
| others | same as specified |
什么是css中的盒模型
节点是节点，盒子是盒子，一个是文档模型，另一个是浏览器解析后的展示区域。
CSS盒模型描述了一个矩形区域，该区域由dom树中的节点生成，其布局遵循可视化格式模型。
1.盒模型尺寸
每一个盒子都拥有一个内容区域（比如文本、图像等）以及可选择的四周的padding，border以及margin区域；每一个区域的尺寸都被以下定义的属性所标识。下面的图表展示了这些区域的关系以及margin、border、padding各部分的术语。
margin，border，padding可以被分解成top，right，bottom，left四个片段（例如，在图中，“LM”指的是left margin，“RP”指的是right padding，“TB”指的是top border， 等等。）
-
内容边缘/内部边缘
内容边缘形成了一个由box指定的width、height形成的矩形，矩形区域的宽高经常取决于box内的渲染内容。4条边定义了box的内容盒子。
-
padding边缘
padding边缘包围着盒子的padding区域。如果padding值为0宽度，padding边缘与内容边缘是重合的，4条padding边缘形成了盒子的padding盒子。
-
border边缘
border边缘包围了盒子的边框，如果border值为0宽度，border边缘和padding边缘是重合的，4条border边缘形成了盒子的边框盒子。
-
margin边缘/外围边缘
margin边缘包围了盒子的margin区域。如果margin的宽度为0，margin边缘与border边缘重合。4条margin边缘形成了盒子的margin盒子。
每一条边都可以被分成top，right，bottom和left边缘。
内容盒子的尺寸（内容的宽高）取决于几个因素：形成盒子的元素是否有width和height属性，盒子是否包含文字或者其他盒子，该盒子是否为一个table，等等。关于盒子的宽高的讨论可以见可视化格式模型
盒子中内容、padding、border区域的背景色在元素的“background”属性中定义。margin的背景色都是透明的。
2.margins，padding和borders的例子
以下的例子举例说明了margins，padding以及borders相互作用。例子中的HTML文档如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Examples of margins, padding, and borders</TITLE>
<STYLE type="text/css">
UL {
background: yellow;
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
/* No borders set */
}
LI {
color: white; /* text color is white */
background: blue; /* Content, padding will be blue */
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px; /* Note 0px padding right */
list-style: none /* no glyphs before a list item */
/* No borders set */
}
LI.withborder {
border-style: dashed;
border-width: medium; /* sets border width on all sides */
border-color: lime;
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>First element of list
<LI class="withborder">Second element of list is
a bit longer to illustrate wrapping.
</UL>
</BODY>
</HTML>该文档将返回一个文档树，包含了一个拥有两个LI节点的UL节点。
第一张图展示了这个例子将如何展示，第二张图展示了UL和LI节点中margins、padding以及borders之间的关系。（图片不是按比例缩放的）
注意：
- 每一个LI盒子的内容宽度（content width）依照从上到下的顺序计算；LI盒子的包含块被UL节点建立。
- 每一个LI盒子margin盒子的高度取决于它的内容高度，加上padding，borders以及margins的top和bottom值。注意垂直的margins在LI盒子之间的叠加现象。
- LI盒子的right padding通过padding属性被设置为0。效果在第二个LI中出现。
- LI盒子的margins是透明的——margins一向都是透明的——所以UL的背景色（黄色）可以透过LI的margins。
- 第二个LI节点通过“border-style”制定了一个虚线边框。
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.