The CSS contains 3 basic layout models, summarized in English as Flow, Layer, and Float.
In a Web page, elements have three layout models:
1. Flow model
2. Floating model (float)
3. Layers Model (layer)
first, the flow model
Web pages in the default state of HTML page elements are based on the flow model to distribute the content of the Web page.
the flow layout model has 2 more typical features:
1th, the block element extends vertically from top to bottom in the containing element, because the block element has a width of 100% in the default state. In fact, a block element occupies a position in the form of a row. As in the right-hand code editor, the three-block scholar-label (div,h1,p) width is displayed as 100%.
2nd, in the flow model, the inline elements are displayed horizontally from left to right within the containing element in which they are located. (inline elements are not like blocky elements so overbearing exclusive line)
second, floating model
any element cannot float by default, but it can be defined as a floating CSS, such as Div, p, table, IMG, and so on, which can be defined as floating. The following code enables two DIV elements to be displayed on one line.
div{
width:200px;
height:200px;
border:2px red Solid;
Float:left;
}
<div id= "Div1" ></div>
<div id= "Div2" ></div>
You can also set two elements at the same time right float can also implement a line display
div{
width:200px;
height:200px;
border:2px red Solid;
Float:right;
}
set two elements one left and right to display a line
div{
width:200px;
height:200px;
border:2px red Solid;
}
#div1 {float:left;}
#div2 {float:right;}
three, layer model
How to position HTML elements precisely in a Web page, like a layer in the image software Photoshop, allows for precise positioning of each layer. CSS defines a set of positioning (positioning) properties to support the layer layout model.
there are three forms of the layer model:
absolute Positioning (position:absolute)
relative positioning (position:relative)
fixed positioning (position:fixed)
1. Absolute positioning
(1) to set an absolute position in the layer model for an element, you need to set Position:absolute (for absolute positioning), which will drag elements out of the document stream and use left, right, top, The bottom property is absolutely positioned relative to its closest parent containing block with a positional property. If no such inclusion block exists, then relative to the body element, that is, relative to the browser window.
The following code can implement a DIV element to move to the right of 100px relative to the browser window and move the 50px down.
div{
width:200px;
height:200px;
border:2px red Solid;
Position:absolute;
left:100px;
top:50px;
}
<div id= "Div1" ></div>
The effect is as follows:
2. Relative positioning
setting the relative positioning of the element in the layer model requires setting the position:relative (for relative positioning), which determines the offset of the element in the normal document stream through the left, right, top, and bottom properties. Relative positioning is done by first generating an element as static (and the element floats like a layer), and then moving relative to the previous position, the direction and amplitude of the move is determined by the left, right, top, bottom properties, and the position before the offset remains fixed.
The following code is implemented to move down 50px relative to the previous position, moving 100px to the right;
#div1 {
width:200px;
height:200px;
border:2px red Solid;
position:relative;
left:100px;
top:50px;
}
<div id= "Div1" ></div>
:
3. Fixed positioning
fixed: Represents a pinned position, similar to the absolute anchor type, but its relative movement coordinates are the view (the page window within the screen) itself. Because the view itself is fixed, it does not change with the scroll bars of the browser window, unless you move the screen position of the browser window on the screen, or change the display size of the browser window, so the anchored element is always located somewhere in the view in the browser window and is not affected by the flow of the document. This is the same as the Background-attachment:fixed property feature. The following code enables you to move the 100px to the right relative to the browser view and move the 50px down. And the position is fixed when you drag the scroll bar.
#div1 {
width:200px;
height:200px;
border:2px red Solid;
position:fixed;
left:100px;
top:50px;
}
<p> text-Text text-text-text-text-text-text text-text-text-text text-text-text-text-text-text-text-text-text-text-text-text text-text text-text textual text text </p>
....
4, relative and absolute combination use
(1), the element of reference positioning must be the predecessor element of the relative positioning element:
<div id= "box1" ><!--Reference positioned elements--
<div id= "Box2" > Relative reference elements for positioning </div><!--relative positioning elements --
</div>
it can be seen from the above code that BOX1 is the parent element of Box2 (the parent element is, of course, the predecessor element).
(2), reference positioning elements must be added to the position:relative;
#box1 {
width:200px;
height:200px;
position:relative;
}
(3), positioning elements to join Position:absolute, you can use top, bottom, left and right to offset positioning.
#box2 {
Position:absolute;
top:20px;
left:30px;
}
in this way box2 can be positioned relative to the parent element Box1 (here the reference is not a browser, but it can be set freely).
Iv. Code Abbreviations
box Model code abbreviation
Color Abbreviations
p{color: #336699;}
can be abbreviated as:
p{color: #369;}
Font Abbreviations
Note
(1) Use this shorthand method to specify at least Font-size and font-family properties, other attributes (such as Font-weight, Font-style, Font-varient, Line-height) Default values are automatically used if not specified.
(2) in the abbreviation Font-size and line-height in the middle to join the "/" inclined to carry.
In General, because the Chinese site, the English is still relatively small, so the following abbreviation code is more commonly used:
body{
font:12px/1.5em "Song Body", Sans-serif;
}
only font size, line spacing, Chinese fonts, English fonts are set.
Five, color value
The color settings in a Web page are very important, with font color (color), background color (background-color), border color (border), and so on, there are many ways to set colors:
1, English command color
The Setup method is often used in the previous sections:
p{color:red;}
2. RGB color
This is consistent with the RGB colors in Photoshop and is color-matched by the proportions of R (red), G (green), and B (blue) Three colors.
P{color:rgb (133,45,200);}
the value of each item can be an integer between 0~255, or it can be a percentage of 0%~100%. such as:
P{color:rgb (20%,33%,25%);}
3. Hex Color
this color setting method is now more commonly used method, the principle is also RGB settings, but its value of each item from 0-255 to hexadecimal 00-ff.
p{color: #00ffff;}
six, Length value
Length Unit Summary, at present more commonly used to px (pixels), EM,% percent, you should pay attention to the fact that these three units are relative units.
(1) pixels
Why are pixels relative units? Because pixels refer to dots on the display (the CSS specification assumes "90 pixels = 1 inches"). The reality is that the browser uses the actual pixel value of the display, and most designers now tend to use pixels (px) as units.
(2) EM
is the font-size value of the given font for this element, 1em = 14px If the element's font-size is 14px, and 1em = 18px If the font-size is 18px. The following code:
P{font-size:12px;text-indent:2em;}
The code above is the ability to indent the first line of a paragraph by 24px (that is, the distance of two font sizes).
A special case is noted below:
However, when Font-size is set to EM, the criteria for this calculation are based on the font-size of the parent element of P. The following code:
HTML:
<p> Take this <span> example </span> for example. </p>
CSS:
p{font-size:14px}
Span{font-size:0.8em;}
as a result, the font "example" font size in span is 11.2px (0.8 = 11.2px).
(3) Percentage
p{font-size:12px;line-height:130%}
Set the line height (line spacing) to the font's 130% (* 1.3 = 15.6px).
CSS Layout model
