元素居中定義與外邊距定義：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3"> <meta name="description" content="網站描述bla bla"> <title>網站標題</title> <style> article{ border:1px solid #ddd; } div{ border:1px solid red; margin:30px; padding:50px; } </style> </head> <body> <article> <div> </div> </article> </body> </html>
邊距合并與負值使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3"> <meta name="description" content="網站描述bla bla"> <title>網站標題</title> <style> body{ padding:100px; } article{ border:1px solid #ddd; padding:50px 0; } div{ border:1px solid red; /* 設定負值會溢位 */ margin-left:-20px; margin-right:-20px; text-align:center; } h2{ border:1px solid blue; /* 上下間距存在合并情況，會取兩個邊距中最大的那個元素 */ margin-top:30px; margin-bottom:60px; } </style> </head> <body> <h2>h2</h2> <h2>h2</h2> <article> <div> aaa </div> </article> </body> </html>
尺寸限制與內邊距使用方法：
box-sizing: border-box;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3"> <meta name="description" content="網站描述bla bla"> <title>網站標題</title> <style> body{ padding:10px; } .div1{ border:10px solid; margin:20px; padding:40px; width:300px; height:100px; } .div2{ border:10px solid; margin:20px; padding:40px; box-sizing: border-box; width:300px; height:100px; } </style> </head> <body> <div class="div1">div1</div> <div class="div2">div2</div> </body> </html>
元素邊框的使用規范：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3"> <meta name="description" content="網站描述bla bla"> <title>網站標題</title> <style> body{ padding:10px; } .div{ border-style:solid; border-top-width:10px; border-right-width:5px; border-top-color:red; border-right-color:blue; margin:20px; padding:40px; width:300px; height:100px; } p>em{ border-bottom:1px solid green; } </style> </head> <body> <div class="div">div</div> <p>this is <em>cyy</em></p> </body> </html>
圓角控制的詳細使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3"> <meta name="description" content="網站描述bla bla"> <title>網站標題</title> <style> body{ padding:10px; } .div{ border-radius:20px 30px 40px 10px; border:1px solid red; margin:20px; padding:40px; width:300px; height:100px; } p>em{ border-bottom:5px solid red; border-radius:50%; } </style> </head> <body> <div class="div">div</div> <p><em>cyy</em></p> </body> </html>
輪廓線使用技巧：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3"> <meta name="description" content="網站描述bla bla"> <title>網站標題</title> <style> *{ margin:0;padding:0; } .div{ /* 輪廓線 */ outline:10px double #ddd; border:10px solid red; padding:50px; width:300px; } h1{background:green;} </style> </head> <body> <div class="div">div</div> <h1>h1</h1> </body> </html>
可以看到輪廓線和邊框線的區別：
輪廓線不占空間，邊框線占據空間，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3"> <meta name="description" content="網站描述bla bla"> <title>網站標題</title> <style> *{ margin:0;padding:0; } .div{ /* 輪廓線 */ outline:10px double #ddd; border:10px solid red; padding:50px; width:300px; } h1{background:green;} .no_line{ /* 去掉input的輪廓線 */ outline:none; } </style> </head> <body> <div class="div">div</div> <h1>h1</h1> <input type="text" class="no_line"> <input type="text"> </body> </html>
元素顯示的多種模型控制：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3"> <meta name="description" content="網站描述bla bla"> <title>網站標題</title> <style> div>a{ text-decoration: none; display:block; } div>a:hover{ color:red; background:pink; } ul>li{ display:inline-block; width:200px;height:20px; text-align: center;line-height:20px; border:1px solid; } ul>li:hover{ color:red; background:pink; cursor: pointer; } </style> </head> <body> <div> <a href="">html</a> <a href="">css</a> </div> <hr> <ul> <li>li</li> <li>li</li> <li>li</li> </ul> </body> </html>
使用visibility控制元素隱藏：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3"> <meta name="description" content="網站描述bla bla"> <title>網站標題</title> <style> div{ border:1px solid; margin:20px; background:pink; } div:first-of-type{ /* display:none;不占空間 */ /* display:none; */ /* visibility和opacity類似，相當于眼睛看不見，但依然占據空間 */ /* visibility:hidden; */ opacity: 0; } </style> </head> <body> <div> div1 </div> <div> div2 </div> </body> </html>display:none;不占空間 visibility和opacity類似，相當于眼睛看不見，但依然占據空間 overflow溢位隱藏：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3"> <meta name="description" content="網站描述bla bla"> <title>網站標題</title> <style> div:first-of-type{ border:1px solid; margin:20px; background:pink; width:200px; height:100px; overflow:auto; } div:nth-of-type(2){ border:1px solid; margin:20px; background:pink; width:200px; height:100px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; } </style> </head> <body> <div> 層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言，CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化， [1] CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁物件和模型樣式編輯的能力， </div> <div> 層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言，CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化， [1] CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁物件和模型樣式編輯的能力， </div> </body> </html>
fill-available 自動撐滿可用空間：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3"> <meta name="description" content="網站描述bla bla"> <title>網站標題</title> <style> *{ margin:0; padding:0; } div{ width:100%; height:500px; background:lightblue; } p{ border:1px solid; background:pink; width:200px; height:-webkit-fill-available; } </style> </head> <body> <div> <p>111</p> </div> </body> </html>
fit-content根據內容自適應尺寸：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3"> <meta name="description" content="網站描述bla bla"> <title>網站標題</title> <style> *{ margin:0; padding:0; } div{ background:lightblue; margin:0 auto; width:fit-content; } </style> </head> <body> <div>111</div> </body> </html>
其實我感覺跟display:inline-block;差不多……
max-content & min-content 盒子根據內容尺寸自適應：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3"> <meta name="description" content="網站描述bla bla"> <title>網站標題</title> <style> *{ margin:0; padding:0; } article{ /* width:min-content; */ width:max-content; } div{ background:lightblue; margin-bottom:10px; padding:10px; } </style> </head> <body> <article> <div> 層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言，CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化， </div> <div> 層疊樣式表， </div> </article> </body> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/205319.html
標籤：Html/Css