前言

提示：這是我在專業培訓機構學習的第二周，感覺學習進度好像有一點點慢，不過也還好，能讓我們更好的消化消化，今天也是先做完了作業來整理一下一周過去發現自己在之前學習中沒有記牢的知識，如果個人理解有錯誤，還希望各位指出，

提示：以下是本篇文章正文內容，下面案例可供參考

一、關于浮動

浮動最開始出現的意義是為了讓文字可以圍繞圖片，而不被圖片遮擋，而且浮動元素永遠都會排在同一水平行，我們看到的換行是因為這一水平行是有寬度的，如果沒有寬度，浮動元素永遠不會換行，浮動元素不是行內元素也不是塊元素，浮動元素脫離了頁面，清除浮動會使浮動元素回到檔案中，

 <div class="body">
	 <div class="leftmeau"></div>
	 <div class="rightmeau"></div>
 	 <div class="content"></div>
	 <div class="clear"></div>
 </div>

代碼如下（示例）：

.leftmeau{
	float:left;
	}
.rightmeau{
	float:right;
	}

清除浮動代碼如下（示例）：

（1）在浮動元素后面加一個空元素，

.clear{
	clear:both;
}

（2）利用父元素的偽元素

.body::after{
	content: "";
	display: block;
	clear: both;
}

二.關于定位

之前學習，包括前面一周做一些不大的版塊的時候，特別喜歡使用定位，后面老師說了一些定位的問題，當網頁縮小或者變大的時候，網頁的布局就會崩掉，最近開始嘗試使用float，margin，padding去改變元素的位置，

而且之前自己做的時候，z-index（堆疊順序）有很多時候都不生效，現在才知道原來堆疊順序只能作用在定位元素上，這里有關于z-index不生效的原因較為詳細的解答，

三.關于精靈圖

精靈圖也稱作雪碧圖，其實是一個使用起來很簡單的操作，但是我之前并不知道精靈圖能加快加載速度的原理，是因為當我們向服務器發送請求時，每多一個圖片，就會多發送一次請求，當我們把一個頁面中的一些圖放在一起時，這樣就會減少很多請求，從而加快頁面的加載速度，通過background-image加載精靈圖，通過background-position找到對應需求圖片的坐標并加載，

 background-image: url("  "); 
 background-position-x: -100px;
 background-position-y: -30px;

四.關于布局

關于布局我把他分為幾種：
一.雙欄布局：
1.首先有兩個div在版心內

<div class="wrap">
	<div class="centent">centent</div>
	<div class="leftmeau">leftmeau</div>
</div>

2.把左邊欄設定浮動，再一個寬度x，然后把第二個div設定一個margin

.leftmeau{
	float: left;
	width: 200px;
	background-color: #00FFFF;
}
.centent{
	margin-left: 200px;
	background-color: #3CB371;
}

3.當然不要忘了把浮動清除！！
二.三欄布局
其實理解了雙欄布局就很好理解三欄布局了直接上代碼~

		<div class="warp">
			<div class="leftmeau"><h2>leftmeau</h2></div>
			<div class="rightmeau"><h2>rightmeau</h2></div>
			<div class="body"><h1>body</h1><h1>body</h1><h1>body</h1><h1>body</h1></div>
		</div>
		<style type="text/css">
			*{
				margin: 0;padding: 0;
			}
			.warp{
				width: 1050px;
				margin: 0 auto;
				background-color: #3CB371;
			}
			.wrap::after{
				content: "";
				display: block;
				clear: both;
				height: 0;
				visibility: hidden;
			}
			.leftmeau{
				width: 200px;
				background-color: #2389B4;
				float: left;
			}
			.rightmeau{
				width: 200px;
				background-color: #2389B4;
				float: right;
			}
			.body{
				margin-left: 200px;
				margin-right: 200px;
				background-color: #EBB425;
			}

三.串列布局
關于串列布局我是這么理解的：
1.一般的排版布局，都需要一個通欄，一個版心，版心內容如果用串列布局來做的話，就是ul,li的思想，直接上代碼，然后根據代碼來講每部分的意義，

  <style>
        *{ margin: 0; padding: 0; list-style: none; }
        .news li{
            float: left;
            width: 25%;
         }
          .news-layer{
            margin: 10px 10px;
            background: #f66;
        }
 </style>
    <ul class="news">
      	<li><div class="news-layer">標題1</div></li>
        <li><div class="news-layer">標題2</div></li>
        <li><div class="news-layer">標題3</div></li>
        <li><div class="news-layer">標題4</div></li>
        <li><div class="news-layer">標題5</div></li>
        <li><div class="news-layer">標題6</div></li>
        <li><div class="news-layer">標題7</div></li>
        <li><div class="news-layer">標題8</div></li>
    </ul>

這里本來應該還有一個通欄和版心
通欄大都是為了設定背景色
而版心是為了框住內容，讓整個網頁看起來更好看，
版心下來就是一個ul+li的結構，ul的作用在我看來更多有一個position：relative，這個是為了給li展開的隱藏元素一個參照物，后面做左邊欄和上導航時候的時候用，
li的作用則是給一個浮動和寬度
li里面的div就是給內容設定樣式的一個盒子

總結

好像把很多都總結了，也不全都是我沒有記住的知識點，把他們都寫下來，希望能讓我記住更久，雖然很基礎，如果能幫助到其他人也很好了，