偽對象
概念：就是給元素追加一個虛擬標(biāo)簽，由css加載，可以節(jié)省html的資源開銷，必須有content屬性，默認(rèn)是行元素，可以進(jìn)行轉(zhuǎn)換。
::after:在指定的標(biāo)簽后面添加一個對象
::before:在指定的標(biāo)簽前面添加一個對象
content：元素里面的內(nèi)容（內(nèi)容中不能寫標(biāo)簽）
語法：
元素::after{
content:"";
}
<font color="red">注意：偽對象樣式中，必須有content屬性，否則偽對象無效</font>
多學(xué)一招：官方推薦使用雙冒號，但是通常為了兼容性更好，我們使用單冒號
上面兩個偽對象選擇器需要結(jié)合屬性content一起使用
<style type="text/css">
.box{width:200px;background:#f00;height:300px;}
.box::before{
content:'開頭的內(nèi)容';height:100px;
line-height:100px;color:#fff;background:#00f;
}
.box::after{
content:'這是一個段落';
background-color:green;
display:block;height:50px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
總結(jié)：
1.什么是偽對象？不是實際標(biāo)簽，使用css樣式模擬一個標(biāo)簽
2.元素::after{}/元素::before{}
3.在偽元素樣式中，必須有content屬性
4.偽元素是行元素
布局的三種方式：
1.標(biāo)準(zhǔn)流：按照標(biāo)簽?zāi)J(rèn)的特性擺放盒子
2.浮動流：利用浮動擺放盒子
3.定位流：利用定位擺放盒子
浮動（重點）
浮動最早期做的是圖文繞排
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.news{width:500px;border:1px solid #000;overflow:hidden;}
img{float:left;} /* 浮動，還可以是right */
</style>
</head>
<body>
<div class="news">
環(huán)球網(wǎng)綜合報道】據(jù)日本NHK電視臺8月29日報道，117歲的玻利維亞女性朱麗葉?弗洛雷斯?科爾克(Julia Flores Colque)被認(rèn)為是目前世界上最長壽的老人。這位老人近日邊彈奏弦樂邊唱歌的視頻畫面引起熱議。
<img src="myweb/1.png" alt="" />
科爾克居住在玻利維亞中部的高地上。玻利維亞政府頒發(fā)的出生證明顯示，老人生于1900年10月26日，今年10月她將迎來118歲的生日。除了有些耳背外科爾克身體健康，經(jīng)常彈奏一種叫恰蘭戈的小吉他，用安第斯山特有的奇楚亞語演唱民歌，她終身未婚未育。
</div>
</body>
浮動的語法：
float:left/right /none
取值：left向左浮動，right向右浮動，none取消浮動
現(xiàn)在的浮動，用的最多是讓塊元素在同一行顯示：就是給一行的所有塊元素都加上浮動
浮動的最大價值：讓元素排列成一行，或者一左一右
浮動的使用口訣：
1.要浮動，兄弟元素也一起浮動
2.浮動方向保持一致（盡量都是用左浮動）
總結(jié)：
1.可以做圖文繞排
2.主要讓塊元素排一行，多個元素一起浮動
3.注意加了浮動以后元素的順序，標(biāo)簽順序，浮動方向
4.浮動的元素脫離標(biāo)準(zhǔn)流
1.行元素浮動
行元素浮動，會優(yōu)先于普通元素占據(jù)設(shè)置方向的位置，不會重疊
2.塊元素浮動
塊元素浮動，會脫離頁面原本的文本流（不占據(jù)原本的空間），會覆蓋其他元素
多學(xué)一招：
1.脫離文本流的元素具有行內(nèi)的塊元素的特性（不換行，能設(shè)置寬高），無論原來是行元素還是塊元素--例：圖文繞排。
2.設(shè)置了浮動的元素，居中對元素不起作用
3.浮動元素不會覆蓋文字
4.大盒子放不下了，浮動元素會掉下去，掉下去的元素位置根據(jù)上一個元素的高度：（1）上一個元素高度比較小，在上一個元素的正下方（2）上一個元素高度比較大，高度的起始位置，在上一個元素的下方
總結(jié)：
1.所有元素浮動后都變成了行內(nèi)塊
2.浮動元素不能覆蓋文字
浮動引起的問題：
<style>
/* 浮動的盒子撐不開父容器
解決辦法：強(qiáng)制追加一個高度（不推薦，因為很多時候盒子的高度是會變化的）
*/
.box {
width: 500px;
border: 1px solid #000;
}
.info {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.gebilaowang {
width: 500px;
height: 300px;
background-color: lime;
}
</style>
</head>
<body>
<div class="box">
<div class="info">1</div>
<div class="info">2</div>
<div class="info">3</div>
<div class="info">4</div>
</div>
<div class="gebilaowang"></div>
3.清除浮動
就是清除浮動帶來的影響，普通元素不受浮動元素影響
a： 給父元素設(shè)置高度（不推薦，因為在項目中很多盒子是不固定高度的）
b：在父元素后設(shè)定空標(biāo)簽進(jìn)行清除浮動
語法：clear:both
c： 設(shè)定父元素的overflow
overflow的原理：overflow可以創(chuàng)建一個BFC（塊級格式化上下文 (Block Fromatting Context)），按照塊元素布局，BFC是一個獨立的布局環(huán)境，其中的元素布局是不受外界的影響。說白了就是將盒子內(nèi)部的元素和外部的元素進(jìn)行隔離，互不影響。
d： 使用偽對象代替空標(biāo)簽
陰影
1.文本陰影
語法：text-shadow:橫向偏移 縱向偏移 模糊距離 顏色
2.邊框的陰影
語法：box-shadow: 水平偏移 垂直偏移 模糊距離 陰影尺寸 顏色;
注意：邊框陰影和邊框沒有關(guān)系
細(xì)線表格
語法：border-collapse:collapse;
注意：一定要加在table標(biāo)簽上，且表格和單元格都加邊框?qū)傩?/p>
網(wǎng)站圖標(biāo)和字體圖標(biāo)
1.網(wǎng)站圖標(biāo)
作用：一個好的ico圖標(biāo)可以加深用戶對于網(wǎng)站的記憶。降低用戶記憶成本，就好像現(xiàn)在說道熊爪大家都能夠想到度娘，更多的屬于用戶體驗。有利于識別當(dāng)前窗口是在哪個網(wǎng)站。
制作流程：
（1）一張圖
（2）在網(wǎng)上將圖片做成ico圖標(biāo)（網(wǎng)址：http://www.bitbug.net/）
（3）在html中引入`<link rel="shortcut icon" href="favicon.ico" />`
例：
生成ico圖標(biāo)
在html中使用link標(biāo)簽引入
2.字體圖標(biāo)
圖片是一個選擇，但是圖片不但增加了總文件的大小，還增加了很多額外的"http請求"（服務(wù)器加載資源），這會大大降低網(wǎng)頁的性能。圖片還有一個缺點就是不能很好的進(jìn)行“縮放”，因此，有時候在網(wǎng)站中需要使用圖像的最好解決方案就是不去使用圖片-----而使用字體圖標(biāo)恰恰可以解決這一點。
使用流程：
（1）打開網(wǎng)上的圖標(biāo)庫，網(wǎng)址：http://www.iconfont.cn/，搜索需要的圖標(biāo)，或者打開圖標(biāo)庫
（2）將需要的圖標(biāo)加入購物車
（3）打開購物車添加至自己的項目（沒有的需要自己創(chuàng)建），點擊確定
（4）下載至本地
（5）在html中引入下載好的css文件
（6）在標(biāo)簽中使用（需要兩個類名，一個圖標(biāo)類型，一個圖標(biāo)名稱）
