前端-CSS（二）
阿新 • • 發佈：2018-12-21
CSS（二）
一、Overflow
作用：Overflow是用於控制內容溢位元素框時顯示的方式。
1-1：OVerflow中的屬性
| 值 | 描述 |
|---|---|
| visible | 預設值。內容不會被修剪，會呈現在元素框之外。 |
| hidden | 內容會被修剪，並且其餘內容是不可見的。 |
| scroll | 內容會被修剪，但是會顯示滾動條以便檢視其餘的內容。 |
| auto | 如果內容被修剪，則會顯示滾動條以便檢視其餘的內容。【scroll是無論什麼時候都有滾動條，auto只有需要修剪時才有】 |
| inherit | 規定應該從父元素繼承 overflow 屬性的值。 |
例子：
<!DOCTYPE html> <html> <head> <title>Overflow</title> </head> <style type="text/css"> .divd{ width: 100px; height: 100px; border:3px solid red; } #div1{ overflow: visible; } #div2{ overflow: hidden; } #div3{ overflow: scroll; } #div4{ overflow: auto; } #div6{ width: 50px; height: 50px; border:3px solid red; overflow: auto; } #div7{ background-color: green; overflow: inherit; } </style> <body> <div id="div1" class="divd"> visible 預設值； visible 預設值； 內容不會被修剪，會呈現在元素框之外 </div> <br/> <br/> <br/> <div id="div2" class="divd"> hidden hidden hidden hidden 內容被修剪；其餘內容看不到 </div> <br/> <br/> <br/> <div id="div3" class="divd"> scroll scroll scroll scroll 內容被修剪；瀏覽器會出現滾動條以便檢視其餘內容 </div> <br/> <br/> <div id="div4" class="divd"> auto auto auto auto 如果內容被修剪，則有滾動條 </div> <br/> <br/> <div id="div6" > <div id="div7" class="divd"> inherit是繼承父元素的Overflow </div> </div> </body> </html>
二、float浮動
2-1：概念
float會使元素向左右移動而不能上下移動。
2-2：方法:
屬性名：float；
| 值 | 描述 |
|---|---|
| left | 元素向左浮動。 |
| right | 元素向右浮動。 |
| none | 預設值。元素不浮動，並會顯示在其在文字中出現的位置。 |
| inherit | 規定應該從父元素繼承 float 屬性的值。 |
浮動元素的影響：
- 一個浮動元素會盡量向左或者向右移動，知道它的外邊緣到包含框或另一個浮動框的邊框為止。
- 對浮動元素之前的元素：不受到影響
- 對浮動元素之後的元素：將圍繞它。
- 浮動元素脫離標準文件流
例子：
<!DOCTYPE html>
<html>
<head>
<title>float浮動</title>
</head>
<style type="text/css">
.divd{
width: 100px;
height: 100px;
border:3px solid red;
margin: 5px;
float: right;
}
.child4{
width: 30px;
height: 30px;
border:1px solid green;
margin: 2px;
background-color: blue;
/*用於演示前面的元素不受影響*/
}
.child5{
width: 30px;
height: 30px;
border:1px solid green;
margin: 2px;
background-color: blue;
/*繼承父元素的float屬性*/
float: inherit;
}
.child3{
width: 30px;
height: 30px;
border:1px solid green;
margin: 2px;
background-color: blue;
/*用於演示後面的元素受影響*/
}
</style>
<body>
<div class="divd">
div1
</div>
<div class="divd">
div2
</div>
<div class="divd">
<div class="child3">2</div>
<div>後面元素受影響</div>
</div>
<div class="divd">
<div>前面元素不受影響</div>
<div class="child4">2</div>
</div>
<div class="divd">
<div class="child5">d51</div>
<div class="child5">2</div>
</div>
</body>
</html>
2-3：清除浮動(clear)
| 值 | 描述 |
|---|---|
| left | 在左側不允許浮動元素。 |
| right | 在右側不允許浮動元素。 |
| both | 在左右兩側均不允許浮動元素。 |
| none | 預設值。允許浮動元素出現在兩側。 |
| inherit | 規定應該從父元素繼承 clear 屬性的值。 |
<!DOCTYPE html>
<html>
<head>
<title>float浮動</title>
</head>
<style type="text/css">
.divd{
width: 100px;
height: 100px;
border:3px solid red;
margin: 5px;
float: left;
}
#tt{
clear:both;
}
</style>
<body>
<div class="divd">
div1
</div>
<div class="divd">
div1
</div>
<div class="divd">
div1
</div>
<div class="divd">
div1
</div>
<div class="divd">
div1
</div>
<h1 id="tt">第二行</h1>
<div class="divd">
div1
</div><div class="divd">
div1
</div><div class="divd">
div1
</div><div class="divd">
div1
</div><div class="divd">
div1
</div><div class="divd">
div1
</div>
</body>
</html>
三、偽類
3-1概念
CSS偽類是用來新增一些選擇器的特殊效果。
3-2語法
選擇器:偽類{key:value;....key:value;}
選擇器.CSS類：偽類{........................}
<!DOCTYPE html>
<html>
<head>
<title>對其</title>
</head>
<style type="text/css">
a:hover{
/*偽類的使用*/
color: green;
}
a.aaa:hover{
/*偽類和CSS類一起使用*/
color: yellow;
}
</style>
<body>
<a href="www.baidu.com">測試</p>
<a class="aaa" href="www.baidu.com">測試</p>
</body>
</html>3-3：所有CSS偽類/元素（此表格來源於菜鳥教程）
| 選擇器 | 示例 | 示例說明 |
|---|---|---|
| :checked | input:checked | 選擇所有選中的表單元素 |
| :disabled | input:disabled | 選擇所有禁用的表單元素 |
| :empty | p:empty | 選擇所有沒有子元素的p元素 |
| :enabled | input:enabled | 選擇所有啟用的表單元素 |
| :first-of-type | p:first-of-type | 選擇每個父元素是p元素的第一個p子元素 |
| :in-range | input:in-range | 選擇元素指定範圍內的值 |
| :invalid | input:invalid | 選擇所有無效的元素 |
| :last-child | p:last-child | 選擇所有p元素的最後一個子元素 |
| :last-of-type | p:last-of-type | 選擇每個p元素是其母元素的最後一個p元素 |
| :not(selector) | :not(p) | 選擇所有p以外的元素 |
| :nth-child(n) | p:nth-child(2) | 選擇所有 p 元素的父元素的第二個子元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 選擇所有p元素倒數的第二個子元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 選擇所有p元素倒數的第二個為p的子元素 |
| :nth-of-type(n) | p:nth-of-type(2) | 選擇所有p元素第二個為p的子元素 |
| :only-of-type | p:only-of-type | 選擇所有僅有一個子元素為p的元素 |
| :only-child | p:only-child | 選擇所有僅有一個子元素的p元素 |
| :optional | input:optional | 選擇沒有"required"的元素屬性 |
| :out-of-range | input:out-of-range | 選擇指定範圍以外的值的元素屬性 |
| :read-only | input:read-only | 選擇只讀屬性的元素屬性 |
| :read-write | input:read-write | 選擇沒有隻讀屬性的元素屬性 |
| :required | input:required | 選擇有"required"屬性指定的元素屬性 |
| :root | root | 選擇文件的根元素 |
| :target | #news:target | 選擇當前活動#news元素(點選URL包含錨的名字) |
| :valid | input:valid | 選擇所有有效值的屬性 |
| :link | a:link | 選擇所有未訪問連結 |
| :visited | a:visited | 選擇所有訪問過的連結 |
| :active | a:active | 選擇正在活動連結 |
| :hover | a:hover | 把滑鼠放在連結上的狀態 |
| :focus | input:focus | 選擇元素輸入後具有焦點 |
| :first-letter | p:first-letter | 選擇每個<p> 元素的第一個字母 |
| :first-line | p:first-line | 選擇每個<p> 元素的第一行 |
| :first-child | p:first-child | 選擇器匹配屬於任意元素的第一個子元素的 <p> 元素 |
| :before | p:before | 在每個<p>元素之前插入內容 |
| :after | p:after | 在每個<p>元素之後插入內容 |
| :lang(language) | p:lang(it) | 為<p>元素的lang屬性選擇一個開始值 |