前端基础：CSS（篇二）

盒子模型（box-model）

盒子模型-内容区

代码

运行

盒子模型-内边距

代码

运行

盒子模型-边框

代码

运行

盒子模型-外边距

代码

运行

清除浏览器的默认样式

代码

运行

盒子模型练习

代码

运行

编辑

文档流

浮动

代码

运行

清除浮动

代码

运行

CSS 定位(Position)

相对定位（relative）

特点：

代码

运行

绝对定位（absolute）

特点：

代码

运行

盒子模型（box-model）

● CSS处理网页时，它认为每个标签都包含在一个不可见的盒子里。

● 如果把所有的标签都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。

● 我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。

内容区：放置标签内容的区域
width和height它只是设置标签内容区的大小
内边距：内容区到边框以内发区域
边框：标签的最外边
标签大小=内容区大小+内边距大小+边框大小

盒子模型-内容区

● 内容区指的是盒子中放置内容的区域，也就是标签中的文本内容，子标签都是存在于内容区中的。

● 通过width和height两个属性可以设置内容区的大小而不是整个盒子的大小。

● 如果没有为标签设置内边距和边框，则内容区大小默认和盒子大小是一致的。

● width和height属性适用于块标签。

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				background-color: aqua;
				width: 176px;
				height: 176px;			
			}
			
			.box2{
				width: 200px;
				height: 200px;
				background-color: hotpink;
		</style>
	</head>
	<body>
		
		<div class="box1">
			盒子模型
		</div>
		
		<div class="box2"></div>  
	</body>
</html>

运行

盒子模型-内边距

● 内边距指的就是标签内容区与边框以内的空间。

● 内边距会影响整个盒子的大小。使用padding属性来设置标签的内边距。

padding:10px 20px 30px 40p

上、右、下、左四个方向的内边距

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				background-color: aqua;
				width: 176px;
				height: 176px;
				
				padding: 10px;/* 四个方向内边距相同 */ 
				/* padding-top: 10px;
				padding-left: 15px; */
				
				/* padding: 5px 10px 15px 20px;上 右 下 左 顺时针 */
				/* padding: 10px 20px;上下 左右 */	
			}
		</style>
	</head>
	<body>
		
		<div class="box1">
			盒子模型
		</div>
	</body>
</html>

运行

padding: 10px;

padding-top: 10px;
padding-left: 15px;

padding: 5px 10px 15px 20px;

padding: 10px 20px;

盒子模型-边框

● 可以在标签周围创建边框，边框是标签可见框的最外部

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

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

● 边框可以设置样式：

dotted （点线）

dashed （虚线）

solid （实线）

double （双线）

groove （槽线）

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

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

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style> 
			.box1{
				background-color: aqua;
				width: 176px;
				height: 176px;
				
				border-top-width: 1px;
				border-top-color: rebeccapurple;
                border-top-style: solid; 	

                /* border-top: 2px rebeccapurple solid;*/
				/* border: 2px rosybrown solid; */
				/* border-radius: 10px;	 */
						
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
			}
		</style>
	</head>
	<body>
		
		<div class="box1">
			盒子模型
		</div>
	</body>
</html>

运行

border-top-width: 1px;
border-top-color: rebeccapurple;
border-top-style: solid;

border-top-left-radius: 10px;
border-top-right-radius: 10px;

border-top: 2px rebeccapurple solid;

border-radius: 10px;

border: 2px rosybrown solid;

盒子模型-外边距

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

margin-top/right/bottom/left。

margin的值可以为负值。

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

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

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

● 外边距不影响标签的大小.只是影响标签的位置 ,外边距是一个标签到另一个标签的距离

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style> 
			.box2{
				width: 200px;
				height: 200px;
				background-color: hotpink;
				margin-top: 10px;
				margin-bottom: 10px;
				/* margin-left: 100px; */
				/* margin-left: auto;
				margin-right: auto; */
				
				margin:10px auto; 
			}
		</style>
	</head>
	<body>
		<div class="box2"></div> 
	</body>
</html>

运行

margin-top: 10px;
margin-bottom: 10px;
margin:10px auto;

margin-left: 100px;

margin-left: auto;
margin-right: auto;

清除浏览器的默认样式

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

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

*{ margin: 0;

padding: 0;

}

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
				outline: none;
			}
			.box1{
				background-color: aqua;
				width: 176px;
				height: 176px;
				
				padding: 10px;/* 四个方向内边距相同 */ 
				
				border: 2px rosybrown solid;
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
			}
			
			.box2{
				width: 200px;
				height: 200px;
				background-color: hotpink;
				margin-top: 10px;
				margin-bottom: 10px;
		
				margin:10px auto;
		</style>
	</head>
	<body>
		
		<div class="box1">
			盒子模型
		</div>
		
		<div class="box2"></div> 
		
		<p>wwww</p>
		<p>sss</p>
		<h1>wwww</h1>
	    <h1>222</h1> 
	</body>
</html>

运行

盒子模型练习

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				background-color: chartreuse;
				width: 80px;
				
				padding: 10px 60px;
			}
			
			.txt1{
				width: 476px;
				height: 32px;
				padding: 2px 10px;
				border: 2px green solid;
				border-radius: 5px;
				outline: none;
			}
			.txt1:hover{
				border:2px magenta solid;
			}
			.txt1:focus{
				border: 2px black solid;
			}
		</style>
	</head>
	<body>
		
		<div class="box1">
			公司介绍
		</div>
		<br/>
		<input class="txt1"/>
	</body>
