layout
1. The core concept of positioning elements
Block-level elements: new line display, for example, <h1>, <p>, <ul>, <li>
Inline elements: text flow around between, for example: <img>, <b>, <i>
Building blocks: CSS out using sunspots each HTML element model, the box can be a "block level" box, it may be a "inline" box. Block-level box separate row, and which in the layout like body building blocks; the inline text box is floating between therearound. You can control the control they occupy by setting the width of each box. To separate the different boxes, you can use borders, margins, padding, and background colors.
Element comprising: if a block element is located inside the other block elements, then this becomes a frame comprising outer elements or parent element. It is typically concentrated in a plurality of elements <div> element (or other block element) in the. For example, you may have all the elements of the site header location together, and this group contains elements <div> element is called contain elements. A box may be nested within other plurality of block elements, the elements but contains only its direct parent element.
2. The position of control element
CSS contains the following three positioning mechanism for controlling the page layout: Normal stream, relative and absolute positioning. It shows the positioning mechanism by the position property in CSS. You can also use the float property to allow floating elements.
Normal stream: block-level elements each shown with a line, so that each page is displayed below the previous item a project. Even if you specify the width of the box, and there is also enough space for two elements side by side, they do not appear together, which is the default behavior of the browser.
Relative positioning: the relative positioning element is moved from a position in which it is located on the normal stream, up, down, left, right movement in his original position. This movement does not affect the position of surrounding elements, they are also positioned in the normal stream location.
Absolute positioning: absolute position of the positioning elements relative to his contain elements. It is completely out of the ordinary flow, that will not affect the position of any element around (like a direct ignored space it occupies). Use absolute positioning of elements with the scroll moves.
In order to determine a location of the box, the box may have to use the box with the displacement of property, down, left, and right away tells the browser.
Fixed Location: fixedly positioned so that absolute positioning of a form, which contains elements positioned with respect to different, it is the browser window element to be positioned. Fixed positioned elements will not affect the position of surrounding elements, and when the page scrolls up and down, he does not move.
Float: Floating element can be let out of a normal stream, and to the position at which the cassette containing the leftmost or rightmost. This will become a floating element can float around the block-level elements other content.
When any element disengaged from the normal stream, the box will overlap. Z-index attribute may be used to control which displays in the upper cassette.
3. The general flow position: static
In the normal stream, each block-level elements over a spent element. Since this is the default browser handles HTML elements, so you do not use CSS attribute indicates that the element should appear in the general stream, but still there is a corresponding syntax: position: static;
<head> <title>static</title> <link rel="stylesheet" href="test01.css"> </head> <body> <h1>The Evolution of the Bicycle</h1> <p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster .... </p> </body>
body{ width: 750px; font-family: Arial,Verdana, sans-serif; color: #665544; } h1{ background-color: #efefef; padding: 10px; } p{ width: 450px; }
Width property title element in the case of violation of established, you can see his width extends to the browser window. The width of the passages is limited to 450 pixels, although these elements are not covered the entire browser window, but they are still in a separate row in the normal stream.
4. The relative positioning of the position: relative
Relative positioning of the element in its normal position in which the flow moves as the starting point. For example, an element can be moved from its normal position in which the downward flow of 10 pixels, or 20% of the distance moved rightward. Is relative, you can specify the elements positioned opposite a position property by the element. Then use the unique property (Top or bottom or left and right) specifies the number of elements to be moved away from its normal position in the stream. Displacement box attribute value is normally set to the pixel value, or a percentage value em.
<body> <h1>The Ecolution of the Bicycle</h1> <p class="example">In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster... </p>
p.example{ position: relative; top: 10px; left: 100px; background-color: red; }
5. Absolute positioning position: absolute
If the position attribute value of a box is absolute, then he will flow out of the ordinary, no longer affects the position of other page elements. The only attribute box for specifying the element to its containing element should be displayed in what positions.
<body> <h1>The Evolution of the Bicycle</h1> <p> In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster... </p> </body>
h1{ position: absolute; top: 0px; left: 500px; width: 250px; } p{ width: 450px; }
6. The fixed positioning position: fixed
A type of fixed positioning is absolute positioning, the position property is set it means fixedly positioned fixed. Positioning means fixed with respect to the element to locate the browser window. Thus, when the user scrolls the page, the position of these elements remains unchanged. To use the control box fixedly positioned relative to the browser window, you need to use the displacement properties of the box.
<body> <h1>The Evolution of the Bicycle</h1> <p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster...</p> </body>
h1{ position: fixed; top: 0px; left: 0px; padding: 10px; margin: 0px; width: 100%; background-color: #efefef; } p{ margin-top: 100px; }
7. overlapping element z-index
When you are using relative positioning, fixing or positioning absolute positioning, the box can overlap. If the boxes overlap, then another HTML code elements appearing after the page element located on the upper line appears. To control the level of elements, z-index property may be used. The property value is a number, the larger the value, the level of the front element.
8. The float floating element
ni float attribute allows the normal stream are arranged in an element to the left or to the right as much as possible within its containing element. Located contain other content elements may flow around the floating element. Using the float property at the same time, you should also use the width attribute specifies the width of the float, otherwise, it will display inconsistent, floating boxes may be covered the entire width of the containing element.
<body> <h1>The Evolution of the Bicycle</h1> <blockquote>"Life is like riding a Bicycle. To keep your balance you must keep moving"--Albert Einstein</blockquote> <p>In 1817 Baron von Drais invented a ...</p> </body>
blockquote{ float: right; width: 275px; font-size: 130%; font-style: italic; font-family: Georgia, Times, serif; margin: 0px 0px 10px 10px; padding: 10px; border-top: 1px solid #665544; border-bottom: 1px solid #665544; }
9. The use of floating elements arranged side by side
Many layouts are boxes side by side together. Typically these use the float property complete layout. When the floating elements, the height of the box will have a corresponding effect on the position of the rear element. To solve this problem, we need to use the clear property.
10. Clear float clear
attribute is used to indicate a clear left or right side of the box allowed the floating element (the element comprising the same). The property can be chosen with the following values:
left: in contact with the left side of the box can not contain any other elements of the same element.
right: the right side of the box can not contact with any other element comprising the same elements.
both: the left and right sides of the box can not contact with any other element comprising the same elements.
none: you may contact both sides of the box element.
11. The use of floating to create a multi-column layout
Many web pages are multi-column design. Each column of this design are used a <div> element represents. The following three attributes for a plurality of columns side by side together.
width: This attribute is used to set the column width.
float: This attribute plurality of columns side by side.
margin: This attribute is used to create a gap between the columns.
Each <div> element may contain headings, paragraphs, images, and other <div> element.
12. The fixed-width layout example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="test06.css"> <title>Document</title> </head> <body> <div id="header"> <h1>Logo</h1> <div id="nav"> <ul> <li><a href="">Home</a></li> <li><a href="">Products</a></li> <li><a href="">Services</a></li> <li><a href="">About</a></li> <li><a href="">Contact</a></li> </ul> </div> </div> <div id="content"> <div id="feature"> <p>Feature</p> </div> <div class="article column1"> <p>Column One</p> </div> <div class="article column2"> <p>Column Two</p> </div> <div class="article column3"> <p>Column Three</p> </div> </div> <div id="footer"> <p>©Copyright 2019</p> </div> </body> </html>
body{ width: 960px; margin: 0 auto; } #content{ overflow: auto; height: 100%; } #nav,#feature,#footer{ background-color: #efefef; padding: 10px; margin: 10px; text-align: center; } li{ display: inline; padding: 5px; } .column1,.column2,.column3{ background-color: #efefef; width: 300px; float: left; margin: 10px; } p{ text-align: center; } h1{ text-align: center; }
13. The fluid Layout Example
HTML statement above
body{ width: 90%; margin: 0 auto; } #content{ overflow: auto } #nav,#feature,#footer{ margin: 1%; } .column1,.column2,.column3{ width: 31.3%; float: left; margin: 1%; } .column3{ margin-right: 0%; } li{ display: inline; padding: 0.5em; } #nav,#footer{ background-color: #efefef; padding: 0.5em 0; } #feature,.article{ height: 10em; margin-bottom: 1em; background-color: #efefef; } p,h1,#nav{ text-align: center; }