Css box model is the core foundation of knowledge and understanding of this important concept in order to better typography, page layout.
A, css box model concept
1: The box model used to put the various elements of a web page
2: web design content, such as text, images and other elements can be a box (div nested)
pages each element can be regarded as a box, the box has margins (margin), frame (border), padding (PAD
ding), content (content) of these four attributes:
- Margins (margin): it is the distance between the element by element, or outside of the element leaving a blank
- Padding (padding): the distance between the elements in the content of the element border
- Borders (border): the element itself
- Content (content): element placed things, the width of the element and high refer to the width and height of the content element, the element itself is not
The total width of the element frame = width of elements (element) of + padding the left and right margins value + left and right margins of the margin value + left border width
The total height of the box element = height element (element) a + value of the top and bottom margins of the padding + the value of the margin of the top and bottom margins + vertical width of the border .
In fact, so much talk or difficult to understand the abstract concept box model, in order to facilitate better understanding, I got a little more vivid explanation from the know almost
can box class life, like when to send Express (take express analogy cup), Content that cups, padding is between the cup and shatterproof delivery boxes packed layer, while the border is box, the last margin is the distance of the carriage box and
Comments on the height and width
width property:
Width:
width: length value | percentage | auto
Maximum width:
max-width: length value | percentage | auto
Minimum width:
min-width: length value | percentage | auto
height property
Height:
height: length value | percentage | auto
Maximum height:
max-height: length value | percentage | auto
Minimum height:
min-height: length value | percentage | auto
auto default. Browser calculates the actual height.
length using px, cm height defined other units.
% Based on the percentage of the height of the containing block-level object.
provision should inherit inherited height property value from the parent element.
padding properties About box model
CSS padding (fill) is a shorthand property, the space defined between the border and the element content elements, i.e., vertical and horizontal padding.
Padding property, you can have one to four values.
The format of padding properties in total are the following:
padding: 10px; /* 意思是上下左右值全是 10px */
padding:5px 10px; /* 意思是上下为 5px，左右为 10px */
padding:1px 2px 3px 4px; /* 这个写法意思是：上为 1px，右为 2px，下为 3px，左为 4px */
padding:5px 10px 7px; /* 这种写法意思是：上为 5px，左右为 10px，下为 7px */
注意：padding 后面 4 个值定义的顺序分别为 -- 上 右 下 左，即顺时针方向从上开始。
而 padding-top 或者 padding-bottom 这种写法，只是单方面的定义了一个方向的值，这样写会增加 CSS 代码的长度，增加 CSS 样式的代码量，拖慢页面的加载速度。
所有的CSS填充属性
| 属性 | 说明 |
|---|---|
| padding | 使用简写属性设置在一个声明中的所有填充属性 |
| padding-bottom | 设置元素的底部填充 |
| padding-right | 设置元素的右部填充 |
| padding-left | 设置元素的左部填充 |
| padding-top | 设置元素的顶部填充 |
边框border属性
CSS边框属性允许你指定一个元素边框的样式和颜色。
- 可以通过 border-width 属性为边框指定宽度。为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。
- border-color属性用于设置边框的颜色。可以设置的颜色：
| name | 指定颜色的名称，如 “red” |
|---|---|
| RGB | 指定 RGB 值, 如 “rgb(255,0,0)” |
| Hex | 指定16进制值, 如 “#ff0000” |
还有其他关于border的参数见下图
外边距margin属性
margin 是指从自身边框到另一个容器边框之间的距离，就是容器外距离。（外边距）
一：css 外边距合并（叠加）
两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值，如图：
需要注意的是：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
css reset 中也会经常用到
- {
margin : 0;
padding : 0;
}
margin属性可以有一到四个值。
margin: 25px 50px 75px 100px;
top margin is 25px
right margin to 50px
bottom margin to 75px
left margin to 100px
margin: 25px 50px 75px;
upper margin of 25px
left and right margins 50px
bottom margin of 75px
margin: 25px 50px;
top and bottom margins of 25px
left and right margins 50px
margin: 25px;
all four margins are 25px
About css box model in just plain talked about this before it! Come on! ! !
Want to know more can the venue rookie tutorial, there are about css box model of a more detailed description of
the rookie tutorial css box model
