Before learning a variety of layout we first to understand each key word, understand these keywords, and then from point to surface, so much simpler.
The display properties
Each element on the page has a default display attribute whose value depends on the type of the element. The default is usually block (the element appears as a block element) or inline (the element appears as an inline element). Also, a value of None means that the element is hidden, but it is not the same as the visibility property. Setting display to None will not take up the space it should display, but set it to visibility: hidden; It takes up space. In addition to the above three values, the display attribute also has the following values:
Value description None This element will not be displayed. Block This element is displayed as a block-level element, preceded by a newline character. The inline default. This element is displayed as an inline element, with no newlines around it. Inline-block Inline block element. (CSS2.1 new value) list-item This element is displayed as a list. Run-in This element is displayed as a block-level or inline element, depending on the context. The table element is displayed as a block-level table (similar to
| ) inherit specifies that the display property value should be inherited from the parent element. |
|---|
Block-level elements and inline elements
We need to know:
Block-level elements occupy a single row, and their width automatically fills the width of their parent element. The default value is auto.
Elements in a row do not occupy a single row. Adjacent elements are arranged in the same row until the row is full, and the width varies with the content of the element.
Block level elements can set width, height attributes, row elements set width, height is not valid.
Margin and padding can be set for block-level elements. For inline elements, only horizontal margins can be set. (padding-left,padding-right,margin-left,margin-right), but vertical margins don’t work. (padding – top, padding – bottom margin – top, margin – bottom). The horizontal direction is valid, the vertical direction is invalid. Finally, you can switch between inline and block-level elements by modifying the display attribute of the element. Most importantly, when the display attribute value is inline-block, the element has the characteristics of both block-level elements and inline elements: you can set the length, width and margins, and display them side by side like inline elements.
Common block elements are: div, P, ul, OL, li, H1 ~ H6, header, footer, aside, form, etc.
Common inline elements include a, SPAN, strong, input, img, and em.
Margin properties
You can center block-level elements horizontally with a left and right margin of auto when the width is set. Because the element takes up the specified width, it splits the remaining width into left and right margins.
The box – sizing properties
The new box-sizing attribute has three values:
Content-box: Indicates that the padding and border are not included in the defined width and height, that is, draw the inside margin and border of the element beyond the width and height. The default value.
Border-box: indicates that the padding and border are included in the width and height of the definition. The inner margins and borders of this element no longer increase its width. (Border-box is essentially a box Model in IE Quirk Mode.)
Inherit: represents the value of the box-sizing property inherited from the parent element.
calc()
Calc () is explained in MDN like this:
The CSS function calc() can be used anywhere where
,< frequency>,< Angle >,< time>,< number>, or < INTEGER > is required. With calc(), you can calculate the value of a CSS property. You can also nest another calc() inside a calc(), whose calc() is simply treated as parenthesized.
Calc, short for Calculate, is a new feature in CSS3. Used to set dynamic values for elements such as border, margin, pading, font-size, and width. We can use addition, subtraction, multiplication and division to compute different units. For example, we can subtract the em value from the percentage:
The demo {width: calc 100% 1.5 (em); }// The minus sign must be preceded by SpacesCopy the code
Position attribute
The position attribute of the element allows us to take the following four positions:
Static: the default value. The elements are arranged in the default document flow.
1. Relative: position relative to its own normal position by top, right, bottom, left. The space it used to occupy remains, and other elements will not be filled in.
Absolute: Absolute location. The object will deviate from the document flow and the existing space will be deleted. It refers to the nearest positioned element (position is not static). The ancestor element, if not, is positioned as the body element.
Fixed: Fixed position, also out of the document flow, relative to the window position.
When you define a CSS with position values as absolute, relative, or fixed, use z-index to change the stack order of elements.
Float attribute
The float property was originally used to wrap text around an image, and any element in CSS can float. The floating element generates a block-level box, regardless of what element it is. If you float non-replacement elements, specify an explicit width; Otherwise, they are as narrow as possible. The value can be left, right, or None. Floating elements will leave the document flow.
The clear property is used to clear floats. The clear property can be left, right, both, or None. Also remember that floating elements always contain non-floating elements. Applying overflow: Hidden to the parent element can also clear floats, and you can also use the pseudo-class :after method on the parent element.
Here are some common layouts:
1, there are two divs, two left and right are spread all over the page, the left div is fixed width, the right div is self-scalable according to the browser size.
The idea is to float the first column to the left using the float property. Set the left margin of the second column to the width of the first column. The code is as follows:
<div id="wrapper">
<div class="left">left</div>
<div class="right">right</div>
</div>
<style>
.left{width:100px;border:1px solid red;height:80px;float:left}
.right{border:1px solid blue;height:80px;margin-left:100px; }Copy the code
2, simple three-column layout, using floating, set the width can:
.left{width:150px; border:1px solid red; height:80px; float:left} .middle{width:100px; border:1px solid blue; height:80px; float:left} .right{width:125px; border:1px solid; height:80px; float:left; }Copy the code
3. Nine squares
html:
<div id="container">
<div class="row1">
<div>1</div>
<div>1</div>
<div>1</div>
</div>
<div class="row2">
<div>2</div>
<div>2</div>
<div>2</div>
</div>
<div class="row3">
<div>3</div>
<div>3</div>
<div>3</div>
</div>
</div>css: #container{width:960px; height:600px; margin:100px auto; } #container .row1{height:200px; width:100%; border:1px solid red; box-sizing:border-box} #container .row1 div{float:left; Width: 33.33%; height:100%; border:1px solid; box-sizing:border-box} #container .row2{height:200px; width:100%; border:1px solid green; box-sizing:border-box} #container .row2 div{float:left; Width: 33.33%; height:100%; border:1px solid; box-sizing:border-box} #container .row3{height:200px; width:100%; border:1px solid blue; box-sizing:border-box} #container .row3 div{float:left; Width: 33.33%; height:100%; border:1px solid; box-sizing:border-box}Copy the code
4. Fixed width on both sides and self-adaptation in the middle column
Table layout:
<div id="container">
<div class="left">On the left side of the fixed width</div>
<div class="middle">The middle column is adaptive</div>
<div class="right">On the right side of fixed width</div>
</div>
<style>
#container{width:500px;height:200px; border:1px solid red;display:table;table-layout:fixed}.left..middle..right{display:table-cell;height:200px; }#container .left {width:100px;border:1pxsolid; }#container .middle{border:1px solid;width:100%}#container .right{ width:100px;border:1px solid}
</style>
Copy the code