--- tags: CSS,第三章 --- # CSS第三章 ## 布局統整 ### 標準流 塊級元素，垂直布局 行內與行內塊，水平布局 ### 浮動 讓塊級元素變水平布局 ### 定位 讓元素擺在網頁任意位置 一般用於盒子層疊 ## 定位介紹 屬性名:position | 定位方式 | 屬性值 | |:--------:|:--------:| | 靜態定位 | static | | 相對定位 | relative | | 絕對定位 | absolute | | 固定定位 | fixed | 設置偏移值 有2個方向，水平和垂直各選一個即可 可以是負值 ## 相對定位 1.佔有原來位置，不脫標 2.仍具有標籤原來的顯示模式 3.改變位置參照自己原先位置 左邊:最終結果往左X像素能回到原本位置(實際往右移動) 上面:最終結果往上X像素能回到原本位置(實際往下移動) ``` <style> .box { position: relative; left: 100px; top: 200px; width: 200px; height: 200px; background-color: pink; } </style> ``` ``` <body> <div class="box">box</div> </body> ``` 四種都有的情況 ``` <style> .box { position: relative; left: 100px; /*生效*/ top: 200px; /*生效*/ right: 300px; /*不生效*/ bottom: 400px; /*不生效*/ width: 200px; height: 200px; background-color: pink; } </style> ``` ``` <style> .box { position: relative; right: 300px; /*不生效*/ bottom: 400px; /*不生效*/ left: 100px; /*生效*/ top: 200px; /*生效*/ width: 200px; height: 200px; background-color: pink; } </style> ``` ## 絕對定位 1.先找已經定位的父級，再以父級為參照定位 2.有父級，但父級無定位，以瀏覽器為參照定位 3.脫標不占位 4.顯示模式類似行內塊 ``` <style> .box { position: absolute; left: 100px; top: 200px; width: 200px; height: 200px; background-color: pink; } </style> ``` ``` <body> <div class="box">box</div> </body> ``` ## 子絕父相 ```css= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father{ width: 400px; height: 400px; background-color: pink; } .son{ position: relative; left: 150px; width: 300px; height: 300px; background-color: skyblue; } .baby{ position: absolute; right: 20px; bottom: 50px; width: 200px; height: 200px; background-color: green; } </style> </head> <body> <div class="father"> <div class="son"> <div class="baby"></div> </div> </div> </body> </html> ``` ## 定位居中 margin: 0 auto失效 ``` <style> .box { position: absolute; /* margin: 0 auto; */ /* 左邊的邊長居中 */ left: 50%; /* width的一半修正 */ margin-left: -150px; /* 上邊的邊長居中 */ top: 50%; /* height的一半修正 */ margin-top: -150px; width: 300px; height: 300px; background-color: pink; } </style> ``` ``` <body> <div class="box">box</div> </body> ``` 進階寫法 不使用margin-left 不使用margin-top ``` <style> .box { position: absolute; /* margin: 0 auto; */ /* 左邊的邊長居中 */ left: 50%; /* width的一半修正 */ /* margin-left: -150px; */ /* 上邊的邊長居中 */ top: 50%; /* height的一半修正 */ /* margin-top: -150px; */ transform: translate(-50%, -50%); width: 300px; height: 300px; background-color: pink; } </style> ``` ``` <body> <div class="box">box</div> </body> ``` ## 案例二維碼 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { margin: 0; padding: 0; } .nav { height: 40px; border-bottom: 1px solid #ccc; } ul { list-style: none; width: 1200px; margin: 0 auto; } ul li { float: left; /* 總共五個項目，每一個平均分20% */ /* 項目總長可超過100%，只是會換行 */ width: 20%; height: 40px; border-right: 1px solid #ccc; box-sizing: border-box; text-align: center; line-height: 40px; } ul .last { border-right: none; } ul li a { display: block; height: 40px; text-decoration: none; color: #000; } ul li .app { position: relative; } .code { position: absolute; left: 50%; top: 41px; transform: translate(-50%); } </style> </head> <body> <div class="nav"> <ul> <li><a href="#">我要投資</a></li> <li><a href="#">平台介紹</a></li> <li><a href="#">新手專區</a></li> <li> <a href="#" class="app" >手機微金所<img src="./tao.jpg" alt="" class="code" /></a> </li> <li class="last"><a href="#">個人中心</a></li> </ul> </div> </body> </html> ``` ## 案例banner ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .banner { position: relative; margin: 0 auto; width: 800px; height: 500px; } .mask { position: absolute; left: 0; bottom: 0; width: 100%; height: 150px; background-color: rgba(0, 0, 0, 0.5); } </style> </head> <body> <div class="banner"> <img src="./bg.jpg" alt="" /> <div class="mask"></div> </div> </body> </html> ``` ## 固定定位 1.脫標不占位 2.改變位置參考瀏覽器窗口 3.顯示模式類似行內塊 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { position: fixed; left: 50%; margin-left: -100px; /* 不要用下面的方法 */ /* transform: translate(50%); */ top: 0; width: 200px; height: 200px; background-color: pink; text-align: center; line-height: 200px; } </style> </head> <body> <p>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p> <p>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p> <p>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p> <p>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p> <p>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p> <p>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p> <p>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p> <p>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p> <p>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p> <p>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p> <p>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p> <p>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p> <p>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p> <p>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p> <p>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p> <p>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p> <p>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p> <p>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p> <p>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p> <p>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p> <div class="box">box</div> </body> </html> ``` ## 顯示層級 ``` <style> div{ width: 200px; height: 200px; } .one{ position: absolute; left: 20px; top: 50px; background-color: pink; } .two{ position: absolute; left: 50px; top: 100px; background-color: skyblue; } </style> ``` 情況一two在上 ``` <body> <div class="one">one</div> <div class="two">two</div> </body> ``` 情況二one在上 ``` <body> <div class="two">two</div> <div class="one">one</div> </body> ``` z-index 1.一定要在定位的情況才生效 2.默認是0(對流層)，1(平流層)，可以到9999+ 3.標準流<浮動<定位(都在對流層) 4.只有純數字，沒有單位 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { width: 200px; height: 200px; } .one { position: absolute; left: 20px; top: 50px; z-index: 1; background-color: pink; } .two { position: absolute; left: 50px; top: 100px; background-color: skyblue; } </style> </head> <body> <div class="one">one</div> <div class="two">two</div> </body> </html> ``` ## vertical-align 瀏覽器遇到行內和行內塊都當文字處理，默認文字是按基線對齊 屬性名:vertical-align | 對齊方式 | 屬性值 | |:------------:|:--------:| | 默認基線對齊 | baseline | | 頂部對齊 | top | | 中部對齊 | middle | | 底部對齊 | button | ![](https://i.imgur.com/5b8Q3MF.jpg) ### 情況一 ```css= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> input { height: 50px; box-sizing: border-box; vertical-align: middle; } </style> </head> <body> <input type="text" /><input type="button" value="搜索" /> </body> </html> ``` ### 情況二 ```css= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> img { vertical-align: bottom; } </style> </head> <body> <img src="./bg.jpg" alt="" /><input type="text" /> </body> </html> ``` ### 情況三 ```css= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .father { width: 400px; height: 400px; background-color: pink; } input { border: none; vertical-align: top; } </style> </head> <body> <div class="father"> <input type="text" /> </div> </body> </html> ``` ### 情況四 ```css= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .father { width: 1000px; /* 故意不寫高度 */ background-color: pink; } img { vertical-align: middle; /* 解法2 */ /* display: block; */ } </style> </head> <body> <div class="father"> <img src="./bg.jpg" alt="" /> </div> </body> </html> ``` ### 情況五 ```css= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .father { width: 1000px; height: 1000px; background-color: pink; line-height: 1000px; text-align: center; } img { vertical-align: middle; } </style> </head> <body> <div class="father"> <img src="./bg.jpg" alt="" /> </div> </body> </html> ``` ## 滑鼠圖案 屬性名:cursor | 效果圖案 | 屬性值 | |:--------------:|:-------:| | 默認箭頭 | default | | 小手(點擊) | pointer | | 工字(選擇文字) | text | | 十字(移動) | move | ```css= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { width: 200px; height: 200px; } .default { cursor: default; background-color: pink; } .pointer { cursor: pointer; background-color: yellow; } .text { cursor: text; background-color: lightgreen; } .move { cursor: move; background-color: skyblue; } </style> </head> <body> <div class="default"></div> <div class="pointer"></div> <div class="text"></div> <div class="move"></div> </body> </html> ``` ## 邊框圓角 最大值為寬或高的一半 最大值百分比為50% ![](https://i.imgur.com/7DRey8v.jpg) ```css= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { margin: 50px auto; width: 200px; height: 200px; background-color: pink; border-radius: 10px; /* 4值: 左上 右上 右下 左下 */ /* border-radius: 10px 20px 40px 80px; */ /* 3值: 左上 (右上左下) 右下 */ /* border-radius: 10px 40px 80px; */ /* 2值: (左上右下) (右上左下) */ /* border-radius: 10px 80px; */ } </style> </head> <body> <div class="box"></div> </body> </html> ``` ```css= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> /* 正圓形 */ .one { width: 200px; height: 200px; background-color: pink; border-radius: 50%; } /* 膠囊型 圓角為高的一半 */ .two { width: 400px; height: 200px; background-color: skyblue; border-radius: 100px; } </style> </head> <body> <div class="one"></div> <div class="two"></div> </body> </html> ``` ## 溢出顯示效果 屬性名:overflow | 效果 | 屬性值 | |:------------------:|:-------:| | 默認溢出可見 | visible | | 溢出部分隱藏 | hidden | | 一律顯示滾動條 | scroll | | 自動顯示隱藏滾動條 | auto | ```css= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { width: 300px; height: 300px; background-color: pink; overflow: hidden; /* overflow: visible; */ /* overflow: scroll; */ /* overflow: auto; */ } </style> </head> <body> <div class="box"> 安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安 </div> </body> </html> ``` ## 案例二維碼進階 ```css= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { margin: 0; padding: 0; } .nav { height: 40px; border-bottom: 1px solid #ccc; } ul { list-style: none; width: 1200px; margin: 0 auto; } ul li { float: left; /* 總共五個項目，每一個平均分20% */ /* 項目總長可超過100%，只是會換行 */ width: 20%; height: 40px; border-right: 1px solid #ccc; box-sizing: border-box; text-align: center; line-height: 40px; } ul .last { border-right: none; } ul li a { display: block; height: 40px; text-decoration: none; color: #000; } ul li .app { position: relative; } .code { display: none; position: absolute; left: 50%; top: 41px; transform: translate(-50%); } /* 重點 */ .nav li a:hover img { display: block; } </style> </head> <body> <div class="nav"> <ul> <li><a href="#">我要投資</a></li> <li><a href="#">平台介紹</a></li> <li><a href="#">新手專區</a></li> <li> <a href="#" class="app" >手機微金所<img src="./tao.jpg" alt="" class="code" /></a> </li> <li class="last"><a href="#">個人中心</a></li> </ul> </div> </body> </html> ``` ## opacity ![](https://i.imgur.com/5u0u3QH.jpg) ```css= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { width: 1000px; height: 1000px; background-color: green; opacity: 0.5; } </style> </head> <body> <div> <img src="./bg.jpg" alt="" /> 我透明嗎 </div> </body> </html> ```