认真学习前端第二周学习笔记（浮动，定位，精灵图，布局）

---

前言

提示：这是我在专业培训机构学习的第二周，感觉学习进度好像有一点点慢，不过也还好，能让我们更好的消化消化，今天也是先做完了作业来整理一下一周过去发现自己在之前学习中没有记牢的知识，如果个人理解有错误，还希望各位指出。

---

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

一、关于浮动

浮动最开始出现的意义是为了让文字可以围绕图片，而不被图片遮挡。而且浮动元素永远都会排在同一水平行，我们看到的换行是因为这一水平行是有宽度的，如果没有宽度，浮动元素永远不会换行，浮动元素不是行内元素也不是块元素，浮动元素脱离了页面，清除浮动会使浮动元素回到文档中。

 <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就是给内容设置样式的一个盒子

总结

好像把很多都总结了，也不全都是我没有记住的知识点，把他们都写下来，希望能让我记住更久，虽然很基础，如果能帮助到其他人也很好了。