標籤：back 位置 設定 html5 gre epp 動效 現象 log
1.區塊層級元素：<div>,<p>,<h>,<hr>等標籤
總是從新的一行開始
高度，行高，內邊距，外邊距都是可以控制的
2.行級元素：<span>,<a>,<img>,<input>
和其他的元素在同一行
高度，行高，內邊距，外邊距都是不可以改變的
3.display的屬性值：none, block, inline, table ,inline-block
4.visibility的屬性值：visible，hidden，collapse
5.display="none" 與visivility="hidden"的區別：
前者不佔用頁面空間，後者是要佔用頁面空間的
6.定位position的屬性：相關屬性top ,bottom,left,right 常用屬性值aotu
7. z-index的屬性：值越大，可表示顯示的內容的位置越高
8.overfolow的屬性：當元素的內容溢出地區的時發生的事情設定
屬性值：hidden , visible, scroll,auto
9.網頁布局分為：自然布局，浮動布局， 定位布局
10.當一個元素被定義為浮動顯示時，即定義為塊狀元素。並且該元素就會收縮自身體積為最小狀態。所以，應該有個好的習慣即把浮動元素設定高和寬。如果沒有設定，則元素會按照它所包含的內容大小來確定它的大小。
11.當元素浮動後，周邊的對象會自動環繞浮動元素周圍，形成一種環繞關係。
12.塊狀元素之間的外邊距會有重疊現象，但是浮動元素之間的外邊距不會發聲重疊現象。
13.浮動元素移動，上移：margin-top:-**; 下移：margin-botom:-*px,其他以此類推。
14.一般定位元素（絕對或是相對元素）都會覆蓋在文檔流對象之上。但是，select元素的視窗控制項還不完全支援z-index
15.在css定位布局中，一般遵循“外部相對定位，內部絕對位置”
16.在body中設定min-width:760px,可以避免布局重疊現象。
17.浮動的元素會脫離普通流，是下一個元素會被覆蓋，
注意：當下一個元素被覆蓋的時候，應用使用clear屬性，來清空浮動效果，查看到布局效果
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>浮動布局</title> <style type="text/css"> body{ margin: 0 auto;width: 1000px;align-content: center;} #div-1{width: 1000px; height: 30px;background-color: slateblue;margin: 3px auto;} #div-2{width: 1000px;height: 40px;background-color: forestgreen;margin: 1px auto;} #div-3{width: 590px;height: 400px;background-color: darkgoldenrod;float: left;margin: 3px auto5;} #div-4{width: 400px;height: 400px;background-color: darkmagenta; float: right;} #div-5{width: 1000px;height: 40px;background-color: deeppink;clear: both;} </style> </head> <body> <div id="div-1"></div> <div id="div-2"></div> <div id="div-3"></div> <div id="div-4"></div> <div id="div-5"></div> </body></html>
HTML5布局總結篇
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
