css_标准流_浮动_清除浮动_overflow_左右结构的布局_定位_两个css案例_Unit_7;

Topic 1 . 标准流/文档流：

其实就是一个非常常见的现象：由于页面中的所有标签默认状态下都受标准流控制，所以块级标签独占一行，行内标签可以一行共存多个

Topic 2 .浮动：

浮动是一种脱离标准流的形式 -- 半脱离

为什么说浮动是半脱离：

他应该有一下两个原因：

1 . 浮动流是一种半脱离标准流的排版方式，之所以这么说，是因为浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置，跟标准流还是有一定的关系，比如说浮动的元素在浮动之前处于标准流的第二列，那么他浮动之后也是处于浮动流的第二行，不会去找其他行的浮动元素去贴靠；

2 . 浏览器认为设置了浮动的元素不存在，所以会影响到后续的元素，所以浮动脱离标准流叫做半脱离

浮动的属性：

float：left|right|none；

浮动的原理：

浏览器认为设置了浮动的元素不存在，所以会影响到后续的元素，所以浮动脱离标准流叫做半脱离

浮动的作用：

可以让块级标签在一行共存

注意：浮动之后的标签是完全没有间距的左对齐和顶对齐；浮动后的标签显示模式为行内块；

Topic 3 .清除浮动：

由于浮动本事是个半脱离标准流的形式，会影响页面中的其他盒子，想要不受影响，需要清除浮动的影响

方法：添加clear属性，取值如下：

left -- 清除左侧浮动的影响
right -- 清除右侧浮动的影响
both -- 清除两侧浮动的影响

Topic 4 . overflow：

控制超出父级的内容应该怎么显示；

1. 他可以用 overflow ：hidden; 隐藏

2.overflow： auto 添加滚动条；

3.解决外边距合并（塌陷的问题） overflow： hidden；

4.强制检测浮动流：overflow： hidden ；

Topic 5 . 左右结构的布局：

这个左右结构的是基础，以后复杂的页面也是在他的基础上衍生的；

他需要一个标准流的父级加上两个浮动一个浮动流left 一个right；

Topic 6 . 定位：

属性是：position ；

1. 相对定位是： relative

我们可以通过他来改变盒子的位置：

通过设置偏移量属性 = 方向英文

如：position:relative; left:50px; top:100px;

他是参照自己来说的；

他脱离了标准类的形式，但是占据位置，不能改变盒子的显示模式；

2. 绝对定位：

absolute

设置偏移量同上；

默认情况下，参照物是浏览器

注意：绝对定位是完全脱离标准流的形式，且不占位置，会将盒子显示模式变成行内块；当偏移量属性上下冲突的时候，上生效；当左右冲突的时候，左生效

总结：以最近的已经定位的父级为参照物，如果不满足这个条件就以浏览器窗口为参照物定位；

子绝父相 -- 子级绝对定位，父级相对定位 == 子级的定位参照物变成父级

z-index

作用：调整标签的z轴堆叠顺序

z-index取值为整数（负整数、正整数和0） -- 取值越大堆叠顺序越靠上

注意：z-index必须和定位配合使用才能生效

固定定位：

作用是：实现盒子固定到浏览器之上

他的参照物是浏览器：

格式会变成行内块；

Topic 7 . 一个常见的样式：

网页示例：

