前端——CSS2

一，盒子模型

盒子模型

        每个标签都象是个盒子，网页布局本质就是摆放盒子
         

每个盒子又分为4个区域
            内容区：存放内容的区域
            内边距：内容区到边界的距离
            边框：标签的最外层
            外边距：一个标签距离另一个标签之间的距离

注意：

• 如果没有为标签设置内边距和边框，则内容区大小 默认和盒子大小是一致的。
• width和height属性适用于块标签。

1.内容区

width，height：不是设置标签总大小，当标签没有内边距和边框时，内容区大小才可以认为就是标签的大小，标签中的内容都放在内容区中

2.内边距

这设置内边距

• padding-top: 20px;上
• padding-bottom: 20px;下
• padding-left: 20px;左
• padding-right: 20px;右
• padding：10px 20px 30px 40px；上 右 下 左 
• padding：10px 20px；上下 左右
• padding：10px ；全部

 3.边框

在标签周围创建边框，边框时标签可见狂的最外部

使用border属性来设置盒子的边框可以在标签周围创建边框，边框是标签可见框的最外部。

可以使用border属性来设置盒子的边框：

border:1px red solid;

上边的样式分别指定了边框的宽度、颜色和样式。

也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框。

边框可以设置样式：

dotted （点线） dashed （虚线） solid （实线） double （双线）groove （槽线）

border-radius设置四个角为圆角边框

border-top-left-radius设置左上为圆角边框

4.外边距

外边距是标签边框与周围标签相距的空间。 使用margin属性可以设置外边距。用法和padding类似，同样也提供了四个方向的 。

margin-top/right/bottom/left。

margin的值可以为负值。

margin的值还可以auto，设置外边距为最大值，当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等.

垂直设置为auto时值为0，所以水平居中也可以简写为margin:0 auto。

外边距不会影响盒子的整体大小，但是会影响盒子的位置，会影响盒子的实际控制范围。

5.清除浏览器的默认样式

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的标签都设置了一些默认的 margin 和 padding ，而它的这些默认样式，正常情况下我们是不需要使用的。

所以我们往往在编写样式之前需要将浏览器中的默认的 margin 和 padding 统统的去掉。

*{
margin: 0;
padding: 0;
}

使用通配选择器原因：优先级别最低，很容易被覆盖

二，文档流

文档流指的是文档中的标签在排列时所占用的位置。 将窗体自上而下分成一行行 ，并在每行中按从左至右的顺序排放标签，即为文档流。

也就是说在文档流中标签默认会紧贴到上一个标签的右边，如果右边不足以放下标签，标签则会另起一行，在新的一行中继 续从左至右摆放。

这样一来每一个块标签都会另起一行，那么我们如果想在文档 流中进行布局就会变得比较麻烦。

三，浮动

所谓浮动指的是使标签脱离原来的文档流，在父标签中浮动起来。

浮动使用 float 属性。

可选值：

none ：不浮动

left ：向左浮动

right ：向右浮动

当一个块级标签浮动以后，宽度会默认是内容的宽度，所以当漂浮一个块级标签时我们 都会为其指定一个宽度。

当一个标签浮动以后，其下方的标签会上移。

浮动会使标签完全脱离文档流，也就是不再在文档中在占用位置标签浮动以后即完全脱离文档流 , 这时不会再影响父标签的高度 , 也就是浮动标签不会撑开父标签。

标签浮动后会带来影响

浮动后的标签,不占用原来文档流的空间,即使添加了父标签,父标签也不会被撑开,其高度为0,会影响后面的标签布局

清除浮动

clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。

可选值：

left ： 忽略左侧浮动

right ：忽略右侧浮动

both ：忽略全部浮动

使用样例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.main_box{
				background-color: aqua;
				width: 1000px;
				height: 600px;
				margin: 0px auto;
			}
			.main_box_left,.main_box_center,.main_box_right{
				padding: 20px;
				height: 360px;
				float: left;
			}
			.main_box_left{
				width: 260px;
				background-color: antiquewhite;
			}
			.main_box_center{
				width: 360px;
				background-color: aqua;
			}
			.main_box_right{
				width: 260px;
				background-color: black;
			}
			.main_box_bottom{
				width: 1000ppx;
				height: 200px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="main_box">
			<div class="main_box_left">左</div>
			<div class="main_box_center">中</div>
			<div class="main_box_right">右</div>
			<div style="clear: left;"><!-- 清除浮动 -->
			<div class="main_box_bottom">下</div>
		</div>
	</body>
</html>

四，定位

1.相对定位：

定义：相对定位是相对于他的起点进行移动，移动后原来的位置还被占用。可以过                position：relative；开启相对定位，left，right，top，bottom四个属性来设置标签的偏移量

特点：（当标签的position属性设置为relation时，则开启了标签的相对定位）

1.当开启了标签的相对定位后，而不设置偏移量时，标签不会发生任何变化

2.相对定位时相对于标签在文档流中原来的位置进行定位

3.相对定位的标签不会脱离文档流

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				background-color: red;
				width: 100px;
				height: 100px;
				float: left;
				
				position: relative;
				left: 150px;
			}
			.box2{
				background-color: aqua;
				width: 100px;
				height: 100px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="box1">div1</div>
		<div class="box2">div2</div>
	</body>
</html>

2.绝对定位

定义：绝对定位时不占空间的，运用了绝对定位的标签会脱离原来的文档流，浮动起来，因此在视觉上会与其他标签重叠起来

可以通过position：absolute；开启绝对定位
left，right，top，bottom四个属性来设置偏移量

特点：

1.开启绝对定位，会使标签脱离文档流

2.开启绝对定位以后，如果不设置偏移量，则标签位置不会发生变化

3.绝对定位时相对于离他最近的开启了相对定位的祖先标签进行定位

注：一般情况下，开启了绝对定位都会同时开启父标签的相对定位

        如果所有的祖先标签都为开启定位，则会相对于浏览器窗口进行定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				background-color: red;
				width: 100px;
				height: 100px;
				position: absolute;
				
				top: 100px;
				
			}
			.box2{
				background-color: aqua;
				width: 100px;
				height: 100px;
			}
			.box3{
				background-color: aqua;
				width: 220px;
				height: 220px;
				
				
			}
			
			.main{
				width: 200px;
				height: 200px;
				background-color: blanchedalmond;
				position: relative;
			}
		</style>
	</head>
	<body style="margin-top: 1000px;">
		<div class="box3">
			<div class="main">
			div3
			<div class="box1">div1</div>
		</div>
		
		<div class="box2">div2</div>
		</div>
		
		<!--固定定位 -->
		<div style="width: 50px; height: 50px; background-color: gold; position: fixed; right: 0%; top: 50%;">
			客服
		</div>
	</body>
</html>