Introduction to CSS Box model

Box model

1 areas in the box

<1> Main properties of the box:

width, which is the width of the content in CSS, not the width of the box. Height, which is the height of the content in CSS, not the height of the box. padding inner margin border border margin margins

<2> the following two boxes, the real occupy the width of the high, exactly the same, are 302*302:

. box1{    width:100px;    height:100px;    padding:100px;    border:1px solid Red;} Calculated as follows: 1+100+100+100+1=302px.box2{    width:250px;    height:250px;    padding:25px;    border:1px solid Red;} The calculation is as follows: 1+25+250+25+1=302px the true occupancy width of the box in the above code: true occupancy width = left border+ left padding+width+ right padding+ right border

<3> If you want to keep a box of the true occupancy width, then add width will be reduced padding, add padding will reduce width.

2. Understanding Padding

The <1>padding area has a background color, and in css2.1 the background color must be the same as the content area.

The <2>padding is in 4 directions, so we can describe padding in 4 directions respectively.

The first: A small attribute, that is, a composite attribute.

padding-top:30px;  On padding-right:20px; Right padding-bottom:40px; Lower padding-left:100px; Left

The second type: synthetic attributes.
Spaces separated, upper right down left.

padding:30px 20px 40px 100px;

<3> can cascade large attributes with small attributes (cannot write small attributes in front of large attributes):

padding:20px;padding-left:30px;

Topic One:

p{   width:200px;    height:200px;    padding-left:10px;    padding-right:20px;    padding:40px 50px 60px;    padding-bottom:30px;    border:1px  solid #000;}

A: padding-left:10px, and padding-right:20px; useless, because the back of the padding big attributes, cascading off them.

<4> some tags default to padding. such as ul. So, when we do the station, we will clear the default padding.

3.border border

<1> border three elements: thickness, line style, color.

<2> All line styles:

None    defines no border. The hidden is the  same as "none". Except when applied to tables, hidden is used to resolve border conflicts for tables. Dotted  defines a point border. Renders as solid lines in most browsers. Dashed  defines a dashed line. Renders as solid lines in most browsers. Solid   defines solid lines.  double defines two lines. The width of the double line equals the value of border-width. Groove  defines a 3D groove border. The effect depends on the value of the Border-color. Ridge   defines a 3D ridge-shaped border. The effect depends on the value of the Border-color. Inset   defines a 3D inset border. The effect depends on the value of the Border-color. Outset  defines a 3D outset border. The effect depends on the value of the Border-color. Inherit specifies that the border style should be inherited from the parent element. Commonly used are: solid, dashed, dotted

The <3>border attribute can be disassembled in two different ways:

The first type: by feature

border-width:10px;  Border width border-style:solid;    Linear border-color:red;      Color equivalent to: border:10px solid red;

If a small feature is followed by a space-separated number of values, it is the upper-right-left order:

border-width:10px 20px;border-style:solid dashed dotted;border-color:red  green blue yellow;

Second type: by direction
The first method of dismantling:

border-top:10px Solid red;border-right:10px Solid red;border-bottom:10px solid red;border-left:10px solid red; Equivalent to: border:10px solid red

The second method of dismantling is to take apart each element in each direction:

Border-top-width:10px;border-top-style:solid;border-top-color:red;border-right-width:10px;border-right-style: solid;border-right-color:red;border-bottom-width:10px;border-bottom-style:solid;border-bottom-color:red; border-left-width:10px;border-left-style:solid;border-left-color:red; equivalent to: border:10px solid red;

<4> can make triangles with borders.

<! DOCTYPE html>
4. Standard document Flow

4.1 Block-level elements and inline elements

<1> on the macro level, Web pages and PS and other design software have an essential aversion:
Web page production, from the top down. and design software, where you want to draw things, you can draw.
The microscopic nature of the <2> standard flow:
(1) blank folding phenomenon.
(2) The height is not homogeneous, the bottom is aligned.
(3) Automatic line wrapping, one line can not finish, line-writing.
<3> block-level elements and inline elements
(1) The label is divided into two categories: block-level elements and inline elements.
(2) block-level elements:

Occupy a line and cannot be tied to any other element. Can accept the wide height. If you do not set the width, the width will default to 100% of the father.
(3) Inline elements:

Can be adjacent to other inline elements. You cannot set the width height. The default width is the width of the text.
(4) The label is divided into: text level, container level.

Text level: P, span, a, B, I, U, EM container level: P, H series, Li, DT, DD
Basically all of the text-level tags are inline elements. In addition to P, it is a block-level element.
All container-level labels are block-level elements.

4.2 Conversion between block-level elements and inline elements

<1> block-level elements can be set to inline elements. Inline elements can be set to block-level elements.
<2>display is used to change the inline and block-level properties of an element.

Display:inline; This tag will become an inline element. Display:block; The tag will become a block-level element.
There are three ways to <3>css an element out of the standard document stream.
(1) Floating
(2) Absolute positioning
(3) Fixed positioning

5. Floating: Is the CSS inside the layout with the most properties.

5.1 floating element off-label

5.2 Floating elements Snap to each other

<1> If there is enough space, it will depend on the second brother. If there is not enough space, will rely on a brother. If there is not enough space against a brother, to stick to the left wall.
<2>float:left/right;

5.3 Floating elements have a "surround" effect