12.1css layout model
Layout model with CSS box model are the same as the most basic and core concepts. But the layout model is built on the basis of the box model, and different from what we often say that CSS layout style or CSS layout templates. If this model is the layout, then the CSS layout template is the end, is the external manifestation.
CSS layout includes three basic models, with English summarized as: Flow, Layer and Float.
Page, the layout model, there are three elements:
1, flow model (Flow)
2, a floating model (the Float)
. 3, the model layer (Layer)
12.2, 12.3 Flow Model
Flow model, flow (Flow) is the default page layout mode. That page in the default HTML page elements are based on the flow model of distributed web content.
Flow layout model having two typical characteristics:
First, the elements are block sequence extends from top to bottom in a vertical distribution in which the element comprises, as in the default state, both the width of the block elements is 100% . In practice, the element will occupy the position of block in rows. The right side of the three block code editor element tags (div, h1, p) is displayed as 100% width.
Second, in the flow model, inline elements are located in horizontally from the left contains the element distribution display. (Inline element can not block element so overbearing separate line)
12.4 Floating model
So overbearing block elements are on a separate line , if we now want two massive elements side by side , how to do it? Do not worry, setting the floating elements can make that happen.
Any element default is not floating , but may be defined as a floating CSS , such as div, p, table, img other elements can be defined as a float. The following code may be implemented div elements two line display.
div{
width:200px;
height:200px;
border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
12.5 What is a layer model?
What is the layer layout model? Layer model layout software like PhotoShop image as a very popular editing layers, each layer can pinpoint operations, but in the field of web design, due to the activity of the page size, layout layer could not be favorable. However, for topical use on the page layout or layer has at its convenience. Let's learn about html layout layer in.
How to make precise positioning of the html element in a web page , like an image in PhotoShop software layers as possible to pinpoint operations on each layer. CSS defines a set of positioning (Positioning) property to the support layer layout model.
Layer model has three forms:
1, absolute positioning (position: absolute)
2, the relative positioning (position: relative)
3, fixed positioning (position: fixed)
12.6-layer model - absolute positioning
If you want to set for the element layer model of absolute positioning, you need to set the position: Absolute (expressed absolute positioning), the role of this statement will be dragged out of the elements from the document flow, and then use the left, right, top, bottom relative to its property positioning a parent having the closest attribute contains the absolute positioning blocks . If there is no such block comprising, with respect to the body element, i.e., with respect to the browser window.
The following code can be achieved div element to the browser window to the right moves 100px, toward the 50px movement.
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;/*left和top看成父窗口的，所以为与父窗口的左边距离100px*/
top:50px;
}
<div id="div1"></div>
12.7 Layer Model - relative positioning
To the element provided in the layer model relative positioning , to set position: relative (expressed relative positioning), which through the left, right, top, bottom attribute determining element in the normal offset position of the document flow . Relative positioning completion process first by static (float) way to create an element (and elements like layer float up), then the position before the relative movement direction and magnitude of the left, right, top, bottom attribute determination , the position of the front shift left intact.
Code to achieve the following with respect to the previous position to the next , the mobile 50px the right movement 100px;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;/*left和top看成以前窗口的，所以为与以前窗口的左边距离100px即比以前向右了100px*/
top:50px;
}
<div id="div1"></div>
What is called "pre-position offset remain untouched" mean?
We can do an experiment, to add a span tag in the back of the right side of the line 19 div tag code editor, and write some text in the span tag labeled. The following code:
<body>
<div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>
</body>
Effect can be clearly seen from the figure, although the div element is generated with respect to the previous position offset, div element but still retains the previous position, the span element is displayed behind a location behind the previous div element .
Layer Model - What does the relative positioning in practical applications?
1. position relative to the browser, the absolute position will not move, only fixed in the window, along with the expansion of narrow window changes, the relative positioning will vary with the mouse
2. Remember "absolutely parent with child" on the line It is the parent element using relative positioning, sub-elements using absolute positioning. When the page layout will be used
12.8 Layer Model - fixed positioning
fixed: indicates a fixed positioning , and similar types absolute positioning, but it is a view of the relative movement coordinates (within the screen page window) itself . Because the view itself is fixed, it will not change the scroll with the scroll bar of the browser window, unless you move the screen position of the browser window on the screen, or change the browser window display size, and therefore fixed positioning of elements will always be located a location within the browser window view, the document flow is not affected by the impact, which is the background-attachment: fixed; the same property function. The following code may be implemented with respect to the right view of the mobile browser 100px, moved downward 50px. And when you drag the scroll bar in a fixed position.
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;/*相对移动的坐标是视图（屏幕内的网页窗口）本身**/
top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
....
Phenomenon: div box will always be at the bottom right of the screen, the scroll wheel will not change.
Absolute used in combination with 12.9Relative
#box3{
width:200px;
height:200px;
position:relative;
}
#box4{
width:99%;
position:absolute;
bottom:0px;
}
<div id="box3">
<img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg">
<div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>
</div>
effect:
to sum up
1. Parent must sub phase , when moving the child father parent movable with the window.
2.
Absolute positioning: left: 100px;
left and top as the parent window, so the distance to the left of the parent window 100px, 100px than that is to the right of the parent window.
Relative positioning: left: 100px;
left and top as the previous window, the previous distance 100px and left window, i.e., the right 100px than before.
Fixed Location: left: 100px;
left and top as the current window, the distance of the left and 100px current window, the position of the slide the roller is positioned fixed constant.
