標籤：空間 文檔 位移量 樣式 charset oat css 位置 方法
文檔流指語言文本從左至右，從上到下顯示，這是傳統HTML文檔的文本布局。
定位(position)中的absolute,relative,fixed;浮動（float）的float:left/right。
四種方式：
預設static：沒有定位；
相對定位（relative）：相對於原始位置進行定位；常用於布局，讓子項目有參考對象。
絕對位置（absolute）：該方法令元素不再佔有自己原有位置，完全脫離文檔流。
fixed：產生絕對位置的元素，常用於廣告彈窗等。
absolute, relative, fixed 位移的參考點分別是什麼absolute相對於父容器的位移量；
relative相對於原有位置的位移量；
fixed相對於瀏覽器視窗進行定位。
用來控制層疊元素的顯示優先順序，值越大優先順序越高。
position:relative和負margin都可以使元素位置發生位移?二者有什麼區別position：relative會讓元素脫離文檔流，且沒有改變自身佔據的空間大小；
負margin沒有脫離文檔流，會改變自身佔用空間大小。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>boxcenter</title> 6 <style type="text/css" media="screen"> 7 .ct{ 8 border: none; 9 position: relative;10 width: 500px;11 height: 500px;12 line-height: 500px;13 background-color: #ccc;14 color: #000;15 }16 .box{17 border: none;18 position: absolute;19 top: 50%;20 left: 50%;21 margin-left: -50px;22 margin-top: -50px;23 color: #fff;24 background-color: red;25 width: 100px;26 height: 100px;27 line-height: 50px;28 text-align: center;29 }30 </style>31 </head>32 <body>33 <div class="ct">34 <div class="box">box</div>35 </div>36 37 </body>38 </html>
特徵：
影響：
1.浮動元素：能感知浮動元素的存在，碰到其他浮動元素的邊框時會停止。
2.普通元素:區塊層級元素無法感知浮動元素的存在，會佔據其空間；行內元素不會佔據浮動元素空間。
3.文字：文字會被浮動元素擠開，環繞浮動元素排布。
清除浮動是指為元素設定其左右能否有浮動元素。
清除浮動：
1.為被浮動元素遮擋的元素添加clear:both/left/right
2.為浮動元素的父元素添加overflow:hidden
3.在最後一個浮動元素的後面添加一個元素並加入clear:both樣式。
CSS浮動、定位
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
