大学生挑战全网超详细web笔记05弹

1.将行内头缝隙去掉

html 复制代码

<style type="text/css">
			*{margin: 0; padding: 0;}
		</style>

注意：①* 表示接下来的所有代码都符合sytle样式中的方式！！！

②margin边缘，页面空白 padding内边距

2.DIV
是普通的块元素

ps：块元素和行元素、行内块元素区别:

①块元素block：自己独占一行，可以设置width,height（默认的宽100%，高不限设）

②行内元素inline：不能独占一行，可以并排,不可以设置width,height（宽高都自适应）

③行内块元素inline-block：不能独占一行，可以并排，可以设置width，height（宽高都自适应）

3.标准盒子模型

1.由四层组成，从外往内依次是是margin，border，padding，content

2.四层中除了content，其他三层都有四个方向，从上开始顺时针依次为top，right，bottom，left（xx-xx）

3.平时定义div的尺寸，定义的是content的尺寸

4.背景颜色会应用到除了margin之外的所有区域

5.多值用法：一个，上下左右全都一样；两个，前上下和后左右；三个，前上和中左右和后上下；四个，顶部开始顺时针的四个值（上右下左）

ps：

border想要看见效果，必须设置边的宽度样式颜色（1px solid color）

html 复制代码

div{
				margin-top: 10px;
				margin-right: 20px;
				margin-bottom: 10px;
				margin-left: 20px;
				border-width:10px 20px 30px 40px;
				border-color:green ;
				border-style: dotted;
				background-color: orange;
				width: 400px;
				height:400px;
				
			}

440*460

4.盒子面积

实际占用面积 = 内容宽高 + padding + border

（margin 不算进元素本身大小，只算间距）

5.最后展示成果

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>4.7练习</title>
		<style type="text/css">
			*{margin: 100; padding: 0;}
			.header{
				margin: 0 auto;
				background-color: deeppink;
				height:120px;
				width: 963px;
				display: block;
				text-align: center;
			}
			.nav{
				margin: 0 auto;
				background-color: lightseagreen;
				height:50px;
				width: 963px;
				display: block;
				text-align: center;
			}
			.container{
				height:380px;
				width: 963px;
				background-color: lightpink;
			}
			.container{
				margin: 0 auto;
				background-color: darkgray;
				height:380px;
				width: 963px;
				text-align: center
			}
			.panel-B{
				background-color: deepskyblue;
				height:300px;
				width:220px;
				display: inline-block;
				border: 10px solid darkgray;
				text-align: center
			}
			.panel-A{
				background-color: aliceblue;
				height:300px;
				width:480px;
				display: inline-block;
				float: none; 
				border-top:10px solid darkgrey 
			}
			.panel-C{
				background-color:cornflowerblue;
				height:300px;
				width:220px;
				display: inline-block;
				border: 10px solid darkgray;
				float: right;
				text-align: center
			}
			.footer{
				margin: 0 auto;
				background-color: deeppink;
				height:52px;
				width: 963px;
				display: block;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="header">
			页面头部         请选择
		</div>
		<br/>
		<div class="nav">
			页面导航        我的爱好是
		</div>
		<br/>
		<div class="container">
			<div class="panel-B">
				左边测栏
				<br />
				发疯进行时
			</div>
			<div class="panel-A">
				中间栏
				<br />
				我真想吃饭
			</div>
			<div class="panel-C">
				右边测栏
				<br />
				整天在睡觉
			</div>
		</div>
		<br />
		<div class="footer">
			页面版权
		</div>
	</body>
</html>