1关炼、圖片的處理
當(dāng)一個網(wǎng)頁有大量圖片要加載時，可以對圖片進(jìn)行壓縮贸桶，或者采用Js異步處理舅逸，讓一部分圖片先加載，鼠標(biāo)滑動到該處時在加載該處的圖片
2皇筛、怎樣設(shè)置HTML元素是它在瀏覽器中不可見
（1）給它的寬高設(shè)置為0
（2）disply:none
(3)overflow:hidden
(4)visibility:hidden;
3琉历、外邊距重疊問題
（1）當(dāng)兩個相鄰的盒子的外邊距都是正數(shù)時，重疊結(jié)果為兩者之間較大的值
（2）當(dāng)兩個相鄰的盒子的外邊距都是負(fù)數(shù)時水醋，重疊結(jié)果為兩者之間絕對值較大的值
.one{
margin-bottom:-100px;
background:red;
}
.two{
margin-top:40px;
background:blue;
}
藍(lán)色盒子壓了紅色盒子的一半
（3）當(dāng)兩個相鄰的盒子的外邊距一正一負(fù)時旗笔，重疊結(jié)果為兩者相加的值
外邊距重疊
div{
width:200px;
height:200px;
background:red;
}
.one{
margin-bottom:-100px;
}
.two{
margin-top:40px;
background:blue;
}
3、背景
背景設(shè)置 background：
1拄踪、background-color:背景顏色設(shè)置
background:rgb(0-255,0-255,0-255);
三原色設(shè)置
2蝇恶、background-image：url()，url(); 多背景圖片設(shè)置
多個背景惶桐，用,隔開
3艘包、background-repeat:repeat-x|repeat-y|no-repeat 背景平鋪設(shè)置
4的猛、background-position：x,y; 背景定位設(shè)置
background-position:centercenter; ? 讓一張圖片在盒子中完全居中顯示·
background-position:100%center; ?讓圖片靠右
5、background-size:背景尺寸設(shè)置
一般只設(shè)置一個width想虎，保留它的比例
background-size:cover; 覆蓋頁面
background-size:contain;自適應(yīng)（常和position一起用）
4、頁面浮動----float
float:浮動
? ?(1)浮動后會脫離文檔流,往設(shè)置的方向進(jìn)行浮動叛拷，直到遇到父級的邊界或者其他的浮動元素 就會停止舌厨。
（2）浮動的元素?fù)尾婚_父級
float:left、right忿薇、none
設(shè)計之初的作用是用來做文字環(huán)繞
p標(biāo)簽 段落 雙標(biāo)簽 塊級
img標(biāo)簽 圖片標(biāo)簽 單標(biāo)簽 比較特殊裙椭，行級卻可以設(shè)計寬高
alt SEO應(yīng)用--可以用爬蟲爬到，搜索中會用到署浩，當(dāng)圖片沒加載出來時揉燃，Alt文字會顯示
float屬性對塊級元素的影響：
設(shè)置浮動之后，塊級元素的寬度不再跟隨父級寬度筋栋，而是內(nèi)容決定(內(nèi)容撐開寬度)
.div1{
background:red;
float:left;
}
1111
float元素對行級元素的影響：
可以設(shè)置尺寸以及盒模型
.span1{
background:red;
width:200px;
height:200px;
float:left;
}
例：用HTML CSS 實現(xiàn)兩列布局炊汤，一列寬240，一列跟隨瀏覽器自適應(yīng)弊攘，兩列間距10px
div{
height:400px;
}
.one{
width:240px;
background:red;
float:left;
}
.two{
width:240px;
background:red;
float:right;
}
.three{
background:blue;
/*float: left;*/
margin:0px250px;
}
例：用HTML CSS 實現(xiàn)兩列布局,一列固定抢腐，一列歲瀏覽器改變大小
.left{
width:240px;
height:400px;
background:red;
float:left;
}
.right{
height:400px;
background:yellow;
margin-left:250px;
}
*浮動的清除
當(dāng)一個大盒子里有三個盒子且都有float屬性時，它們都脫離了文檔標(biāo)準(zhǔn)流襟交，這時候大盒子就沒有了高度了，這時要清除浮動的影響
.all{
width:600px;
border:4px#000solid;
}
.alldiv{
width:200px;
height:200px;
float:left;
}
.one{
background:red;
}
.two{
background:blue;
}
.three{
background:yellow;
}
一、方法一
給父級盒子設(shè)置高度
.all{
height:400px;
width:600px;
border:4px#000solid;
}
二刹碾、方法二
再父級盒子中琢岩，在浮動的盒子下再放一個一個盒子（這個盒子沒有float屬性）中設(shè)置clear屬性，就可清除浮動
（一般不用這種方法去清除浮動焕梅，因為會增加頁面的標(biāo)簽）
.all{
/*height: 400px;*/
width:600px;
border:4px#000solid;
}
.alldiv{
width:200px;
height:200px;
}
.one{
background:red;
float:left;
}
.two{
background:blue;
float:left;
}
.three{
background:yellow;
float:left;
}
.clear{
clear:both;
}
三迹鹅、方法三
設(shè)置偽元素清除浮動（最常用的清除浮動的方式）
.all{
width:600px;
border:4px#000solid;
}
.alldiv{
width:200px;
height:200px;
}
.one{
background:red;
float:left;
}
.two{
background:blue;
float:left;
}
.three{
background:yellow;
float:left;
}
.clearfix{
/*兼容IE6/7*/
zoom:1;
}
.clearfix::after{
content:"";
display:block;
height:0;
clear:both;
}
四、方法四
使用overflow屬性來清除浮動 ?（一般也不會用這種方法去清除浮動）
.all{
width:600px;
border:4px #000 solid;
overflow:hidden;
}
