標籤：範圍 position 轉化 標記 ott 滾動 浮動 over back
脫離文檔流<title></title><style type="text/css"> *{ padding: 0; margin: 0; } li{ list-style: none; /*float: left;*/ float: right; /*一直在包含塊最右邊*/ /*脫離文檔流*/ border: 1px solid black; } ul{ border: 1px dashed red; /*觸發BFC(塊級格式下上下文：block formatting context)自動找回*/ overflow: hidden; } /*子級浮動導致父級高度塌陷*/ a{ float: left; } /*行內元素設定浮動自動轉化為區塊層級元素*/ p{ float: left; /*浮動文本類的標記，如果沒有設定寬度，則自動摺疊到最小寬度*/ } .big{ width: 400px; height: 400px; border: 1px solid black } .small{ width: 200px; height: 200px; background: red; float: left; /*子級只在父級內浮動*/ /*不會穿越到內邊距裡*/ } .small_two{ width: 200px; height: 200px; background: blue; } /*浮動會影響別的元素*/ /*如果父級沒有足夠的空間讓子級浮動，子級則自動換行*/</style><ul> <li>11</li> <li>22</li> <li>33</li> <li>44</li></ul><ul> <li>qq</li> <li></li> <li></li> </ul><a href="">行內a</a><p>p標籤</p><div class="big"> <div class="small"> </div> <div class="small_two"> </div></div>
word-break:break all(控制英文單詞不超出範圍)box-sizeing:border-box(改變成IE盒模型)預設字型在不同電腦可能造成換行1.相對定位
positon:relative;left:20px;2.絕對位置:絕對位置的視角位於 瀏覽器的 （0，0） 點（或者是body的 （0，0） 點）
position:absolutetop:10px;left:10px;3.非靜態定位（相對、絕對、固定）：為父級（或者是上上級）設定相對定位，為子級設定絕對位置。 元素會以包含它的（非靜態定位）的 （0，0）點開始移動。
4.浮動和絕對位置脫離文檔流，使行內元素變區塊層級元素。
5.固定定位:
position:fixed;left、right、top:10px;6.靜態定位：預設的屬性
position:static兩個元素重疊時用定位。
BFCBFC（Block Formatting Context） 塊級格式上下文
1.是一個環境，一個隔離的獨立容器，與布局相關，寫了html標籤他就已經是一個BFC，BFC形成後，裡面內容和布局和外面互不干擾。
觸發BFC的條件1.img之間有空隙，可給父級設定font-size：0；
2.為選取器添加：hover 並且添加文字變大的效果，最好給寬高定死。不然會影響下面的元素。
3.選取器 類別選取器 [空格] 偽類別選取器 [空格] 類別選取器
蒙板步驟：
<style type="text/css"> .box1{ width: 600px; height: 400px; position: relative; overflow: hidden; } .box1 img{ width: 600px; height: 400px; } .mb{ width: 600px; height: 100px; outline: 1px solid black; background: rgba(22,333,0,.2); position: absolute; bottom: 0; } .mb:hover{ transition:all linear 2s; 漸層 bottom: -100px; } .mb-right{ width: 100px; height: 400px; outline: 1px solid black; background: rgba(111,999,444,.6); position: absolute; right:0; bottom: 0; } .mb-right:hover { transition:all linear 2s; right:-100px; } 同時動時選擇父容器 .box1:hover .mb{ transition:all linear 2s; bottom: -100px; } .box1:hover .mb-right{ transition:all linear 2s; right:-100px; } </style><body><div class="box1"> 主容器 <img src="images/NBA11.jpg"> 背景圖 <div class="mb">· 蒙板 12312 </div> <div class="mb-right"> 蒙板 </div></div></body> CSS基礎(2)
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
