3rd day: CSS floating, positioning, table, form summary

Today's learning is floating, positioning, forms, forms, and so on, these are the most confusing knowledge of CSS, there are many tips in the process of writing code need to pay attention to. Here are the main points of knowledge:

one, float float
1. Block elements are displayed on one line
2. Inline elements support wide height
3, the default content open width
4. Out-of-document flow
5. Upgrade the level half layer
second, clear clears floating
1. Heightening (poor expansibility)
Set the same height for the parent of the floating element
2, to the parent plus floating (all elements of the page must be floating, margin left and right)
3, Inline-block (margin around auto failure)
4, empty label plus floating (DIV) (any place to use to add)
. Clearfix{clear:both;} (IE6 minimum Height 19px, 2px deviation after resolution)
5. BR Clear floating (does not conform to the work structure, style, behavior, three separate requirements)
<BR clear= "All"/>
6.After clear float(now the Mainstream method)
. clearfix{
*zoom:1;}
. clearfix:after{
content: "";
Display:block;
Clear:both;
}
Just add Clearfix to the parent of the floating element and you can.

7, Overflow:hidden; clear float (add to floating element parent)
Required with width, zoom compatible IE6, IE7
Scroll (scroll bar)
Overflow:hidden/scroll/auto
Third, the browser

BFC (Standard browser)
1, the value of float is not none
2, the value of overflow is not visible
3, the value of display is any one of the Table-cell,table-caption,inline-block
4, the value of position is not relation and static
Width/height/min-width/min-height: (!auto)

Haslayout (IE browser)
1, WRITING-MODE:TB-RL
2,-MS-WRITING-MODE:TB-RL
3, Zoom: (!normal)

Iv. positioning of position
Relative positioning (relative)
1, does not affect the characteristics of the element itself
2. Do not leave the element out of the document Stream (the original position is retained after the element is moved)
3, if there is no positioning offset, the element itself has no effect
4. Promotion level
Absolute Positioning (absolute)
1. Completely detach the element from the document flow
2, so that the embedded support wide high
3. Block attribute content Open width
4, if there is a positional parent offset from the anchor parent, there is no positioning parent offset relative to document
5, relative positioning is generally used in conjunction with absolute positioning elements
6. Promotion level
In general, the parent is relatively positioned, and the child is absolutely positioned.

Fixed positioning
1. Fixed lower right corner
position:fixed;
right:0;
bottom:0;
Basically consistent with absolute positioning characteristics. Always positioned relative to the entire document; IE6 does not support fixed positioning.
Locating other values
Static (default value)
Inherit (the value of the positional property is inherited from the parent element) (incompatible)
Position:relative|absolute|fixed|static|inherit

V. Mask Transparency
opacity: (0~1); Transparency parameters from 0 to 1 (Standard browser)
The parent adds transparency, and the child inherits the transparency;
IE Filter:filter:alpha (opacity=0~100); (IE6, IE7 browser transparency settings)

Z-index Positioning hierarchy
By default the latter value is higher than the former

Vi. Forms (table)
Thead (header), tbody (table body), TR (table row), th (element definition header), TD (element Definition table cell)
Table Style Reset
Table{border-collapse:collapse;} Cell Gap Merging
th,td{padding:0} reset cell default padding
Add border= "1" to table, cell and border
Merge cells
Colspan= "2" (Cross-column)
Rowspan= "2" (Cross Line)

Vii. Form Form

<form action= "" >
<input type= "..." name= "" value= ""/>
Text literal
Password Password
Radio Radio (radio button name must be the same)
CheckBox Check
Submit Submission
Reset resets
Button buttons
Image Image <input type= "image"/>
File upload <input type= "file"/>
Hidden hidden <input type= "hidden"/> Do not let users see, need to store
Button buttons

Finally, I did a little practice of positioning:

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> positioning </title>
<style>
*{
margin:0;
padding:0;
}
. div1{
width:200px;
height:200px;
background:red;
Position:absolute;
left:200px;
}
. div2{
width:200px;
height:200px;
Background:yellow;
Position:absolute;
top:200px;


}
. div3{
width:200px;
height:200px;
Background:blue;
Position:absolute;
top:400px;
left:200px;

}
. div4{
width:200px;
height:200px;
/*background:red;*/
position:relative;
top:206px;
left:406px;

}
. content{
width:200px;
height:200px;
Background:green;
Position:absolute;
Top: -6px;
Left: -6px;
Z-index:2;
}
. mask{
width:200px;
height:200px;
Background: #ccc;
opacity:0.6;
Position:absolute;
top:6px;
left:6px;
Z-index:1;

}
</style>
<body>
<div class= "Div1" >div1</div>
<div class= "Div2" >div2</div>
<div class= "Div3" >div3</div>
<div class= "Div4" >
<div class= "Content" ></div>
<div class= "Mask" ></div>
</div>
</body>

Operating effect:

3rd day: CSS floating, positioning, table, form summary