From outside the box to achieve the middle
Box allows for centered must satisfy two conditions:
1, must be a block-level element;
2, the box must be specified width (width).
The left and right margins are set to auto, it is possible to block-level elements centered.
Example:
.div {width: 100px;
margin: 0 auto;
}
Centered text box Pictures and background differences
1, the text-align = left horizontally centered text: Center;
2, the box is centered around the level of margin to Auto
. 3, the insertion picture, the most used, such Products
4, the background picture, the background is generally used for small or large icon background image.
Clear elements inside and outside the default margins
* {
padding: 0;
margin: 0;
}
Note:
inline elements only about margins, not up and down margins.
Margin merger
Use vertical margin definition block element from the outside when the combined margins may occur.
Margins vertically adjacent block elements combined (also referred to collapse margins)
When the two upper and lower block elements encounter, if the element has the above margin margin-bottom, has the following elements from the outer margin-top, the perpendicular between them and the sum of the two margins are not, but both the greater.
Nested block elements of vertical margins merge
For the nested relationship of two block elements, if not the parent element and the upper frame padding, sub-elements and the distance will be on the outside of the outer case of merger from the parent element, outside the combined distance of both relatively greater.
Even if the parent element from the outside to 0, the merger will occur. It occurs only in the vertical direction.
Solution:
1, the parent element may be defined on the border pixels in 1 frame or
2, can be added to the parent element overflow: hidden
width and height content
A width property width and height attributes may control the height size of the box.
Calculation principles:
Sizing the sleeve (element spatial dimensions):
the Element Content height space height + padding + = + margin border
the Element space width = content width + padding + border + margin
Calculating the box size (actual size elements):
the Element Content the Height = + padding + border height (the height of the Height of the content)
the Element Content the Width = width + padding + border (width of the Width content)
Note:
1, the width of the width and height attributes height attribute applies only to block-level elements (except img tag and input) of the inline element is not valid;
2, when calculating the total height of the model box, two boxes vertically up and down should also consider margins the combined case;
3, if the box is not given a span / or his father's height width / height, the padding size does not affect the present case.
Box model layout stability
1, margin would merge margins
2, padding will affect the size of the box, we need to add or subtract computing
The stability points, recommends the following:
preferentially used Width (width), followed by the use of padding (padding), again margins (margin).
width > padding > margin
Shadow box
Syntax:
box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影；
| value | description |
|---|---|
| h-shadow | essential. Horizontal position of the shadow. Allow negative. |
| in-shadow | essential. The vertical position of the shadow. Allow negative. |
| blur | Optional. Fuzzy distance. |
| spread | Optional. Size of the shadow. |
| color | Optional. Color of the shadow. |
| inset | Optional. The outer shadow (outset) changed internal shadow. |
1, the first two properties are to be written, and the rest may be omitted
2, outer shadows (OUTSET) can not write, the default
