Box Model
In CSS, "box model" is a term used to design and layout, and will show some of the substantially square box on a web page. We called this box called the box model.
Two box model: IE model and the standard model. Here we highlight some of the standard model.
Schematic box model
Properties box model
Width content: width
height: height of the content of
padding: padding, border to the content of the distance
Border width, refers to the box: border
margin: margins, boxes near the border to the nearest box of distance
If you do make a wide high 402 * 402 box, how would you design it?
The answer is ten thousand.
Computing box model
If a box set padding, border, width, height, margin (we should first do not set margin, margin pit, the course will explain later)
The true width of the box = width + 2 * padding + 2 * border
The true width of the box = height + 2 * padding + 2 * border
It should be noted here read. Standard box model, width not equal to the actual width of the box.
Also, if the width to maintain the box true, then it must add padding to reduce width, must be added to reduce padding width. Like true height settings.
Padding
padding: padding is the meaning, which is the distance between the border to content
Further padding area is the background color. And the background color and the color content of the same. That is the background-color property for the fill area within all border
Padding settings
There are four directions padding, padding. 4 describe directions.
There are two methods described
1, write small property, are set in different directions padding
padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px;
2, write comprehensive property, separated by a space
/ * The right lower left * /
padding: 20px 30px 40px 50px ;
/ * The left and right lower * /
padding: 20px 30px 40px;
/* up down left right*/
padding: 20px 30px;
/*up down left right*/
padding: 20px;
Some labels have default padding
For example ul tag, has a default value of padding-left.
So we generally do when the station is to clear the page tab default padding and margin. In order to better adjust the position of the element in us.
We now beginners can use wildcards selector
*{
padding:0;
margin:0;
}
But, this method is not efficient.
So we want to use and set the selector to select the page labels should (different back, because someone has written these clear the default style sheet given us, reset.css)
https://meyerweb.com/eric/tools/css/reset/
border
border: the border mean, description box border
Borders has three elements: the thickness of the linear style color
border: solid
If the color does not write, default is black. If the thickness is not to write, not show. If write-only linear style, the default has vertical and horizontal width, style 3px solid, and black border.
According to the three elements to write border
border-width: 3px; border-style: solid; border-color: red; /* border-width: 5px 10px; border-style: solid dotted double dashed; border-color: red green yellow; */
In the direction of division
border-top-width: 10px; border-top-color: red; border-top-style: solid; border-right-width: 10px; border-right-color: red; border-right-style: solid; border-bottom-width: 10px; border-bottom-color: red; border-bottom-style: solid; border-left-width: 10px; border-left-color: red; border-left-style:solid;
12 The above statement is equivalent bordr: 10px solid red;
It also can like this:
border-top: 10px solid red; border-right: 10px solid red; border-bottom: 10px solid red; border-left: 10pxb solid red;
border:none；
border：0；
Represents the border style is not set.
Using the border to make the small triangle
/ * Small triangular arrow pointing down * /
div{
width: 0;
height: 0;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
Simple to understand the next margin
margin: margins mean. He represents the distance to the nearest border of the box.
/ * Represents four outside distance direction is 20px * / margin: 20px; / * Indicates a box moved downwardly 30px * / margin-top: 30px; / * Indicates the box to the right of 50px * / margin-left: 50px; margin-bottom: 100px;
Standard document flow
What is the standard document flow
Macro will, our web page design software and ps are essentially different, making web pages, is a "flow" from the top down, like "knitting." The design software, like where to draw something, go where painting
Standard document which shed microscopic phenomenon?
1. Blank folding phenomenon
More spaces will be merged into a single space to display a browser page. img tag wrap write. Will find that there is a gap between each picture, you write the img tag in a row, to solve this problem, but we do not write this to our html structure. This phenomenon is called blank folding phenomenon.
2. uneven height, bottom edge aligned
There are pictures of text sizes, will make us missing elements of the page height of the phenomenon, but to see the page in a browser we always find the bottom alignment
3. Wrap, a line write dissatisfaction, wrapping write
If you write text, text too much on one line, then the browser will automatically wrap to show our character.
The block element and the row element
Early learning, we must know that the standard hierarchical document flow. Label is divided into two levels:
- Row element
- Block-level elements
And the difference between the elements of the row block elements: (very important)
Inline elements:
- Elements side by side with other inline;
- Width can not be set high. The default width is the width of the text.
Block-level elements:
- Occupy a line, not side by side with any other element;
- Acceptable width and height. If you do not set the width, then the width of the father becomes the default 100%.
Block-level element and the inner element classify:
In previous HTML knowledge, we have been divided over the label category was divided into: text level, container level.
From the perspective of HTML, tags are divided into:
- Text level tag: p, span, a, b, i, u, em.
- Container-level tag: div, h series, li, dt, dd.
PS: Why is p-level text label it? Because there can only put text p & Pictures & form elements, p and h can not put inside ul, p which can not be put p.
Now, from the perspective of CSS, CSS classification and like the above, it is not the same p:
-
Inline elements: In addition to p, all text-level labels, all lines within the element. p is a text level, but it is a block-level element.
-
Block-level elements: All the container level tag is block-level element, there are p tag.
Conversion block-level elements and the inner element row
We can displaycarry out the conversion property and block-level elements inline elements. display or "display mode."
It can be converted into block-level elements inline elements:
Once, for a block-level element (such as div) provided:
display: inline;
Well, this label will immediately become inline elements, and this time it is no different from a span. inline is "inline." In other words:
- This case can not be set div width, height;
- At this point the div and others can be a side by side
Inline elements into block-level elements:
Similarly, once a row to the elements (such as span) provided:
display: block;
Then, the tag will immediately becomes block-level element, and at this time it is no different from a div. block "is" block "means to say:
- At this time span is possible to set the width, height
- At this point the span must occupy a row, others can not beside him
- If you do not set the width, will hold over his father
Standard flow inside the limit very much, resulting in a lot of pages effect can not be achieved. If we are going side by side, and we must set the width and height, then how to do it? Approach is: Immigration! From the standard flow !
css in a total of three means to make a standard element from the document flow:
- (1) Floating
- (2) absolute positioning
- (3) fixedly positioned