CSS?分組?和?嵌套?選擇器
分組選擇器
在樣式表中有很多具有相同樣式的元素。
h1{????color:green;}h2{????color:green;}p{????color:green;}
為了盡量減少代碼，你可以使用分組選擇器。每個(gè)選擇器用逗號分隔。
在下面的例子中，我們對以上代碼使用分組選擇器：
h1,h2,p{? ? color:green;}
嵌套選擇器
它可能適用于選擇器內(nèi)部的選擇器的樣式。
在下面的例子設(shè)置了三個(gè)樣式：
????????p{ }: 為所有?p?元素指定一個(gè)樣式。
????????.marked{ }: 為所有?class="marked"?的元素指定一個(gè)樣式。
????????.marked p{ }: 為所有?class="marked"?元素內(nèi)的?p?元素指定一個(gè)樣式。
? ? ? ? p.marked{ }: 為所有?class="marked"?的?p?元素指定一個(gè)樣式。
p{ color:blue;text-align:center;}
.marked{? ? background-color:red;}
.marked p{? ? color:white;}
p.marked{? ? text-decoration:underline;}
CSS?尺寸 (Dimension)
所有CSS 尺寸 (Dimension)屬性
height????????????????????設(shè)置元素的高度。
line-height????????????設(shè)置行高。
max-height????????????設(shè)置元素的最大高度。
max-width????????????設(shè)置元素的最大寬度。
min-height????????????設(shè)置元素的最小高度。
min-width????????????????設(shè)置元素的最小寬度。
width????????????????????????設(shè)置元素的寬度。
CSS?Display(顯示)?與?Visibility（可見性）
display屬性設(shè)置一個(gè)元素應(yīng)如何顯示，visibility屬性指定一個(gè)元素應(yīng)可見還是隱藏。
隱藏元素 - display:none或visibility:hidden
隱藏一個(gè)元素可以通過把display屬性設(shè)置為"none"，或把visibility屬性設(shè)置為"hidden"。但是請注意，這兩種方法會(huì)產(chǎn)生不同的結(jié)果。
visibility:hidden可以隱藏某個(gè)元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會(huì)影響布局。
h1.hidden {visibility:hidden;}
display:none可以隱藏某個(gè)元素，且隱藏的元素不會(huì)占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會(huì)從頁面布局中消失。
h1.hidden {display:none;}
CSS Display - 塊和內(nèi)聯(lián)元素
塊元素是一個(gè)元素，占用了全部寬度，在前后都是換行符。
塊元素的例子：
<h1>
<p>
<div>
內(nèi)聯(lián)元素只需要必要的寬度，不強(qiáng)制換行。
內(nèi)聯(lián)元素的例子：
<span>
<a>
如何改變一個(gè)元素顯示
可以更改內(nèi)聯(lián)元素和塊元素，反之亦然，可以使頁面看起來是以一種特定的方式組合，并仍然遵循web標(biāo)準(zhǔn)。
下面的示例把列表項(xiàng)顯示為內(nèi)聯(lián)元素：
li {display:inline;}
下面的示例把span元素作為塊元素：
span {display:block;}
注意：變更元素的顯示類型看該元素是如何顯示，它是什么樣的元素。例如：一個(gè)內(nèi)聯(lián)元素設(shè)置為display:block是不允許有它內(nèi)部的嵌套塊元素。
CSS?Position(定位)
position 屬性指定了元素的定位類型。
position 屬性的五個(gè)值：
元素可以使用的頂部，底部，左側(cè)和右側(cè)屬性定位。然而，這些屬性無法工作，除非是先設(shè)定position屬性。他們也有不同的工作方式，這取決于定位方法。
static 定位
HTML 元素的默認(rèn)值，即沒有定位，遵循正常的文檔流對象。
靜態(tài)定位的元素不會(huì)受到 top, bottom, left, right影響。
div.static { position: static;
? ? border: 3px solid #73AD21;}
fixed 定位
元素的位置相對于瀏覽器窗口是固定位置。
即使窗口是滾動(dòng)的它也不會(huì)移動(dòng)：
p.pos_fixed{ position:fixed;
? ? top:30px;
? ? right:5px;}
注意：?Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。
Fixed定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。
Fixed定位的元素和其他元素重疊。
relative 定位
相對定位元素的定位是相對其正常位置。
h2.pos_left{ position:relative;
? ? left:-20px;}
h2.pos_right{? ? position:relative;
? ? left:20px;}
absolute 定位
絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于<html>:
h2{ position:absolute;
? ? left:100px;
? ? top:150px;}
sticky 定位
sticky 英文字面意思是粘，粘貼，所以可以把它稱之為粘性定位。
position: sticky;?基于用戶的滾動(dòng)位置來定位。
粘性定位的元素是依賴于用戶的滾動(dòng)，在?position:relative?與?position:fixed?定位之間切換。
它的行為就像?position:relative;?而當(dāng)頁面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像?position:fixed;，它會(huì)固定在目標(biāo)位置。
元素定位表現(xiàn)為在跨越特定閾值前為相對定位，之后為固定定位。
這個(gè)特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個(gè)閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。
注意:?Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下實(shí)例)。
div.sticky { position: -webkit-sticky; /* Safari */ position: sticky;
? ? top: 0;
? ? background-color: green;
? ? border: 2px solid #4CAF50;}
重疊的元素
元素的定位與文檔流無關(guān)，所以它們可以覆蓋頁面上的其它元素
z-index屬性指定了一個(gè)元素的堆疊順序（哪個(gè)元素應(yīng)該放在前面，或后面）
一個(gè)元素可以有正數(shù)或負(fù)數(shù)的堆疊順序：
img{ position:absolute;
? ? left:0px;
? ? top:0px;
? ? z-index:-1;}
CSS 布局 - Overflow
CSS overflow 屬性用于控制內(nèi)容溢出元素框時(shí)顯示的方式。
CSS Overflow
CSS overflow 屬性可以控制內(nèi)容溢出元素框時(shí)在對應(yīng)的元素區(qū)間內(nèi)添加滾動(dòng)條。
overflow屬性有以下值：
visible????????????默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。
hidden????????????內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。
scroll????????????????內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
auto????????????????????如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
inherit????????????????規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。
overflow: visible
默認(rèn)情況下，overflow 的值為 visible， 意思是內(nèi)容溢出元素框：
div { width: 200px;
? ? height: 50px;
? ? background-color: #eee;
? ? overflow: visible;}
CSS?Float(浮動(dòng))
什么是 CSS Float（浮動(dòng)）？
CSS 的 Float（浮動(dòng)），會(huì)使元素向左或向右移動(dòng)，其周圍的元素也會(huì)重新排列。
Float（浮動(dòng)），往往是用于圖像，但它在布局時(shí)一樣非常有用。
元素怎樣浮動(dòng)
元素的水平方向浮動(dòng)，意味著元素只能左右移動(dòng)而不能上下移動(dòng)。
一個(gè)浮動(dòng)元素會(huì)盡量向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>
浮動(dòng)元素之后的元素將圍繞它。
浮動(dòng)元素之前的元素將不會(huì)受到影響。
如果圖像是右浮動(dòng)，下面的文本流將環(huán)繞在它左邊：
img{ float:right;}
彼此相鄰的浮動(dòng)元素
如果你把幾個(gè)浮動(dòng)的元素放到一起，如果有空間的話，它們將彼此相鄰。
在這里，我們對圖片廊使用 float 屬性
.thumbnail { float:left;
? ? width:110px;
? ? height:90px;
? ? margin:5px;}
清除浮動(dòng) - 使用 clear
元素浮動(dòng)之后，周圍的元素會(huì)重新排列，為了避免這種情況，使用 clear 屬性。
clear 屬性指定元素兩側(cè)不能出現(xiàn)浮動(dòng)元素。
使用 clear 屬性往文本中添加圖片廊：
.text_line{ clear:both;}
CSS 布局 - 水平 & 垂直對齊
元素居中對齊
要水平居中對齊一個(gè)元素(如
設(shè)置到元素的寬度將防止它溢出到容器的邊緣。
元素通過指定寬度，并將兩邊的空外邊距平均分配：
.center { margin: auto;
? ? width: 50%;
? ? border: 3px solid green;
? ? padding: 10px;}
注意:?如果沒有設(shè)置?width?屬性(或者設(shè)置 100%)，居中對齊將不起作用。
文本居中對齊
如果僅僅是為了文本在元素內(nèi)居中對齊，可以使用?text-align: center;
.center { text-align: center;
? ? border: 3px solid green;}
圖片居中對齊
要讓圖片居中對齊, 可以使用?margin: auto;?并將它放到?塊?元素中:
img { display: block;
? ? margin: auto;
? ? width: 40%;}
左右對齊 - 使用定位方式
我們可以使用?position: absolute;?屬性來對齊元素:
.right { position: absolute;
? ? right: 0px;
? ? width: 300px;
? ? border: 3px solid #73AD21;
? ? padding: 10px;}
注釋：絕對定位元素會(huì)被從正常流中刪除，并且能夠交疊元素。
提示:?當(dāng)使用?position?來對齊元素時(shí), 通常?<body>?元素會(huì)設(shè)置?margin?和?padding?。 這樣可以避免在不同的瀏覽器中出現(xiàn)可見的差異。
當(dāng)使用 position 屬性時(shí)，IE8 以及更早的版本存在一個(gè)問題。如果容器元素（在我們的案例中是 <div class="container">）設(shè)置了指定的寬度，并且省略了 !DOCTYPE 聲明，那么 IE8 以及更早的版本會(huì)在右側(cè)增加 17px 的外邊距。這似乎是為滾動(dòng)條預(yù)留的空間。當(dāng)使用 position 屬性時(shí)，請始終設(shè)置 !DOCTYPE 聲明：
左右對齊 - 使用 float 方式
我們也可以使用?float?屬性來對齊元素:
.right { float: right;
? ? width: 300px;
? ? border: 3px solid #73AD21;
? ? padding: 10px;}
當(dāng)像這樣對齊元素時(shí)，對 <body> 元素的外邊距和內(nèi)邊距進(jìn)行預(yù)定義是一個(gè)好主意。這樣可以避免在不同的瀏覽器中出現(xiàn)可見的差異。
注意：如果子元素的高度大于父元素，且子元素設(shè)置了浮動(dòng)，那么子元素將溢出，這時(shí)候你可以使用 "clearfix(清除浮動(dòng))" 來解決該問題。
我們可以在父元素上添加 overflow: auto; 來解決子元素溢出的問題:
.clearfix { overflow: auto;}
當(dāng)使用 float 屬性時(shí)，IE8 以及更早的版本存在一個(gè)問題。如果省略 !DOCTYPE 聲明，那么 IE8 以及更早的版本會(huì)在右側(cè)增加 17px 的外邊距。這似乎是為滾動(dòng)條預(yù)留的空間。當(dāng)使用 float 屬性時(shí)，請始終設(shè)置 !DOCTYPE 聲明：
body { margin: 0;
? ? padding: 0;}?
.right {? ? float: right;
? ? width: 300px;
? ? background-color: #b0e0e6;}
垂直居中對齊 - 使用 padding
CSS 中有很多方式可以實(shí)現(xiàn)垂直居中對齊。 一個(gè)簡單的方式就是頭部頂部使用?padding:
.center { padding: 70px 0;
? ? border: 3px solid green;}
如果要水平和垂直都居中，可以使用?padding?和?text-align: center:
.center { padding: 70px 0;
? ? border: 3px solid green;
? ? text-align: center;}
垂直居中 - 使用 line-height
.center { line-height: 200px;
? ? height: 200px;
? ? border: 3px solid green;
? ? text-align: center;}
/* 如果文本有多行，添加以下代碼: */
.center p {? ? line-height: 1.5;
? ? display: inline-block;
? ? vertical-align: middle;}
垂直居中 - 使用 position 和 transform
除了使用?padding?和?line-height?屬性外,我們還可以使用?transform?屬性來設(shè)置垂直居中:
.center {
? ? height: 200px;
? ? position: relative;
? ? border: 3px solid green; }?
.center p {? ? margin: 0;
? ? position: absolute;
? ? top: 50%;
? ? left: 50%;
? ? transform: translate(-50%, -50%);}