</html>

运行

文档流

网页默认是一个二维平面，在网页中一行行摆放标签

块标签会占一行，行标签只占自身的大小

这种情况下实现网页布局就比较麻烦了，需要通过一些方法改变默认的摆放顺序---网页布局

浮动

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

使用float属性

none ：不浮动

left ：向左浮动

right ：向右浮动

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

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

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				background-color: darkturquoise;
				float: right;/* 可以让标签脱离原来的文档流（二维平面）,浮动后的标签默认是呢内容的大小，可以为其设置宽和高*/
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div>div1</div>
		<div>div2</div>
		<div>div3</div>
		<h1 style="background-color: cornflowerblue;">十里桃花</h1>
	</body>
</html>

运行

清除浮动

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

left ：忽略左侧浮动

right ：忽略右侧浮动

both ：忽略全部浮动

浮动的标签不占用原来的文档流空间
下面的标签就会向上移动，会影响后面的网页布局

解决浮动问题：
1、为父级标签设置一个高度，把父级标签撑开
2、在浮动的标签后使用清除浮动属性

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			 .nav{
				background-color:thistle; 
				float: left;
				padding: 10px 54px;
				
			 }
			 .nav:hover{
				 background-color: lightcoral;
			 }
			 .nav_box{
				background-color: darkorange; 
				width: 688px; 
				margin: 0px auto;
			 }
			 .middle_box{
				 width: 688px;
				 margin: 10px auto;
			 }
			 .middle_box_left,.middle_box_center,.middle_box_right{
				 float: left;
				 height: 200px; 
			 }
			 .middle_box_left{
				 width: 100px;
				 background-color: darkcyan;
				 padding-left: 10px; 
			 }
			 .middle_box_center{
			 	 width: 458px;
				 background-color: darkgoldenrod;
			 }
			 .middle_box_right{
				 width: 120px;
				 background-color: darkblue;
			 }
			 .middle_box_bottom{
				 background-color: aquamarine;
				 height: 50px;
			 }
		</style>
	</head>
	<body> 
		  <div class="nav_box">
			  <div class="nav">网站首页</div>
			  <div class="nav">产品案例</div>
			  <div class="nav">公司介绍</div>
			  <div class="nav">联系我们</div> 
			  <div style="clear: left;"></div> <!-- 清除浮动的影响，自动撑开父级标签-->
		  </div> 
		  
		  <div class="middle_box">
		      <div class="middle_box_left">
			    <div>家电</div>
			    <div>家电</div>
			    <div>家电</div>
			    <div>家电</div>
			  </div>
		      <div class="middle_box_center">center</div>
		      <div class="middle_box_right">right</div>
			  <div style="clear: left;"></div>
		      <div class="middle_box_bottom">bottom</div>
		  </div>
	</body>
</html>

运行

CSS 定位(Position)

相对定位（relative）

首先要开启标签的定位功能，指定定位的类型
以自己原来的位置进行定位的
相对定位不会让标签脱离文档流

相对定位是一个非常容易掌握的概念. 相对于它的起点进行移动，移动后原来的位置还被占用。

可以通过position:relative; 开启相对定位， left right top bottom四个属性来设置标签的偏移量

特点：

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

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

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

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				width: 100px;
				height: 100px;
				background-color: aqua;

				position: relative;
				left: 100px;
				top: 100px;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: darkcyan;
			}
		</style>
	</head>
	<body>
		<div class="box1">div1</div>
		<div class="box2">div2</div>
	</body>
</html>

运行

绝对定位（absolute）

开启绝对定位，标签立即脱离文档流
参照物：
离他最近的开启定位的父级标签
如果所有的父级标签都没有开启定位，那么以浏览器窗口为参照物
开启标签的绝对定位都会开启父级标签的相对定位

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

可以通过position: absolute; 开启绝对定位， left right top bottom四个属性来设置标签的偏移量

特点：

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

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

3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签的绝对定位都会同时开启父标签的相对定位）

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

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				width: 100px;
				height: 100px;
				background-color: aqua; 
				 
				position: absolute;
				left: 100px;
				top: 100px;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: darkcyan;
			}
			.box3{
				width: 200px;
				height: 200px;
				background-color: olivedrab;
				position: relative;
			}
		</style>
	</head>
	<body>
		<p>wwwww</p>
		<p>wwwww</p>
		<p>wwwww</p>
		<p>wwwww</p>
		<div class="box3">div3<div class="box1">div1</div></div>
		<div class="box2">div2</div>
	</body>
</html>