CSS3筆記012 - 第12章 浮動佈局與定位佈局
阿新 • • 發佈：2020-09-04
第12章 浮動佈局與定位佈局
浮動佈局
文件流簡介
文件流：就是指元素在頁面中出現的先後順序；
正常文件流：將一個頁面從上到下分為一行一行的，其中塊元素獨佔一行，相鄰行內元素在每一行中按照從左到右排列直到該行排滿；
脫離文件流：指脫離正常文件流。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div></div> <span></span><span></span> <p></p> <span></span><i></i> <img /> <hr /> </body> </html> 正常文件流：由於div、p、hr都是塊元素，因此獨佔一行。而span、i、img都是行內元素，因此如果兩個行內元素相鄰，就會位於同一行，並且從左到右排列。
浮動
float:left|right;
left|right元素向左|向右浮動
浮動，可以使得元素移到左邊或者右邊，並且允許後面的文字或環繞著它。常用於實現水平方向上的並排佈局，例如兩列布局、多列布局。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #father { width: 300px; background-color: #0C6A9D; border:1px solid silver; } #father div { padding:10px; margin:15px; } #son1 { background-color: hotpink; float: left; } #son2 { background-color: #FCD568; /* float: right; */ } </style> </head> <body> <div id="father"> <div id="son1">box1</div> <div id="son2">box2</div> </div> </body> </html>
清除浮動
clear:left|rigth|both;
left|rigth|both:清除左浮動|清除右浮動|同時清除左浮動和右浮動
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #father { width: 300px; background-color: #0C6A9D; border:1px solid silver; } #father div { padding:10px; margin:15px; } #son1 { background-color: hotpink; float: left; /*左浮動*/ } #son2 { background-color: #FCD568; float: right; /*右浮動*/ } .clear{clear:both;} </style> </head> <body> <div id="father"> <div id="son1">box1</div> <div id="son2">box2</div> <div class="clear"></div> </div> </body> </html>
定位佈局
定位佈局簡介
四種方式：固定定位fixed、相對定位relative、絕對定位absolute、靜態定位static
固定定位
position:fixed;
top:px;
bottom:px;
left:px;
right:px;
相對定位
position:relative;
top:px;
bottom:px;
left:px;
right:px;
預設情況下，固定定位元素的位置是相對瀏覽器而言，而相對定位元素的位置是相對於原始位置而言！
絕對定位
position:absolute;
top:px;
bottom:px;
left:px;
right:px;
靜態定位
position:static;
top:px;
bottom:px;
left:px;
right:px;