1. Positioning
The concept of positioning is that it allows you to define a normal element relative to other elements, it should appear where there may be other elements parent element, the other element or even the browser window itself. There is a floating, floating in fact not entirely be positioned, it's very magical properties, so that it is widely person in the layout application. We will specifically mention it in later.
Turning to positioning, we have to start with the position property. Can you tell the exact position of the property value it? I believe you can say such a perfect six property values: static, relative, absolute, fixed, sticky and inherit.
- static (default): Normal generating element block. Block-level elements generate a rectangular frame, as part of the document stream; inline element will create one or more line boxes, placed in the parent element.
- relative: the normal flow of the document before a position shifted with respect to the frame element, and the original position is still occupied. When the shift occurs, it may be covered by other elements.
- absolute: no box element occupies document flow position, with respect to (static block elements comprise a so-called outer element position is the most recent one is not) offset blocks comprising
- fixed: the element does not already own the document flow block position, and is positioned with respect to the window
- This is a sticky :( css3 new property value) viscosity positioning, the official introduction is relatively simple, maybe you do not understand. In fact, it is equivalent to relative and fixed mixing. Initially be treated as relative, with respect to the original position offset; once exceeds a certain threshold, is positioned as a fixed, positioned with respect to the viewport.
After briefly, explain the meaning of the position of the attribute value, at the offset top view, right, bottom, left four properties.
I do not know, when did the beginner css, will not be confused with margin this property? In fact, between them it is very easy to identify places. Since the value of these four properties, in fact, offset during positioning. Offset does not function on the static element. The margin, the corresponding distance is outside the box model, which will play the role of each element block, so that the frame element between a blank and other elements.
The following: We take a look at some common positioning offset
- relative: offset is relative to its original position in the document stream
- absolute: It is offset with respect to a position nearest ancestor element is not static
- fixed: it is offset relative to the viewport.
In fact, what it is described here that, should all be understood. The layout is relative to the base, but also very important. It should be noted that, where the offset is already involved in a going to say size. In doing adaptive layout designs, these offsets is often desirable to be able to use the percentage of the unit, or the like opposing units e.g. rem.
2. Size
Until then talked about the size of the top of the unit - the percentage. Well, here it is around the size of our units deployed.
Size, we should chatted from the unit, this unit for px, do a web page should be familiar, and therefore not much to do introduction.
So, we can introduce the following several units:
- Percentage: Percentage of reference is the parent element, corresponding to 50% to 50% of the width of the parent element
- rem: This is quite useful for complex design, which is the size of the font-size of html
- em: Although it is a relatively unit, relative to the parent element of font-size, however, it is not commonly used, is calculated primarily too much trouble.
Unit just to define a corresponding reference element size. Another concept, may be able to use the house to make an example, in the early years of each house will be built layer fence at the periphery of the house, making the whole area can be seen as a plot inside the house + + + perimeter fence parcel model. In css, each element will be a box model concepts.
Box Model : each element, are formed in a rectangular block includes four parts: margin (margins) + border (border) + padding (padding) + content (Content)
The presence of two different css box model may be provided by different models box-sizing. Two kinds of box model, the main difference is the width of the width
This is the standard box model, it can be seen the length of width equal to the width of the content; when the set attribute values into box-sizing border-box, width of the box model = border + padding + content of the sum.
As can be seen, the width of different models are different. Width default attribute values are auto, such that the length of the inner attribute value is automatically filled up with the parent element of the element width.
However, height property value is also the default auto, why did not the same as the width of it?
In fact, auto value of this property represents the browser automatically calculated. This automatic calculation, you need a reference, usually the height of the browser is allowed to scroll, so can cause a problem - the browser can not find a reference in the vertical direction.
The same principle will be applied to the margin properties. If you believe that when the investigation is centered, centered horizontally eyes closed you may be able to write, but it is centered vertically around the head to think. This is because if the middle block element as long as the level of margin in the horizontal direction is set to auto it. However, the vertical direction is not so simple, because when you set to auto, margin is zero. The problem, or the need to carefully think about.
So far, the basic layout of the part we have to go more than half, there is a float.
3. Floating
Float, this is a very interesting thing, is widely used in the layout. Initially, the design of floating, in fact, not for layout, but in order to achieve special effects text wrapping
However, this is not just float it. What is floating? Floating should be said that 'a separate faction', similar to ps in the same layer, the floating elements can be arranged in a floating layer above, while the position of the element in the original document stream, is to delete a certain way, but still affects layout. You may feel doubt, what affect the layout? We can give an example:
We can, found that although the left block because left floating, and that the position previously occupied by elements in the flow of the document is deleted, however, when the right block up on the original location, right in the block fonts, but squeezed out. This is called affect the layout.
Why float will be used in the layout of it? Since the provision of the floating element will form the BFC (such that the interior element will not be disturbed by the outside), and the width of the parent element of the element width is no longer adaptive, but adapt to their own content. So you can easily achieve the effect of multi-column layout.
Floating content also need to introduce a - Clear float. It can be seen floating elements, in fact, the layout, it is particularly dangerous. Because you have done this one might float, but did not make clear, the problems caused by the height of collapse. That case is illustrated above.
Clear float , the two most commonly used methods:
- overflow: the overflow of the parent element, set to hidden.
- after pseudo class: after pseudo-class subelements be set.
Here only slightly put on a mouth. Here we introduce a formal layout herein, this page is the core of things.
4. The initial layout --table
Initially, the page may be as simple as text and links. At this time, it is most commonly used is the table. Because the table may exhibit a plurality of blocks arranged.
This arrangement should not be used now, because when a single form, color, convenient to use. But now the pages become more complex, the adaptation problem is more and more, this arrangement is no longer time.
Mainly appear div block, it can make a flexible arrangement of pages, making web pages become prosperous. At this time, developers have begun to think about how to more clearly distinguish the level of the page. Next, we can see which layout more famous.
The two-column layout
If I remember, that while the main content, while catalog pages, as shown:
Similar to the layout of the map can be defined as a two-column layout .
Two-column layout: a fixed column width of a column adaptive. Benefits like this do is to set the column width can advertise, adaptation can be used as the main content.
The way to achieve:
- float + margin：
<body> <div class="left">定宽</div> <div class="right">自适应</div> </body> .left{ width: 200px; height: 600px; background: red; float: left; display: table; text-align: center; line-height: 600px; color: #fff; } .right{ margin-left: 210px; height: 600px; background: yellow; text-align: center; line-height: 600px; }
Other methods: You can also use the absolute position, you can use the same effect
6. The three-column layout
Three-column layout, is also often used to a layout.
It features: fixed width on both sides, then the middle of the width is auto, the content can be adaptive, margin plus margin to be set.
Three-column layout can have four implementations, each implementation has its own advantages and disadvantages.
1. two left columns using the float property, the middle column using distraction margin attribute, note that the result of the html
<div class="left">左栏</div> <div class="right">右栏</div> <div class="middle">中间栏</div> .left{ width: 200px;height: 300px; background: yellow; float: left; } .right{ width: 150px; height: 300px; background: green; float: right; } .middle{ height: 300px; background: red; margin-left: 220px; margin-right: 160px; }
The disadvantage is that: when the width is smaller than a width on both sides of the left and the right column pushed down; html structure 2 is incorrect.
2. achieve positioning position, i.e., left and right two columns using the position for positioning, the intermediate column used for positioning margin
<div class="left">左栏</div> <div class="middle">中间栏</div> <div class="right">右栏</div> .left{ background: yellow; width: 200px; height: 300px; position: absolute; top: 0; left: 0; } .middle{ height: 300px; margin: 0 220px; background: red; } .right{ height: 300px; width: 200px; position: absolute; top: 0; right: 0; background: green; }
Benefits are: normal html structure.
Disadvantage: When a parent element inside and outside the margins will lead to the deviation of the position of the middle column
3. Use the float and the Holy Grail layout with BFC
The width of the middle set to 100%, and then float to left, wherein the main block setting margin attribute, then set the left column to float left, after setting the margin to 100%, it is also provided to the right column float: left, after the margin-left to their own size.
<div class="wrapper"> <div class="middle"> <div class="main">中间</div> </div> <div class="left"> 左栏 </div> <div class="right"> 右栏 </div> </div> .wrapper{ overflow: hidden; //清除浮动 } .middle{ width: 100%; float: left; } .middle .main{ margin: 0 220px; background: red; } .left{ width: 200px; height: 300px; float: left; background: green; margin-left: -100%; } .right{ width: 200px; height: 300px; float: left; background: yellow; margin-left: -200px; }
7. Flexible layout (flex)
An elastic cassette (flexbox) layout is a layout as a method designed to unidimensional. One-dimensional mean you want to be content in rows or columns layout. You can use display: flexto become an element elastic layout.
.container { display: flex; }
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
Direct child element of the container becomes elastic term (flex item), and press the rows.
Figure:
7.1 elastic box axis (axes)
In the above example, we will say is arranged starting from the starting position within the elastic line item, rather than that they are left-aligned. These elements are arranged in a row because the default flex-directionvalue row, rowrepresenting the language of the text orientation. Since the environment we work in is English (Chinese, too) a language from left to right, starting position is on the left side of the line, so our elastic term is from the left. Therefore flex-directionthe value is defined as the resilient cartridge spindle (main axis).
Cross-axis (cross axis) is perpendicular to an axis of the spindle. If you flex-directionare rowand the term elastic is arranged in a row direction inside, it is cross-axis alignment direction of the block-level elements. If flex-directionyes columnthen the item will elastomeric block elements arranged in the direction of arrangement, and then cross-axis will become row.
If you are accustomed to from the perspective of the cross-axis spindle to use elastic box, then everything will become very simple.
7.2. Direction and order
Elastic box model allows us to by flex-directionsetting properties row-reverseor column-reversechange the direction of the main shaft elastic term value.
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
body { padding: 20px; font: 1em Helvetica Neue, Helvetica, Arial, sans-serif; } * {box-sizing: border-box;} p { margin: 0 0 1em 0; } .container { width: 500px; border: 5px solid rgb(111,41,97); border-radius: .5em; padding: 10px; display: flex; flex-direction: row-reverse; } .item { width: 100px; height: 100px; padding: 10px; background-color: rgba(111,41,97,.3); border: 2px solid rgba(111,41,97,.5); }
7.3. Some Flex properties
These properties are used to control the flex elastically entry space on the spindle. The three properties are:
- flex-grow
- flex-shrink
- flex-basis
You can usually use their shorthand: flex. The first value represents flex-growthe second is flex-shrink, while the third is flex-basis.
.item { flex: 1 1 200px; }
flex-basisEntry will be an elastic tension and compression are not provided at the initial size. In the example above, the size is 200px, so we will give space to each item of 200px. But the size of the container element in most cases will not just be divided into a number of items 200px size, but there may be some deficiencies or free space. flex-growAnd flow-shrinkproperty allows us to control the size of each item in the elastic container size is less than or spare.
If the flex-growvalue is an arbitrary positive number, then the entry will be allowed to elastically stretch to occupy more space. Thus, in the above example, when the 200px is set, all of the extra space can be filled and bisecting each elastic item.
If the flex-shrinkvalue is an arbitrary positive number, then when the elastic item is set up flex-basis, the element will shrink when the overflow container. In the case of the above CSS, if the container space is insufficient, the proportion of each item will wait for elastic scaling to accommodate the size of the container.
flex-growAnd flex-shrinkvalue can be any positive number. Having a greater flex-growelasticity value items are stretched at a larger scale container has free space; and having a larger flex-shrinkkey value will be in the container is insufficient space is compressed more.
1 <div class="container"> 2 <div class="item">1</div> 3 <div class="item">2</div> 4 <div class="item">3</div> 5 </div>
1 body { 2 padding: 20px; 3 font: 1em Helvetica Neue, Helvetica, Arial, sans-serif; 4 } 5 6 * {box-sizing: border-box;} 7 8 p { 9 margin: 0 0 1em 0; 10 } 11 12 .container { 13 width: 500px; 14 border: 5px solid rgb(111,41,97); 15 border-radius: .5em; 16 padding: 10px; 17 display: flex; 18 } 19 20 .item { 21 flex: 1 1 0; 22 width: 100px; 23 height: 100px; 24 padding: 10px; 25 background-color: rgba(111,41,97,.3); 26 border: 2px solid rgba(111,41,97,.5); 27 } 28 29 .container :first-child { 30 flex: 2 1 0; 31 }
8. grid layout (grid layout)
CSS layout grid (grid layout) is a technique used for two-dimensional layout. Two-dimensional (two-dimesional) means that you want in rows and columns arranged your content. And a box-like elasticity, grid layout also set a displayvalue. You can set the container elements display: grid, and the use grid-template-columnsand grid-template-rowsproperties to control the grid of rows and columns.
.container { display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 200px 200px; }
This will create a CSS above the ranks of the element size fixed grid. But this is perhaps not what you want. The default value auto, you may think that this represents a "Let the grid as large as possible." If you do not each (row track) of the size specified row, all rows add in content size will be set auto. A common model is developed for the grid column width, but allows the grid lines added on demand.
Percentage or you can use any unit of length set of rows and columns, and you can use the new unit created for the grid system - fr. frIt is a flexible unit, which can be specified within the grid space is how to divide the container.
For you will mesh with the calculated spatial distribution, you do not need to calculate the percentage of the element to adapt to the size of the container. In the following example, we use frto create a grid of columns, which makes the column of the grid may be adaptively. We also used grid-gapto ensure the inter-element spacing (about elements within the grid with spacing in the "Alignment" in this section for details).
<div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5<br>has more content.</div> </div>
body { padding: 20px; font: 1em Helvetica Neue, Helvetica, Arial, sans-serif; } * {box-sizing: border-box;} p { margin: 0 0 1em 0; } .container { width: 500px; border: 5px solid rgb(111,41,97); border-radius: .5em; padding: 10px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } .container > div { padding: 10px; background-color: rgba(111,41,97,.3); border: 2px solid rgba(111,41,97,.5); }
