首页 > 基础资料 博客日记

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

2026-04-07 11:30:02基础资料围观1次

本篇文章分享大学生挑战全网超详细web笔记05弹，对你有帮助的话记得收藏一下，看极客资料网收获更多编程知识

1.将行内头缝隙去掉

<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）

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.最后展示成果

<!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>

文章来源:https://www.cnblogs.com/zmy250/p/19828963
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！

标签：

上一篇：裁员后我被迫负责运维，用AI从0搭建了可观测性平台
下一篇：Polaris CTF部分web题wp

相关文章

最新发布

点击排行

本站推荐

标签云