CSS 經常使用語法與盒模型分析
CSS基礎知識
CSS規則由兩個主要的部分構成：選擇器，以及一條或者多條聲明css
selector {
property: value;
property: value;
... property: value
}
h1 {color:red; font-size:14px;}
在上面的CSS代碼中html
h1是選擇器{color:red;front-size:14px;}是聲明color是屬性名稱red是屬性值color:red;被稱爲一個聲明
每一個聲明由一個屬性和一個值組成。selector選擇要設置樣式的HTML元素。chrome
屬性是要更改的樣式屬性。每一個屬性都有一個值。 CSS聲明以分號結尾，聲明組被大括號括起來瀏覽器
四種引入方法
內聯樣式
內聯樣式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優點，不推薦使用工具
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優點，不推薦使用-->
<p style="color: #cc1111;background-color: #5E5694">hellp css</p>
<p>hello world</p>
</body>
</html>
內部樣式
內部樣式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中佈局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
<body>
<div>hello world</div>
</body>
</html>
外部樣式（推薦）
將一個.css文件引入到HTML文件中性能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" rel="stylesheet" href="css代碼.css"></head>
</head>
<body>
<div>hello world</div>
</body>
</html>
三種引入的優先級
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三種引入的優先級</title>
<!-- 三種能夠同時存在,協同完成佈局 -->
<!-- 三種之間沒有優先級之說,誰在邏輯下方(後解釋的)誰就起做用(樣式覆蓋機制) -->
<!-- 內聯樣式必定是邏輯最下方的 -->
<!-- 外部樣式 -->
<link rel="stylesheet" href="./03.css">
<!-- 內部樣式 -->
<style type="text/css">
div {
width: 200px;
color: pink;
}
</style>
</head>
<body>
<!-- 優先級: 你們同時存在且操做同一對象同一屬性,纔會出現衝突,最終起做用的就是優先級高的 -->
<!-- 行間 -->
<div style="background-color: cyan; color: orange">你是個好人</div>
</body>
</html>
導入式（瞭解就好）
將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法以下字體
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*導入式*/
@import "css代碼.css"; 此處要注意CSS文件的路徑
</style>
</head>
<body>
注意：url
導入式會在整個網頁裝載完後再裝載CSS文件，所以這就致使了一個問題，若是網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下以後，再出現網頁的樣式。這是導入式固有的一個缺陷。使用連接式時與導入式不一樣的是它會以網頁文件主體裝載前裝載CSS文件，所以顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，而後再顯示有樣式的網頁，這是連接式的優勢。spa
基礎選擇器
「選擇器」指明瞭{}中的「樣式」的做用對象，也就是「樣式」做用於網頁中的哪些元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基礎選擇器</title>
<style type="text/css">
/*div => 標籤名 => 標籤選擇器: 開發過程當中儘量少的運用,運用範圍爲最內層的顯示層*/
/*dd => class名 => 類選擇器: 佈局的主力軍*/
/*d => id名 => id選擇器: 必定爲惟一的*/
/* * => 通配選擇器 => html,body,body下全部用於顯示內容的標籤 */
/** {
border: 1px solid black;
}*/
/*三種選擇器有優先級*/
/*標籤選擇器: 標籤名{} */
div {
width: 200px;
height: 200px;
background-color: red;
}
/*類選擇器: .類名{} */
.dd {
background-color: orange;
}
/*id選擇器: #id名{}*/
#d {
background-color: green;
}
/*優先級: id選擇器 > 類選擇器 > 標籤選擇器 > 通配選擇器*/
/*做用範圍越精確,優先級越高*/
</style>
<style type="text/css">
.div {
width: 100px;
height: 100px;
background-color: orange
}
/*多類名: 類名與類名之間不能用於任何符號隔斷*/
.red.div {
background-color: red;
}
</style>
</head>
<body>
<!-- ***** -->
<!-- 選擇器: css選擇html標籤的一個工具 => 將css與html創建起聯繫,那麼css就能夠控制html樣式 -->
<!-- 選擇器其實就是給html標籤起名字 -->
<div></div>
<div class="dd"></div>
<div class="dd" id="d"></div>
<div class="div"></div>
<div class="div red r"></div>
<div class="div"></div>
</body>
</html>
組合選擇器
組合選擇器主要包括，羣組選擇器，子代（後代）選擇器，相鄰（兄弟）選擇器，交集選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>組合選擇器</title>
<style type="text/css">
/*羣組選擇器: 同時能夠控制多個選擇器*/
/*#dd, div, #a {
}*/
/*.d { 起相同類名
color: red;
}*/
/*語法: 逗號分隔,控着多個*/
.d1, .d2, .d3 {
color: orange
}
/*子代(後代)選擇器: 根據父子結構控着目標子標籤*/
/*明確選擇器書寫順序: 目標inner, 再肯定修飾詞(哪一個父親,多少個父親)*/
/*子代選擇器必須爲一級父子嵌套關係，後代選擇器能夠爲一級及多級父子嵌套關係*/
/*語法: 子代 >鏈接 */
.sub > .inner {
color: tan
}
/*語法: 後代 空格鏈接*/
.sup .inner {
color: cyan
}
.sup .sub > .inner {
color: red
}
<!-- 後代(子代)選擇器:
// ①
<div class="sup">
<div class="sub"></div>
</div>
// ②
<div class="sup">
<div class="box">
<div class="sub"></div>
</div>
</div>
// *****能夠控制①②
.sup .sub {
sup必定是sub的父代(不必定是父級,sub就是被sup直接嵌套)
}
// 只能夠控制①
.sup > .sub {
sup必定是sub的父級
}
-->
/*相鄰(兄弟)選擇器: 根據兄弟結構控制下方兄弟標籤*/
/*相鄰選擇器必須爲直接相鄰關係，兄弟選擇器能夠爲直接相鄰或間接相鄰關係*/
/*明確目標 => 添加修飾詞*/
/*語法: 相鄰 +連結*/
.ele2 + .ele3 {
color: blue
}
/*語法: 兄弟 ~鏈接*/
.ele1 ~ .ele3 {
color: yellow
}
<!-- 兄弟(相鄰)選擇器:
// ①
<div class="up"></div>
<div class="down"></div>
// ②
<div class="up"></div>
<div class="box"></div>
<div class="down"></div>
// 兄弟 控制①②
.up ~ .down {
}
// 相鄰 控制①
.up + .down {
}
-->
/*交集選擇器: 一個標籤有多種選擇器修飾,經過多種修飾找到一個目標標籤*/
section#s.ss {
color: green
}
/*注: 每個選擇器位都可覺得三個基礎選擇器中任意一個*/
</style>
</head>
<body>
<!-- <div class="d1" id="dd"></div> -->
<!-- .d${$$$}*3 -->
<div class="d d1">001</div>
<div class="d d2">002</div>
<div class="d d3">003</div>
<!-- .sup>.sub>.inner -->
<div class="sup">
<div class="sub">
<div class="inner">inner</div>
</div>
</div>
<!-- .ele${e$}*3 -->
<div class="ele1">e1</div>
<div class="ele2">e2</div>
<div class="ele3">e3</div>
<!-- (section.ss#s{塊區域}+section.ss{塊區域}+.ss{塊區域}) -->
<section class="ss" id="s">塊區域</section>
<section class="ss">塊區域</section>
<div class="ss">塊區域</div>
</body>
</html>
<!-- 交集選擇器:
<div class="div box"></div>
<div class="div"></div>
<div></div>
div.div.box {
加強精確度(提高優先級)
}
body .div.box {
優先級只與選擇器個數(種類)有關
}
-->
複雜選擇器優先級
- 組合選擇器優先級與權值相關，權值爲權重和 - 權重對應關係 | 選擇器 | 權重 | | :--------: | :---: | | 通配 | 1 | | 標籤 | 10 | | 類、屬性 | 100 | | id | 1000 | | !important | 10000 | - 選擇器權值比較，只關心權重和，不更新選擇器位置 - 不一樣級別的選擇器間不具有可比性：1個類選擇器優先級高於n個標籤選擇器的任意組合
實例分析
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*兩個類名的選擇器 > 一個類名的選擇器, 與位置無關*/
.d4 .d5 {
font-size: 40px;
}
.d5 {
font-size: 20px;
}
/*瞭解: 屬性選擇器*/
[aa*="b"] {
font-size: 30px;
}
/*每一個選擇器位也能夠替換爲一個組合選擇器*/
body > .d1 .d3 .d5 {
font-size: 50px;
}
/*.d1 div .d3 .d5 優先級等於 body > .d1 .d3 .d5, 誰在下誰起做用*/
.d1 div .d3 .d5 {
font-size: 100px;
}
#div {
font-size: 200px;
}
</style>
</head>
<body>
<!-- 優先級取決於 權重, 其實就是比較個數 -->
<!-- 1.不一樣的修飾符(後代/兄弟/交集...)均不影響權重 -->
<!-- 2.選擇器的位置也不會影響權重 -->
<!-- 3.權重只和個數有關 -->
<!-- 4.id的權重無限大於class無限大於標籤 -->
<!-- 5.屬性選擇器的權重與類同樣 -->
<!-- 複習: 優先級來源(操做的是同一標籤同一屬性) -->
<div class="d1">
<div class="d2">
<div class="d3">
<div class="d4">
<div class="d5" aa="aba" id='div'>12345</div>
<div class="d5" aa="AAb">67890</div>
</div>
</div>
</div>
</div>
</body>
</html>
注意嵌套規則
塊級元素能夠包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。 有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如h1,h2,h3,h4,h5,h6,p,dt li內能夠包含div 塊級元素與塊級元素並列、內聯元素與內聯元素並列。
屬性選擇器
[att] 匹配全部具備att屬性的元素，不考慮它的值 p[title] { color:#f00; }
[att=val] 匹配全部att屬性等於「val」的E元素 div[class=」error」] { color:#f00; }
[att~=val] 匹配全部att屬性具備多個空格分隔的值、其中一個值等於「val」的E元素 td[class~=」name」] { color:#f00; }
[attr^=val] 匹配屬性值以指定值開頭的每一個元素 div[class^="test"]{background:#ffff00;}
[attr$=val] 匹配屬性值以指定值結尾的每一個元素 div[class$="test"]{background:#ffff00;}
[attr*=val] 匹配屬性值中包含指定值的每一個元素 div[class*="test"]{background:#ffff00;}
僞類選擇器
CSS僞類：是用來給選擇器添加一些特殊效果
a標籤的僞類：專用於控制連接的顯示效果
a:link（沒有接觸過的連接）,用於定義了連接的常規狀態。
a:hover（鼠標放在連接上的狀態）,用於產生視覺效果。
a:visited（訪問過的連接）,用於閱讀文章，能清楚的判斷已經訪問過的連接。
a:active（在連接上按下鼠標時的狀態）,用於表現鼠標按下時的連接狀態。
僞類選擇器 : 僞類指的是標籤的不一樣狀態:
a ==> 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態
a:link {color: #FF0000} /* 未訪問的連接 */
a:visited {color: #00FF00} /* 已訪問的連接 */
a:hover {color: #FF00FF} /* 鼠標移動到連接上 */
a:active {color: #0000FF} /* 選定的連接 */ 格式: 標籤:僞類名稱{ css代碼; }
其中hover與active其餘標籤也可使用
div:hover div:active
:nth-of-type() & :nth-child() & :not()
:nth-child(n) 選擇器匹配屬於其父元素的第 N 個子元素，不論元素的類型。 n 能夠是數字、關鍵詞或公式 先肯定位置，再肯定類型 Odd 和 even 是可用於匹配下標是奇數或偶數的子元素的關鍵詞（第一個子元素的下標是 1） p:nth-child(odd) p:nth-child(even) 使用公式 (an + b)。描述：表示週期的長度，n 是計數器（從 0 開始），b 是偏移值。 在這裏，咱們指定了下標是 3 的倍數的全部 p 元素的背景色 p:nth-child(3n+0) :nth-of-type(n) 選擇器匹配屬於父元素的特定類型的第 N 個子元素的每一個元素. n 能夠是數字、關鍵詞或公式，全部的都找 先肯定類型，在肯定匹配位置
:not() 取反操做
實例分析
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>僞類選擇器</title>
<style type="text/css">
/*a標籤的四大僞類*/
/*操做的是a,僞類是修飾詞,不影響優先級*/
/*連接的初始狀態(未被訪問過)*/
a:link {
color: green
}
/*連接被鼠標懸浮*/
a:hover {
color: yellow;
/*鼠標樣式*/
cursor: pointer;
}
/*連接處於激活狀態(鼠標按下)*/
a:active {
color: red;
}
/*連接已被訪問過*/
a:visited {
color: #ccc
}
/*設置初始狀態*/
.box {
width: 200px;
height: 200px;
background-color: red
}
/*再肯定第二狀態*/
.box:hover {
background-color: yellowgreen;
cursor: pointer;
}
.box:active {
background-color: greenyellow
}
</style>
<style type="text/css">
section {
width: 100px;
height: 100px;
background-color: orange
}
/*同一結構下的第幾個: 先肯定位置再匹配類型*/ 這裏也用了羣組選擇器
section:nth-child(3), section:nth-child(5) {
background-color: green
}
/*同一結構下的某選擇器的第幾個: 先肯定類型再匹配位置*/
section:nth-of-type(1), section:nth-of-type(3) {
background-color: cyan
}
/*取反*/
section:not(:nth-of-type(2)) {
background-color: pink
}
</style>
</head>
<body>
<!-- 該同一結構: a div section*3 div -->
<a href="https://www.baidu.com">前往你的家</a>
<!-- 普通標籤都可以使用 :hover :active -->
<div class="box"></div>
<section></section>
<section class="ss"></section>
<section></section>
<div>
<!-- 該同一結構: a i b -->
<a href="">123</a>
<i></i>
<b></b>
</div>
</body>
</html>
:before & :after
:before p:before 在每一個<p>元素以前插入內容
:after p:after 在每一個<p>元素以後插入內容
p:before 在每一個 <p> 元素的內容以前插入內容 p:before{content:"hello";color:red}
p:after 在每一個 <p> 元素的內容以前插入內容 p:after{ content:"hello"；color:red}
利用僞類實現邊框（最多實現兩條邊）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>僞類設計邊框</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: yellow;
margin: 50px auto;
position: relative;
}
/*:before | :after*/
.box:before {
content: "";
/*display: block;*/
/*會拉動盒子*/
/*margin-top: 100px;*/
/*正常*/
/*margin-left: 10px;*/
position: absolute;
width: 180px;
height: 1px;
background-color: black;
left: 10px;
top: 199px;
}
.box:after {
content: "";
position: absolute;
width: 1px;
height: 180px;
background-color: black;
top: 10px;
left: 199px;
}
</style>
</head>
<body>
<div class="box">12345</div>
</body>
</html>
CSS優先級和繼承
CSS優先級
所謂CSS優先級，便是指CSS樣式在瀏覽器中被解析的前後順序。
樣式表中的特殊性描述了不一樣規則的相對權重，它的基本規則是：
1 內聯樣式表的權值最高 style=""-------------------1000；
2 統計選擇符中的ID屬性個數。 #id －－－－－－－－－－－－－100
3 統計選擇符中的CLASS屬性個數。 .class －－－－－－－－－－－－－10
4 統計選擇符中的HTML標籤名個數。 p －－－－－－－－－－－－－-1
按這些規則將數字符串逐位相加，就獲得最終的權重，而後在比較取捨時按照從左到右的順序逐位比較
<style>
#p{
color: rebeccapurple;
}
.p{
color: #2459a2;
}
p{
color: yellow;
}
</style>
<p id="p" class="p" style="color: deeppink">hello yuan</p>
CSS的繼承性:
繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它容許樣式不只能夠應用於某個特定的元素，還能夠應用於它的後代。例如一個BODY定義了的顏色值也會應用到段落的文本中
body{color:red;} <p>helloyuan</p>
這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是很是低的，是比普通元素的權重還要低的0
p{color:green}
發現只須要給加個顏色值就能覆蓋掉它繼承的樣式顏色。因而可知：任何顯示申明的規則均可以覆蓋其繼承樣式。
此外，繼承是CSS重要的一部分，咱們甚至不用去考慮它爲何可以這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等
div{
border:1px solid #222
}
<div>hello <p>yuan</p> </div>
附加說明
文內的樣式優先級爲1,0,0,0，因此始終高於外部定義。這裏文內樣式指形如<div style="color:red>blah</div>的樣式，而外部定義指經由<link>或<style>卷標定義的規則。 有!important聲明的規則高於一切。 若是!important聲明衝突，則比較優先權。 若是優先權同樣，則按照在源碼中出現的順序決定，後來者居上。 由繼承而獲得的樣式沒有specificity的計算，它低於一切其它規則(好比全局選擇符*定義的規則)。
css的經常使用屬性
長度
* px：像素(pixel)，屏幕上顯示的最小單位，用於網頁設計，直觀方便 * mm：毫米 * cm：釐米 * in：英寸 * pt：點(point)，一個標準的長度單位，1pt＝1/72in，用於印刷業，很是簡單易用； * em：至關長度，一般1em=16px，應用於流式佈局
顏色屬性
* rgb()：三個值可爲[0-255]數值或百分比，以,相隔（r:Red g:Green b:Blue） * rgba()：前三個值可爲像素或是百分比，最後一個爲[0, 1]數值，以,相隔（r:Red g:Green b:Blue a:Alpha） * hsl()：第一個值爲[0,360]數值，後二個值可爲百分比，以,相隔（h:Hue s:Saturation l:Lightness） * hsla()：第一個值爲[0,360]數值，中間二個值可爲百分比，最後一個爲[0, 1]數值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha） * #AABBCC：六個十六進制位，每兩位一總體，分別表明Red、Green、Blue，能夠簡寫#abc
字體屬性
font-family：字體族科，多值用於備用，以,隔開 font-size：字體大小 font-style： 字體風格 normal \| italic \| oblique font-weight：字體粗細 normal \| bold \| lighter \| 100~900 line-height：行高 font：字重 風格 大小/行高 字族
注意：行高設置成content的高，行內的字就是位於中間位置
背景屬性
background-color：顏色 background-image：圖片 background-repeat：重複 repeat | no-repeat | repeat-x | repeat-y background-position：定位 top | bottom | left | right | center v_hint：定位值可爲方位詞、百分比及固定值，值個數默認爲兩位(水平/垂直)，一個值時垂直默認center background-attachment：滾動模式 scroll | fixed
注意：若是將背景屬性加在body上，要記得給body加上一個height，不然結果異常，這是由於body爲空，沒法撐起背景圖片；另外，若是此時要設置一個width＝100px，你也看不出效果，除非你設置出html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html{
background-color: antiquewhite;
}
body{
width: 100px;
height: 600px;
background-color: deeppink;
background-image: url(1.jpg);
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
</body>
</html>
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
display: inline-block;
width: 18px;
height: 20px;
background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
background-position: 0 -100px;
}
</style>
</head>
<body>
<span></span>
</body>
</html>
文本屬性
* color：文本顏色 * text-align：橫向排列 ```css left 居左 | center 居中 | right 居右 ``` * vertical-align：縱向排列 ```css baseline：將支持valign特性的對象的內容與基線對齊 sub：垂直對齊文本的下標 super：垂直對齊文本的上標 top：將支持valign特性的對象的內容與對象頂端對齊 text-top：將支持valign特性的對象的文本與對象頂端對齊 middle：將支持valign特性的對象的內容與對象中部對齊 bottom：將支持valign特性的對象的文本與對象底端對齊 text-bottom：將支持valign特性的對象的文本與對象頂端對齊 ``` * text-indent：字體縮減 * text-decoration：字劃線 * letter-spacing：字間距 * word-spacing：詞間距 * word-break：自動換行 ```css normal：默認換行規則 break-all：容許在單詞內換行 ```
實戰演練
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本樣式操做</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: orange;
}
/*字體樣式*/
.box {
width: 400px;
/*字族*/
/*STSong做爲首選字體, 微軟雅黑做爲備用字體*/
font-family: "STSong", "微軟雅黑";
}
.box.uu {
/*字體大小*/
font-size: 40px;
/*字重*/
font-weight: 900;
/*風格*/
font-style: italic;
/*行高: 某一段文本在自身行高中能夠垂直居中顯示 => 文本垂直居中*/
line-height: 200px;
/*字體總體設置*/
/*字重 風格 大小/行高 字族 (風格能夠省略)*/
font: 100 normal 60px/200px "STSong", "微軟雅黑";
}
i {
/*normal清除系統字體風格*/
font-style: normal;
}
</style>
<style type="text/css">
.wrap {
width: 200px;
height: 200px;
background-color: yellow;
}
/*文本樣式*/
.w1 {
/*換行方式*/
word-break: break-all;
}
.w2 {
width: 400px;
/*水平居中: left | center | right*/
/*text-align: center;*/
/*字劃線: overline | line-through | underline */
text-decoration: overline;
/*字間距*/
letter-spacing: 2px;
/*詞間距*/
word-spacing: 5px;
/*縮進*/
/*1em至關於一個字的寬度*/
text-indent: 2em;
}
a {
/*取消劃線*/
text-decoration: none;
}
</style>
</head>
<body>
<div class="box uu">普通文本</div>
<i>i的文本</i>
<div class="wrap">一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三</div>
<hr>
<div class="wrap w1">123 12312 312312312312312312312312 3123123123123123123123123123123123123123123123123123123</div>
<hr>
<div class="wrap w2">hello world hello world</div>
<a href="">連接標籤</a>
</body>
</html>
邊框屬性
border-style: solid; border-color: chartreuse; border-width: 20px; 簡寫：border: 30px rebeccapurple solid;
邊框單獨設置各邊
border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:none;
列表屬性
list-style-type 設置列表項標誌的類型。 list-style-image 將圖象設置爲列表項標誌。 list-style-position 設置列表中列表項標誌的位置。 list-style 簡寫屬性。用於把全部用於列表的屬性設置於一個聲明中
list-style-type屬性指定列表項標記的類型
ul { list-style-type: square; }
使用圖像來替換列表項內的標記
ul {
list-style-image: url('');
}
ul,ol{ list-style: decimal-leading-zero;
list-style: none; <br> list-style: circle;
list-style: upper-alpha;
list-style: disc; }
display屬性
none block inline
display:inline-block可作列表佈局，其中的相似於圖片間的間隙小bug能夠經過以下設置解決
#outer{
border: 3px dashed;
word-spacing: -5px;
}
none(隱藏某標籤)
p{display:none;}
注意與visibility:hidden的區別
visibility:hidden能夠隱藏某個元素，但隱藏的元素仍需佔用與未隱藏以前同樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。
display:none能夠隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，並且該元素本來佔用的空間也會從頁面佈局中消失。
block（內聯標籤設置爲塊級標籤）
span {display:block;}
注意：一個內聯元素設置爲display:block是不容許有它內部的嵌套塊元素。
inline（塊級標籤設置爲內聯標籤）
li {display:inline;}
inline-block
display:inline-block可作列表佈局，其中的相似於圖片間的間隙小bug能夠經過以下設置解決
#outer{
border: 3px dashed;
word-spacing: -5px;
}
實戰演練
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display</title>
<style>
.box {
width: 80px;
height: 40px;
background-color: orange
}
.box {
/*block: 塊級標籤, 獨佔一行, 支持全部css樣式*/
/*display: block;*/
/*inline: 內聯(行級)標籤, 同行顯示, 不支持寬高*/
/*display: inline;*/
/*inline-block: 內聯塊標籤, 同行顯示, 支持全部css樣式*/
display: inline-block;
/*標籤的嵌套規則*/
/*①*/
/*block能夠嵌套全部顯示類型標籤, div | h1~h6 | p*/
/*注: hn與p屬於文本類型標籤,全部通常只嵌套inline標籤*/
/*②*/
/*inline標籤只能嵌套inline標籤, span | i | b | sup | sub | ins */
/*③*/
/*inline-block能夠嵌套其餘類型標籤, 但不建議嵌套任意類型標籤 img | input*/
}
.b1 {
height: 100px;
}
.b2 {
height: 80px;
}
.b3 {
height: 120px;
}
.box {
/*文本基線對齊*/
vertical-align: baseline;
}
</style>
</head>
<body>
<!-- <div class="box b1"></div>
<div class="box b2"></div>
<div class="box b3"></div> -->
<div class="box b1">123</div>
<div class="box b2">456</div>
<div class="box b3">
<span>789 789 789 789</span>
<span>789 789 789 789</span>
</div>
</body>
</html>
display總結
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display總結</title>
<style type="text/css">
/*1.同行顯示, 就至關於純文本, 當一行顯示不下, 如就是一個字顯示不下,那麼顯示不下的那一個字就會自動換行,和純文本的區別就是有標籤總體的概念,標籤與標籤間有一個空格的隔斷*/
/*2.支持部分css樣式, 不支持寬高 | 行高(行高會映射到父級block標籤) | margin上下*/
/*3.content由文本內容撐開*/
/*4.inline標籤只嵌套inline標籤*/
abc {
display: inline;
background: orange;
/*width: 200px;*/
/*height: 200px;*/
/*line-height: 300px;*/
margin-top: 300px;
margin-bottom: 300px;
}
.d1 {
background: red;
}
</style>
<style type="text/css">
/*1.同行顯示, 當一行顯示不下, 標籤會做爲一個總體換行顯示*/
/*2.支持全部css樣式*/
/*3.content默認由文本(圖片)內容撐開,也能夠自定義寬高, 當自定義寬高後,必定採用自定義寬高(顯示區域不足,內容會在標籤內容換行顯示,可能超出顯示區域)*/
/*4.inline-block標籤不建議嵌套任意標籤*/
.d2 {
background: pink;
}
def {
display: inline-block;
background: blue;
width: 20px;
height: 20px;
}
</style>
<style type="text/css">
/*1.異行顯示, 無論自身區域多大, 都會獨佔一行*/
/*2.支持全部css樣式*/
/*3.width默認繼承父級,height由內容(文本,圖片,子標籤)撐開, 當設置自定義寬高後,必定採用自定義寬高*/
/*4.block能夠嵌套任意標籤*/
.d3 {
background: brown;
}
opq {
display: block;
background: cyan;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="d1">
<abc>自定義標籤</abc>
<abc>自定義標籤</abc>
<abc>自定義標籤</abc>
</div>
<div class="d2">
<def>自定義標籤</def>
<def>自定義標籤</def>
<def>自定義標籤</def>
</div>
<div class="d3">
<opq>自定義標籤</opq>
<opq>自定義標籤</opq>
<opq>自定義標籤</opq>
</div>
<!-- inline-block不建議做爲結構|佈局層理由 -->
<style type="text/css">
xyz {
display: inline-block;
width: 200px;
height: 200px;
background: yellow;
}
xyz {
/*文本垂直方向控制屬性*/
vertical-align: top;
}
.x1 {
height: 100px;
}
.x2 {
line-height: 200px;
}
</style>
<div class="d4">
<xyz class="x1">一段文本</xyz>
<xyz class="x2">兩段文本</xyz>
<xyz class="x3">三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本</xyz>
</div>
</body>
</html>
overflow屬性
overflow 屬性規定當內容溢出元素框時發生的事情 這個屬性定義溢出元素內容區的內容會如何處理。若是值爲 scroll，不管是否須要，用戶代理都會提供一種滾動機制。所以，有可能即便元素框中能夠放下全部內容也會出現滾動條 可能的值 visible 默認值。內容不會被修剪，會呈如今元素框以外。 hidden 內容會被修剪，而且其他內容是不可見的。 scroll 內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。 auto 若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。 inherit 規定應該從父元素繼承 overflow 屬性的值。
實例分析
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow</title>
<style type="text/css">
div {
width: 50px;
height: 100px;
}
.d1 { background: red }
.d2 { background: orange }
.d2 {
margin-top: -50px;
}
</style>
<style type="text/css">
.b1 {
background: cyan;
/* ***** */
/*overflow: 處理內容超出盒子顯示區域*/
/*auto: 自適應, 內容超出, 滾動顯示超出部分, 不超出則正常顯示*/
/*scroll: 一直採用滾動方式顯示*/
/*hidden: 隱藏超出盒子顯示範圍的內容*/
overflow: hidden;
}
/*注: 根據文本的具體超出範圍, 橫向縱向都可能出現滾動條*/
.b2 {
width: 100px;
background: tan;
overflow: scroll;
}
</style>
</head>
<body>
<!-- 文本層要高於背景層 -->
<div class="d1">我是文本我是文本我是文本</div>
<div class="d2">我是文本我是文本我是文本</div>
<!-- 問題: 內容(文本,圖片,子標籤)會超出盒子的顯示區域 -->
<div class="b1">我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本</div>
<div class="b2">asdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsda</div>
</body>
</html>
盒子模型
盒模型簡介
margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的
外邊距的設置
外邊距跟邊框同樣，分爲上、右、下、左4個方向的邊距
margin 簡寫屬性，同時設置邊框4個方向的外邊距
margin-bottom 設置下外邊距
margin-left 設置左外邊距
margin-right 設置右外邊距
margin-top 設置上外邊距
外邊距設置語法以下：
margin:margin_value [margin_value] [margin_value] [margin_value];
margin-方向：margin_value;
margin_value參數描述
auto 瀏覽器計算外邊距
length以px、em、cm 等爲單位的數值做爲外邊距值，可取正、負
% 基於父級元素的寬度來計算外邊距
inherit 繼承父級元素的外邊距|
指定1個值時，表示4個方向的外邊距同樣
指定2個值時，第一個值設置上、下外邊距，第二個值設置左、右外邊距(在實際應用中常使用margin： 0 auto，實現水平居中)
指定3個值時，第一個值設置上外邊距，第二個值設置左、右外邊距，第三個值設置下外邊距
指定4個值時，各個值按順時針方向依次設置上、右、下、左外邊距
注：父子元素之間的邊距既能夠用padding定義，也可使用margin定義，當父子邊距定義爲內邊距時，應在父級元素中是哦應該能padding屬性設置內邊距；當父子邊距定義爲外邊距時，則應在子級元素中使用margin屬性設置外邊距
padding: 用於控制內容與邊框之間的距離；
內邊距的設置 內邊距跟邊框同樣，分爲上、下、左、右4個方向的內邊距， padding 簡寫屬性，同時設置邊框4個方向的內邊距 padding-bottom 設置下內邊距 padding-left 設置左內邊距 padding-right 設置右內邊距 padding-top 設置上內邊距 內邊距設置語法以下： padding:padding_value [padding_value] [padding_value] [padding_value] [padding_value]; padding-方向:padding_value;12 padding_value參數說明： auto 瀏覽器計算內邊距 length 以px、em、cm等爲單位的某個具體正數數值做爲內邊距值，默認爲0 % 基於父級元素的寬度來計算內邊距 inherit 繼承父級元素的內邊距 指定1個值時，表示4個方向的內邊距都同樣。 指定2個值時，第一個值設置上、下內邊距，第二個值設置左、右內邊距。 指定3個值時，第一個值設置上內邊距，第二個值設置左、右內邊距，第三個值設置下內邊距。 指定4個值時，各個值按順時針方向依次設置上、右、下、左內邊距。 注：若是對盒子設置背景，那麼背景會延申到padding區域。
Border(邊框) 圍繞在內邊距和內容外的邊框
border(邊框)由border-width(寬度)、border-color(顏色)、border-style(風格)三部分組成 border成員：border-left、border-right、border-top、border-bottom border-width成員：border-left-width、border-right-width、border-top-width、border-bottom-width border-color成員：border-left-color、border-right-color、border-top-color、border-bottom-color border-style成員：border-left-style、border-right-style、border-top-style、border-bottom-style solid 實線 dashed 虛線 dotted 點狀線 double 雙實線 groove 槽狀線 ridge 脊線 inset 內嵌效果線 outset 外凸效果線
Content(內容) 盒子的內容，顯示文本和圖像
經過設置width與height來規定content 塊級標籤能夠設置自身寬高，默認寬爲父級寬(width=auto)、高爲0，高度能夠由內容決定 內聯標籤不能夠設置自身寬高，默認寬高均爲0，寬高必定由內容決定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style type="text/css">
/*content=width x height, 顏色由背景色填充, 參與盒子顯示*/
.box {
width: 100px;
height: 100px;
background-color: orange
}
/*padding, 顏色由背景色填充, 參與盒子顯示*/
.box {
padding: 20px;
}
/*border, 顏色由自身規定, 參與盒子顯示*/
.box {
/*transparent 透明*/
border: 10px solid black;
}
/*margin, 沒有顏色, 不參與盒子顯示, 決定盒子佈局(位置信息)*/
.box {
margin: 200px;
}
</style>
</head>
<body>
<!-- 什麼是盒模型: 通配選擇器能夠控制的頁面標籤都是盒模型(通常咱們操做的是塊級標籤) -->
<!-- 爲何要學盒模型: 頁面書寫的標籤初始狀態級別都不能知足顯示要求,須要再次修改,修改的就是盒模型的各個屬性 -->
<!-- 盒模型組成部分: margin(外邊距) + boder(邊框) + padding(內邊距) + content(內容) -->
<!-- 注意點: 1.四部分均具備自身獨立區域 2.content=width x height,是子標籤或子內容的顯示區域 -->
<div class="box">123</div>
</body>
</html>
盒模型Padding，Border的使用（利用Border實現一個三角形）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型顯示區域</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: orange;
}
.inner {
width: 50px;
height: 50px;
background-color: red;
}
/*padding*/
/*1.第一個方位爲上, 順時針肯定賦值順序 => 上右下左*/
/*2.少於四個值, 賦值依舊遵循規則1, 無值方位找對邊*/
/*3.一個值時, 控制上下左右*/
.box {
/*padding: 10px 20px 30px 40px;*/
/*padding: 10px 20px;*/
/*將子內容往內擠*/
padding-top: 75px;
padding-left: 75px;
/*還有保證自身顯示區域不變 => 手動縮小content*/
/*calc()作css運算, 須要帶上單位*/
height: calc(200px - 75px);
width: calc(200px - 75px);
}
/*box控制位置, inner控制內容*/
.inner {
text-align: center;
line-height: 50px;
}
/*border: 顏色 寬度 樣式 (順序隨意)*/
.box {
/*solid dashed*/
border-style: inset;
border-color: blue;
border-width: 50px;
/*總體賦值*/
border: 30px solid #af3;
/*有些標籤默認有邊框,如何清除邊框*/
/*border: 0;*/
border: none;
}
.jh {
/*利用盒模型造成三角形*/
/*將其餘邊顏色設置爲透明色(transparent)*/
border-top: 50px solid red;
/*border-right: 50px solid orange;*/
border-bottom: 50px solid pink;
border-left: 50px solid blue;
width: 0;
height: 0;
}
</style>
</head>
<body>
<!-- content + padding + border -->
<div class="box">
<div class="inner">1</div>
</div>
<div class="jh"></div>
</body>
</html>
盒模型佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型佈局</title>
<style type="text/css">
/*body默認有margin:8px, 作項目時必定會清除*/
/*清除系統默認(不喜歡的)樣式,該操做稱之爲 reset 操做*/
body {
margin: 0;
}
/*a標籤的reset操做*/
a {
color: black;
text-decoration: none;
}
/*h1標籤的reset操做*/
h1 {
margin: 0;
}
/*block盒子, 寬度自適應父級, 高度由子級撐開*/
.box {
width: 100px;
height: 100px;
background-color: orange;
}
.b1 {
/*margin: 50px;*/
margin-top: 50px;
margin-left: 50px;
}
/*只有margin-left|top用於完成自身佈局*/
.b2 {
/*水平居中: 在所在父級水平居中*/
/*auto自適應剩餘空白區域*/
/*margin-left: auto;*/
/*margin-right: auto;*/
/*實現居右50px*/
margin-left: auto;
margin-right: 50px;
/*b2上移與b1並排*/
margin-top: -100px;
}
</style>
<style type="text/css">
.up, .down {
width: 100px;
height: 100px;
background-color: red;
/*display: inline-block;*/
}
/*margin-right|bottom影響兄弟佈局*/
.up {
/*bottom會影響之下的兄弟, 往下擠*/
/*margin-bottom: 30px;*/
/*right會影響右方的兄弟, 往右擠*/
/*margin-right: 30px;*/
margin-bottom: 30px;
}
.down {
/*上下兄弟的距離取大值 => margin-top的坑*/
margin-top: 30px;
}
</style>
<style type="text/css">
.sup {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 50px;
}
.sub {
/*父子top取大值 => margin-top的坑(父級只與第一個子級聯動)*/
width: 100px;
height: 100px;
background-color: brown;
margin-top: 50px;
}
/*拆散父子(第一個子)*/
/*1.設置父級的border-top便可*/
/*2.或者設置父級的padding-top便可*/
</style>
</head>
<body>
<!-- <a href="">123</a> -->
<!-- <h1>123</h1> -->
<div class="box b1"></div>
<div class="box b2"></div>
<div class="up"></div>
<div class="down"></div>
<div class="sup">
<div class="sub"></div>
</div>
</body>
</html>
相似body的邊距問題
邊框在默認狀況下會定位於瀏覽器窗口的左上角，可是並無緊貼着瀏覽器的窗口的邊框，這是由於body自己也是一個盒子（外層還有html），在默認狀況下， body距離html會有若干像素的margin，具體數值（chrome裏面是8px）因各個瀏覽器不盡相同，因此body中的盒子不會緊貼瀏覽器窗口的邊框了
reset操做 清除系統默認（不喜歡的）樣式
h類的標籤的reset操做(去除系統默認樣式)
html, body, h1, h2, h3, h4, h5, h6 {
margin: 0
}
邊界圓角
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>邊界圓角</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: orange;
}
.box {
/*邊界圓角*/
/*百分比控制*/
/*border-radius: 50%;*/
/*實際像素控制*/
/*border-radius: 20px;*/
/*橫縱分離 橫 / 縱*/
/*border-radius: 20px / 50%;*/
/*左上爲第一個角, 順時針賦值, 無值找對角*/
/*左上橫30px 右上橫100px 右下橫=左上橫 左下橫=右上橫, 四角縱向全是50%*/
/*border-radius: 30px 100px / 50%;*/
/*單獨設置時, 橫向 縱向*/
/*border-top-left-radius: 50% 100%;
border-top-right-radius: 50% 100%;*/
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
背景樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景樣式</title>
<style type="text/css">
.box, .wrap {
width: 200px;
height: 200px;
background-color: orange;
}
.wrap {
/*圖片過大會顯示不全*/
background-image: url('img/timg.jpg');
/*規定背景圖片顯示尺寸*/
background-size: 200px 200px;
}
.box {
/*圖片太小會平鋪*/
background-image: url('img/123.png');
/*平鋪:repeat-x | repeat-y | repeat | no-repeat*/
background-repeat: no-repeat;
/*位置(定位): 能夠寫具體數值,也能夠寫位置單詞*/
/*background-position: 10px center;*/
/*background-position: right bottom;*/
/*background-position: center center;*/
/*設置一個值時,控制的是x軸,y軸取center*/
/*設置;兩個值時,第一個值控制x,第二個值控制y*/
background-position: 10px 40px;
/*總體設置*/
background: url('img/123.png') red no-repeat 50px 50px;
}
/*注: 實際開發中,資源圖片大小必定要與顯示區域等大*/
</style>
</head>
<body>
<img src="img/123.png" alt="">
<div class="box"></div>
<div class="wrap"></div>
</body>
</html>
精靈圖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>精靈圖</title>
<style type="text/css">
.box {
width: 500px;
height: 100px;
/*height: 300px;*/
border: 5px solid black;
}
.box {
background-image: url('img/bg.png');
background-position: 0 -150px;
}
.box:hover {
cursor: pointer;
background-position: 0 -250px;
}
/*1.顯示區域必定要與精靈圖目標小圖大小一致*/
/*2.經過背景圖片定位方式將目標小圖移至顯示位置*/
</style>
<style type="text/css">
.lt1 {
width: 155px;
height: 48px;
background: url('img/bg.png') no-repeat 0 0;
}
.lt1:hover {
cursor: pointer;
background: url('img/bg.png') no-repeat 0 -48px;
}
</style>
</head>
<body>
<!-- 精靈圖: 各類小圖拼接起來的一張大圖 -->
<!-- 爲何使用精靈圖: 減小請求次數, 下降性能的消耗, 二次加載圖片資源時極爲迅速(不在須要發送請求) -->
<div class="box"></div>
<div class="lt1"></div>
</body>
</html>
盒模型佈局細節
分狀況討論
相鄰元素外邊距合併 兩個相鄰標準流塊級元素，上面元素的margin-bottom邊距會和下面的margin-top邊距合併，若是兩個外邊距全爲正值，合併後的邊外邊距等於margin-bottom邊距和margin-top邊距中最大的那個邊距，這種現象稱爲margin的「塌陷」，即較小的margin塌陷到較大的margin中了。若是兩個外邊距存在負值，合併的外邊距的高度等於這些發生合併的外邊距的和。當和爲負數時，相鄰元素在垂直方向上發生重疊，重疊深度的呢關於外邊距和的絕對值；當和爲0時，兩個塊級元素無縫鏈接，示意圖以下： 包含(父子)元素外邊距合併 當外層元素和內層元素造成父子關係，也稱嵌套關係時，在某些條件下，父子元素外邊距會合並，條件是：當父元素沒有內容或內容在子元素的後面且沒有內邊距或沒有邊框時，子元素的上外邊距將和父元素的上外邊距合併爲一個上外邊距，且爲值最大的那個上外邊距，同時該上外邊距做爲父元素的上外邊距。 示意圖以下：要防止父、子元素的上外邊距合併，只需在子元素前面設置父元素內容或保持父元素內容不變的狀況下添加內邊距或添加邊框。 相鄰盒子之間的水平間距 行內元素是指元素不會獨佔一行，相鄰的行內元素會排列在同一行裏，直到一行排不下才會換行。兩個相鄰元素之間的水平間距等於左邊元素的margin-right+右邊元素的margin-left，若是相加的margin-right和margin-left分別爲正值，則拉開兩元素之間的距離，不然拉近二者之間的距離，若是margin-right+margin-left的和爲0，則兩元素無縫相連；若是和爲負數，則右邊元素重疊在左邊元素上，重疊的深度等於負數的絕對值。 解決方法 overflow: hidden; 重要: 當您指定一個CSS元素的寬度和高度屬性時，你只是設置內容區域的寬度和高度。要知道，徹底大小的元素，你還必須添加填充，邊框和邊距。 margin:10px 5px 15px 20px;-----------上 右 下 左 margin:10px 5px 15px;----------------上 右左 下 margin:10px 5px;---------------------上下 右左 margin:10px; ---------------------上右下左
實例分析
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型佈局細節</title>
<style type="text/css">
.sup {
width: 500px;
height: 100px;
background: orange;
}
.sub {
width: 50px;
height: 50px;
background-color: red;
}
/*sub在sup中 水平居中*/
.sub {
/*margin-left: auto;
margin-right: auto;*/
margin: 0 auto;
}
/*垂直居中*/
.sub {
margin-top: 24px;
}
/*margin坑: 父子聯動*/
/*.box {
width: 1px;
height: 1px;
}*/
/*解決一: 設置border-top*/
.sup {
/*border-top: 1px solid transparent;
height: 99px;*/
}
/*解決二: 設置padding-top*/
.sup {
padding-top: 1px;
height: 99px;
}
/*margin坑: 上兄弟margin-bottom與下兄弟margin-top重合, 取大值*/
/*解決方案: 只設置一個,建議設置下兄弟margin-top*/
/*margin佈局: 下盒子的垂直起始位置決定於同結構中上盒子的margin結束位置;水平起始位置就是父級content最左側*/
</style>
</head>
<body>
<div class="sup">
<!-- <div class="box"></div> -->
<div class="sub"></div>
</div>
</body>
</html>
盒模型小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型案例</title>
<style type="text/css">
/*reset*/
body, h1, ul {
margin: 0;
padding: 0
}
ul {
list-style: none;
}
a {
color: #333;
text-decoration: none;
}
</style>
<style type="text/css">
.main {
width: 1210px;
height: 500px;
background: orange;
margin: 0 auto;
}
.nav {
width: 1210px;
margin: 0 auto;
height: 48px;
}
.nav_a {
/*a標籤就支持寬高,而且能夠嵌套其餘標籤*/
display: block;
height: 48px;
background: red
}
li:first-child .nav_a {
background: blue;
width: 155px;
}
li:nth-child(2) .nav_a {
background: pink;
width: 150px;
margin-left: 155px;
margin-top: -48px;
}
li:nth-child(3) .nav_a {
background: green;
width: 100px;
margin-left: 305px;
margin-top: -48px;
}
</style>
</head>
<body>
<!-- ul.nav>(li>a.nav_a)*7 -->
<ul class="nav">
<li>
<a class="nav_a" href=""></a>
</li>
<li>
<a class="nav_a" href=""></a>
</li>
<li><a class="nav_a" href=""></a></li>
<li><a class="nav_a" href=""></a></li>
<li><a class="nav_a" href=""></a></li>
<li><a class="nav_a" href=""></a></li>
<li><a class="nav_a" href=""></a></li>
</ul>
<div class="main"></div>
</body>
</html>
相關文章
- 1. 【CSS】使用盒模型
- 2. css盒子模型經常使用屬性
- 3. css經常使用屬性總結-盒子模型
- 4. CSS盒子模型淺析
- 5. css盒子模型簡析
- 6. 【WebFrontEnd】詳細分析CSS盒模型
- 7. css常用佈局-居中方法/盒模型/flexbox模型
- 8. CSS盒模型與BFC
- 9. CSS 盒模型與box-sizing
- 10. css盒模型
- 更多相關文章...
- • 使用 CSS 顯示 XML - XML 教程
- • ASP.NET MVC - 模型 - ASP.NET 教程
- • Composer 安裝與使用
- • 常用的分佈式事務解決方案
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 【CSS】使用盒模型
- 2. css盒子模型經常使用屬性
- 3. css經常使用屬性總結-盒子模型
- 4. CSS盒子模型淺析
- 5. css盒子模型簡析
- 6. 【WebFrontEnd】詳細分析CSS盒模型
- 7. css常用佈局-居中方法/盒模型/flexbox模型
- 8. CSS盒模型與BFC
- 9. CSS 盒模型與box-sizing
- 10. css盒模型