CSS layout is the div tag on the page html + css collectively by the style sheet code development made (html) pages.
CSS float property
float float property for setting label objects (such as: div, span, a, em html tags, etc.) floating layout, is what we call floating label objects floating Left Left (float: left) and float right of abode right (float: right).
float effect: Let css div style defined by the block layer float (float), left or right (on) float.
Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
Left float setting module:
.box {float:left;}
Syntax float: float: none | left | right | inherit, are the object does not float, float left, float right, inherited from the parent element.
CSS clear property
clear attributes specify which element prevents the other side floating elements.
clear attribute defines the floating elements are not allowed on which side elements. In CSS1 and CSS2, which is increased by automatically clearing the outside elements (i.e. elements provided clear property) from the implementation. In CSS2.1, the above margins will increase to clear space on the element, and the outer margins of itself does not change. No matter what kind of change, the end result is the same, if declared to the left or right to clear, make elements on the outer border of the border just outside elements floating at the edge away from under the border.
Left and right images are not allowed float:
img{
float:left;
clear:both;
}
clear Syntax: clear: none | left | right | both. Corresponds to the parameter value: both sides can allow floating objects, floating objects are not allowed on the left, the right floating objects is not allowed, not allowed floating object
We often use float css for pattern generation after floating, the most common is to use clear: both clear float. For example, a large object has two small objects using css float style in order to avoid floating, large objects background or borders are not displayed correctly, this time we need to clear: both clear float.
CSS overflow property
overflow property specifies what happens when the contents of an overflow occurring element's box.
How about this attribute defines overflow element's content area will be processed. If the value scroll, regardless of whether the user agent will provide a scrolling mechanism. Therefore, it is possible even if you can put aside all the content elements box will appear scroll bar.
Set the overflow property:
div{
width:150px;
height:150px;
overflow:scroll;
}
overflow语法：overflow : visible | auto | hidden | scroll
visible: no content nor shear add scroll bars. If this default value is declared explicitly, it is cut to the size of the object containing the object window or frame. And clip property will fail
auto: This is the default value and the textarea body object. If necessary cut content and add a scroll bar, DIV is also the default value, but you need to set the time set to
hidden: the object does not display the content exceeds the size of the
scroll: always show scrollbars
overflow may be provided X (separate overflow-X ) and the Y ( overflow-Y scrollbar) and the direction of the style value grammatical usage of applications and overflow the same structure
div{
width:150px;
height:150px;
overflow-x:hidden;
}
CSS display property
display elements of attribute type box should generate rules.
This property is used to define the type of display frame generated when creating the layout element. For HTML and other document types, if not careful display will be very dangerous, because it may violate display hierarchy already defined in HTML. For XML, because the XML has no built in this hierarchy, all the display is absolutely necessary.
Health travel so that the inner frame paragraphs:
p.inline{
display:inline;
}
语法：
display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
Parameters:
Block: Default object block CSS1. After adding a new row with the value of the object
none: CSS1 hidden objects. With hidden attribute value different visibility, it is not hidden objects retain their physical space
inline: CSS1 default values associated object. This value is deleted from the row with the object
compact: CSS2 assignment blocks or objects based on the contents of inline objects
marker: CSS2 specified content container object before or after. To use this parameter, the object must: after and: use before pseudo-element with
inline-table: CSS2 The table shows the behavior no longitudinal transducer inline object or the associated container
list-item: CSS1 block object as a list of items. Add optional item flag and
run-in: CSS2 assignment blocks or objects based on the contents of inline objects
table: CSS2 object table block element as its display
table-caption: CSS2 title displayed as a table object
table -cell: CSS2 display the object table cell as
table-column: CSS2 table column shows the object as
table-column-group: CSS2 object displayed as a table column group
table-header-group: CSS2 object title set as a table display
table-footer-group: CSS2 display the object as footnotes group
table-row: CSS2 object displayed as a table row
table-row-group: CSS2 object displayed as a table row groups
CSS visibility property
visibility attribute specifies the element is visible. (Even if not visible elements will occupy space on the page. Please use the "display" property to create invisible elements do not occupy the space of the page.)
This attribute specifies whether a frame of display elements generated element. This means that the element still occupies its original space, but can be completely invisible. Collapse values for deleting rows or columns from a table in the table layout.
Set h2 element invisible:
p.inline{
visibility:hidden;
}
语法：
visibility : inherit | visible | collapse | hidden
Parameters:
the inherit: inherit visibility on a parent object
visible: visual objects
hidden: Hidden Object
collapse: mainly used to hide table rows or columns. Hidden rows or columns can be used by other content. For other objects outside the table, and it is equivalent to a hidden. IE5.5 does not yet support this property.
Examples
The following give a simple example of page layout div + css
html code follows
<! DOCTYPE HTML>
<HTML>
<head>
<Meta HTTP-equiv = "Content-Type" Content = "text / HTML; charset = GB2312" />
<title> Home </ title>
</ head>
<body>
<div ID = "Container">
<div ID = "header"> content displayed here id "header" of </ div>
<div ID = "NAV"> content displayed here id "nav" the </ div>
<div ID = "MainContent clearfix">
<div ID = "main"> content displayed here id "main" of </ div>
<div ID = "Side"> content displayed here id "side" of </ div >
</ div>
<div ID = "footer"> content displayed here id "footer" the </ div>
</ div>
</body>
</html>
css code is as follows:
.clearfix: After {Content: ""; height: 0; visibility: hidden; the display: Block;
Clear: both;}
.clearfix {Zoom:. 1;}
/ * * body /
#container {width: 900px; margin: 0 Auto;}
/ * header * /
#header {height: 70px; background: #CCFFCC; margin-bottom: 8px;}
#nav {height: 30px; background: #CCFFCC; margin-bottom: 8px;}
/ * * main /
#mainContent {margin-bottom: 8px;}
#main {a float: left; width: 664px; height: 500px; background: # FFFF99;}
#side {a float: right; width: 228px; height: 500px; background: # FFCC99;}
/ * footer * /
#footer {height: 70px; background: #CCFFCC;} a new front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot learning materials, welcomed the zero-based junior partner to the exchange.
Page effect is as follows