代码示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>常见显示</title>
<style type="text/css">
	body,div,p,span,a,img,h1,h2,h3,h4,h5,h6,input{padding: 0px; margin: 0px; list-style: none; }
	body{ font-size:16px; font-family: "宋体"; color:#000000; }
	a{color:#0000ee; text-decoration:none; }
	a:hover{text-decoration:underline; }
	.main{width:700px; height:140px; margin:100px auto; background:#f8f0d0; padding:30px; }
	.main h3{color:#b00000; }
	.con{height:80px; text-indent:2em; overflow:auto; }
	.more p{text-align: right; margin-top:15px;}
</style>
</head>

<body>
	<div class="main">
		<h3>VGS</h3>
		<div class="con">
			<p>VGS（Value Growth Solution）解决方案是全新一代MBB智能运营解决方案，帮助运营商将管道流量价值化，把内容和带宽与客户消费需求进行高效和精确的匹配，为终端用户带来超值的业务体验，为运营商实现高效益的流量经营。</p>
			<p>VGS（Value Growth Solution）解决方案是全新一代MBB智能运营解决方案，帮助运营商将管道流量价值化，把内容和带宽与客户消费需求进行高效和精确的匹配，为终端用户带来超值的业务体验，为运营商实现高效益的流量经营。</p>
			<p>VGS（Value Growth Solution）解决方案是全新一代MBB智能运营解决方案，帮助运营商将管道流量价值化，把内容和带宽与客户消费需求进行高效和精确的匹配，为终端用户带来超值的业务体验，为运营商实现高效益的流量经营。</p>
			<p>VGS（Value Growth Solution）解决方案是全新一代MBB智能运营解决方案，帮助运营商将管道流量价值化，把内容和带宽与客户消费需求进行高效和精确的匹配，为终端用户带来超值的业务体验，为运营商实现高效益的流量经营。</p>
			<p>VGS（Value Growth Solution）解决方案是全新一代MBB智能运营解决方案，帮助运营商将管道流量价值化，把内容和带宽与客户消费需求进行高效和精确的匹配，为终端用户带来超值的业务体验，为运营商实现高效益的流量经营。</p>
			<p>VGS（Value Growth Solution）解决方案是全新一代MBB智能运营解决方案，帮助运营商将管道流量价值化，把内容和带宽与客户消费需求进行高效和精确的匹配，为终端用户带来超值的业务体验，为运营商实现高效益的流量经营。</p>
		</div>
		<div class="more">
				<p><a href="#">更多..</a></p>
		</div>
	</div>
</body>
</html>

我们在写网页的时候比较重要的图我们都是插入图来做不重要的那么我们就背景图来做（background：url（）；）；

纯文字分区我们可以用<p> 有文字有图片我们用<div> 来分区；

团购案例：

网页示例如下：

代码示例如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>团购效果</title>
<style type="text/css">
	body,div,img,a,p,span,ul,ol,dl,dd,dt,li,h1,h2,h3,h4,h5,h6,input{padding:0px; margin:0px; list-style: none; }
	body{ font-size:14px ; font-family:"宋体"; color:#3e3e3e; }
	a{ text-decoration: none; color:#3e3e3e; }
	a:hover{text-decoration:underline; color:#3399b2; }
	/*这里的main设置position为相对定位是为了让today以他为边界*/
	.main{width:310px; height:330px; margin:100px auto; border: 1px solid #ccc; position:relative; padding:15px; }
	.today{background:url(top_tu.gif); height:54px; width:60px; position:absolute; left:0px; top:0px; }
	.main h3{margin-top:10px; }
	.price{width:55px; height:30px; }
	.bottom{height:55px; margin-top:30px; color:#aaaaaa; font-size:16px; }
	.left{float: left; }
	.left span{color:#ed5238; font-size:28px; }
	.right{float: right; font-weight: bold}
	.right span{color: #ed5238; }
</style>
</head>
<body>
	<div class="main">
		<a href="#">
			<img src="adv.jpg" width="310" height="190" alt=""/>
		</a>
		
		<span class="today">	
		</span>
		
		<h3>
			<a>【12店通用】领航冰品哈根达斯：冰淇淋双球，口味任选2种，节假通用</a>
		</h3>
		
	  <div class="bottom">
		<p class="left">
			 <span>¥20.8</span> 原价¥38
		</p>
			
		<div class="right">
				<a href="#"><img src="see.jpg" width="80" height="30" alt=""/></a>
				<p><span>32</span>人已购买</p>
		 </div>
	  </div>
	</div>
</body>
</html>