In fact, CSS on three modules: a box model, float, positioning, and the rest are details. This requires three parts, the case must learn very proficient.
The so-called box model is to an HTML page element as a rectangular box, which is a container containing content. Each content element consists of a rectangular, padding (padding), the border (border) and margins (margin) composition.
See through the nature of the layout of the page
Page layout, how we put inside the text, images, according to art renderings give us a neat and orderly arrangement of it?
We said, inline elements such as text similar to milk, also need to put them in a box loaded up, we've learned is a double label box. With the box, we can be free, free, a placement.
See through the nature of the layout of the page: the page elements such as text and graphics, and so on, put inside the box, put the box and then use CSS process, that is, the page layout. CSS in fact there is not much logic at all, similar to our childhood playing with building blocks, we can be free, free to put the effect we want.
Box model (Box Model)
First, we look at a map to understand what is at box model.
All document elements (labels) will generate a rectangular box, we become elements box (element box), which describes the location of the size of a page layout document element and then aggregated share. Therefore, each case has its own in addition to the size and location, but also affect the size and position of the other boxes.
Box frame (border)
Border that is the layer of skin. Tangerine skin. . Grapefruit peel. . Orange peel. . .
grammar:
border : border-width || border-style || border-color
Border properties - set the border style (border-style)
Style, border style is used to define a page frame, the attribute value is used as follows:
none: no border width ignoring all borders (default) Solid: a single solid line border (most commonly used) Dashed: the border as a dashed dotted: a dotted line border double: double solid line border
Box frame written summary table
Form a thin line border
Previously learned html table border is very thick, there is only one sentence CSS can be beautiful together. Let us really believe, CSS is our Prince Charming (Snow White).
table {border-collapse: collapse;} collapse word merging means
border-collapse: collapse; represents a combined border.
Rounded corners (CSS3)
Since then, our world is not only a rectangle. radius radius (distance)
Syntax:
border-radius: top left corner top right corner bottom right corner bottom left corner;
Classroom Case:
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
}
div: first-child {/ * structure selected from the class selector pseudo brothers * /
border-radius: 10px; / * value denotes the four corners are the same 10px curvature * /
}
div:nth-child(2) {
/ * Border-radius: 100px; half of the width and height will be taken into a circular * /
border-radius: 50%; / * 100px 50% will be taken half the width and height into a circular * /
}
div:nth-child(3) {
border-radius: 10px 40px; / * left and right corners are 10px top right bottom left diagonal 40 * /
}
div:nth-child(4) {
border-radius: 10px 40px 80px; / * lower right corner of the top left top right bottom left 10 40 80 * /
}
div:nth-child(5) {
border-radius: 10px 40px 80px 100px; / * lower right corner of the upper left corner 10 40 80 top right bottom left bottom right 100 * /
}
div:nth-child(6) {
border-radius: 100px;
height: 100px;
}
div:nth-child(7) {
border-radius: 100px 0;
}
</style>
Padding (padding)
padding properties is used to set margins. It refers to the distance between the border and the content.
padding-top: the padding
padding-right: right inner margin
padding-bottom: the bottom margin
padding-left: the left margin
Note: The meaning behind with a few numerical representation is not the same.
Classroom Case: Sina navigation
Margins (margin)
margin property is used to set margins. Set margins would create "gaps" between the elements, this usually can not be placed blank else.
margin-top: on the margins
margin-right: Right Margin
margin-bottom: bottom margin
margin-left: on the margins
margin: Margin Right Margin on bottom margin left outside
The value of the order with the same padding.
From outside the box to achieve the middle
Allows a box to achieve the middle level, we need to meet two conditions:
-
It must be block-level elements.
-
Box must specify the width (width)
Then give about margins are set to Auto , can make the block-level elements centered horizontally.
Common practice in this way the page layout, the following sample code:
.header{ width:960px; margin:0 auto;}
Centered text box Pictures and background differences
-
Text is horizontally centered text-align: center
-
Box horizontally centered around margin changed to auto
align = left-text: Center; / * Text Center Horizontal * /
margin: 10px auto; / * the box is centered horizontally on the left margin to the width at the auto * /
-
Products such as inserting pictures up to class we use
-
Our background images are generally used for large or small icons background background image
section img {
width: 200px; / * insert a picture and change the size width height * /
height: 210px;
margin-top: 30px; / * insert picture can change the position of the margin or padding box model * /
margin-left: 50px; / * when the image is inserted into a box * /
}
aside {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-size: 200px 210px; / * background image can only be used to change the size of the background-size * /
background-position: 30px 50px; / * background image I use that position more background-position * /
}
Clear elements inside and outside the default margins
In order to more easily control elements on the page, and the production of web pages, the following code may be used both inside and outside clearing default margin elements:
{* Padding: 0; / * Clear the padding * / margin: 0; / * Clear margins * / }
Note: inline elements is only about margins, there is no up and down the margins. Padding, there will be a problem in a low version ie6 other browsers.
We try not specify the inside and outside of the upper and lower margins to inline elements just fine.
Margin merger
Use vertical margin definition block element from the outside when the combined margins may occur.
Block elements adjacent vertical margins of the combined
When two vertically adjacent block elements meet, if the above element has bottom margin margin-bottom, has the following elements from the outer margin-top, the vertical spacing than the margin-bottom margin-top between them the sum, but the larger of the two. This phenomenon is referred to as adjacent block elements combined vertical margins (also referred to collapse margins).
Solution: Avoid just fine.
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 big, even if the parent element from the outside to 0, the merger will occur.
solution:
-
You can define the border of the parent element of one pixel or padding.
-
to be continued. . . .
width and height content
A width property width and height attributes may control the height size of the box.
Attribute value of width and height may be different units or values with respect to the percentage% of the parent element, the most common practice is the pixel value.
Most browsers, such as Firefox, IE6 and above have adopted the W3C specification, in line with norms of the CSS box model total width and total height calculation principles are:
/ * Calculate pack size (spatial size elements) * /
the Element Content height space height + padding + = + margin border
the Element Content width + space width padding + = border + margin
/ * calculate the box size (actual size elements) * /
Element height = content height + padding + border (height is 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 box model, should also be considered where the upper and lower margins combined vertical boxes.
3, if the box is not given a width / height or his father's width / height, the padding size does not affect the present case .
Box model layout stability
Box to start learning model, students biggest confusion is that the use of internal and external tell margins, use padding under what circumstances, the use of margins under what circumstances?
The answer is: In fact, in most cases they can be mixed in. That is, you can also use padding, margins can also be used. Do you think is easy to use which.
However, there is always a best use of it, we have to divide the stability, the following recommendations:
Preferentially used according to the width (width) secondly padding (padding) again margins (margin).
width > padding > margin
the reason:
-
margin would merge margins as well as margin doubled bug ie6 below (hate) so in the end use.
-
padding will affect the size of the box, we need to add or subtract computing (trouble) followed by use.
-
width is no problem (Hi skin) often do we use the residual method width height residual method.
CSS3 box model
CSS3 box model can be specified by the box-sizing, can be specified as a content-box, border-box, we will calculate the size of the box on the way changed.
It can be divided into two cases:
1, box-sizing: content-box box size width + padding + border content-box: this value is the default value, so that the elements maintain W3C standards Box Mode
2, box-sizing: border-box size of the box width that is incorporated into the padding and border width are inside
Note: width marked above refers to the width CSS properties in the set: length, value content is automatically adjusted.
div:first-child {
width: 200px;
height: 200px;
background-color: pink;
box-sizing: content-box; / * previous standard box model is w3c * /
padding: 10px;
border: 15px solid red;
/ * Size of box width + padding + border content-box: this value is the default value, so that the elements maintain W3C standard Box Mode * /
}
div:last-child {
width: 200px;
height: 200px;
background-color: purple;
padding: 10px;
box-sizing: border-box; / * padding border is not softened cartridge * /
border: 15px solid red;
/* margin: 10px; */
/ * Size of box width that is incorporated into the padding and border width are inside * /
}
Shadow box
Syntax:
box-shadow: horizontal vertical hatching fuzzy shadows / shadow outer size of the shadow color shading within a distance;
-
The first two properties are to be written. The rest may be omitted.
-
Outer shadow (outset) but do not want to write default within the shadow inset
div {
width: 200px;
height: 200px;
border: 10px solid red;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
/ * Box-shadow: Fuzzy vertical position from the horizontal position the shadow size (the size of the shadow) / outer shadows the shadow color; * /
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
}