偽對象
概念：就是給元素追加一個虛擬標簽漩勤，由css加載，可以節(jié)省html的資源開銷淌实，必須有content屬性冻辩，默認是行元素，可以進行轉(zhuǎn)換拆祈。
::after:在指定的標簽后面添加一個對象
::before:在指定的標簽前面添加一個對象
content：元素里面的內(nèi)容（內(nèi)容中不能寫標簽）
語法：
元素::after{
content:"";
}
<font color="red">注意：偽對象樣式中微猖，必須有content屬性，否則偽對象無效</font>
多學一招：官方推薦使用雙冒號缘屹，但是通常為了兼容性更好凛剥，我們使用單冒號
上面兩個偽對象選擇器需要結(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.什么是偽對象？不是實際標簽轻姿，使用css樣式模擬一個標簽
2.元素::after{}/元素::before{}
3.在偽元素樣式中犁珠，必須有content屬性
4.偽元素是行元素
布局的三種方式：
1.標準流：按照標簽默認的特性擺放盒子
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)被認為是目前世界上最長壽的老人犁享。這位老人近日邊彈奏弦樂邊唱歌的視頻畫面引起熱議。
<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.注意加了浮動以后元素的順序捧颅，標簽順序，浮動方向
4.浮動的元素脫離標準流
1.行元素浮動
行元素浮動较雕，會優(yōu)先于普通元素占據(jù)設(shè)置方向的位置碉哑，不會重疊
2.塊元素浮動
塊元素浮動，會脫離頁面原本的文本流（不占據(jù)原本的空間）郎笆，會覆蓋其他元素
多學一招：
1.脫離文本流的元素具有行內(nèi)的塊元素的特性（不換行谭梗，能設(shè)置寬高）忘晤，無論原來是行元素還是塊元素--例：圖文繞排宛蚓。
2.設(shè)置了浮動的元素，居中對元素不起作用
3.浮動元素不會覆蓋文字
4.大盒子放不下了设塔，浮動元素會掉下去凄吏，掉下去的元素位置根據(jù)上一個元素的高度：（1）上一個元素高度比較小，在上一個元素的正下方（2）上一個元素高度比較大闰蛔，高度的起始位置痕钢，在上一個元素的下方
總結(jié)：
1.所有元素浮動后都變成了行內(nèi)塊
2.浮動元素不能覆蓋文字
浮動引起的問題：
<style>
/* 浮動的盒子撐不開父容器
解決辦法：強制追加一個高度（不推薦，因為很多時候盒子的高度是會變化的）
*/
.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è)定空標簽進行清除浮動
語法：clear:both
c： 設(shè)定父元素的overflow
overflow的原理：overflow可以創(chuàng)建一個BFC（塊級格式化上下文 (Block Fromatting Context)），按照塊元素布局例诀，BFC是一個獨立的布局環(huán)境随抠，其中的元素布局是不受外界的影響。說白了就是將盒子內(nèi)部的元素和外部的元素進行隔離繁涂，互不影響拱她。
d： 使用偽對象代替空標簽
陰影
1.文本陰影
語法：text-shadow:橫向偏移 縱向偏移 模糊距離 顏色
2.邊框的陰影
語法：box-shadow: 水平偏移 垂直偏移 模糊距離 陰影尺寸 顏色;
注意：邊框陰影和邊框沒有關(guān)系
細線表格
語法：border-collapse:collapse;
注意：一定要加在table標簽上，且表格和單元格都加邊框?qū)傩?/p>
網(wǎng)站圖標和字體圖標
1.網(wǎng)站圖標
作用：一個好的ico圖標可以加深用戶對于網(wǎng)站的記憶扔罪。降低用戶記憶成本秉沼，就好像現(xiàn)在說道熊爪大家都能夠想到度娘，更多的屬于用戶體驗矿酵。有利于識別當前窗口是在哪個網(wǎng)站唬复。
制作流程：
（1）一張圖
（2）在網(wǎng)上將圖片做成ico圖標（網(wǎng)址：http://www.bitbug.net/）
（3）在html中引入`<link rel="shortcut icon" href="favicon.ico" />`
例：
生成ico圖標
在html中使用link標簽引入
2.字體圖標
圖片是一個選擇，但是圖片不但增加了總文件的大小全肮，還增加了很多額外的"http請求"（服務器加載資源）盅抚，這會大大降低網(wǎng)頁的性能。圖片還有一個缺點就是不能很好的進行“縮放”倔矾，因此妄均，有時候在網(wǎng)站中需要使用圖像的最好解決方案就是不去使用圖片-----而使用字體圖標恰恰可以解決這一點柱锹。
使用流程：
（1）打開網(wǎng)上的圖標庫，網(wǎng)址：http://www.iconfont.cn/丰包，搜索需要的圖標禁熏，或者打開圖標庫
（2）將需要的圖標加入購物車
（3）打開購物車添加至自己的項目（沒有的需要自己創(chuàng)建），點擊確定
（4）下載至本地
（5）在html中引入下載好的css文件
（6）在標簽中使用（需要兩個類名邑彪，一個圖標類型瞧毙，一個圖標名稱）
