盒子模型

最新推荐文章于 2024-06-22 17:15:40 发布

qq_40891002

最新推荐文章于 2024-06-22 17:15:40 发布

阅读量469

点赞数

分类专栏： css

本文链接：https://blog.youkuaiyun.com/qq_40891002/article/details/105793856

版权

css 专栏收录该内容

10 篇文章

订阅专栏

盒子模型的概念

把HTML页面的元素看做是一个矩形的盒子，也就是一个盛放内容的容器。每个矩形都有元素的内容，内边距，边框和外边距组成

css display属性

设置段落生成一个行内框：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
p {display:inline}
</style>
</head>
<body>

<p>这两个段落生成内联盒子,和它的结果</p>

<p>这两个元素之间没有距离。</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
p {display:block}
</style>
</head>
<body>
<p>此元素将显示为块级元素</p>
<p>此元素前后会带有换行符。</p>
</body>
</html>

内外边距，宽度，高度，box-sizing等属性

内边距：padding

外边距：margain

box-sizing: 指定两个boxes接壤

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style> 
div.box
{
	box-sizing:border-box;
	width:200px;
	border:1px solid red;
	float:left;
}
</style>
</head>
<body>
<div class="box">这个 div 占据了左边的一半。</div>
<div class="box">这个 div 占据了右边的一半。</div>
</body>
</html>

浮动

直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简历</title>
		<link href="css/style3.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		 <div class="father">
		<div class="box" ><h3>简历</h3></div>
		<div class="two">
		<div class="box3"><h3>基本信息</h3></div>
			<div class="box4"><p>姓名 张三&nbsp;&nbsp;&nbsp;&nbsp;
			性别 男&nbsp;&nbsp;&nbsp;&nbsp;应聘职位 web前端开发</p></div>
			<div class="box3"<h2>联系方式</h2></div>
	<div class="box4">	<table border="0">
		<tr>
			<td>手机 12345678901&nbsp;&nbsp;&nbsp;&nbsp;</td>
			<td>Email <a href="www">769696877@qq.com</a>&nbsp;&nbsp;&nbsp;&nbsp;</td>
		    <td>个人主页 <a href="www">Github</a></td>
		</tr>
		</table></div>
			<div class="box3"><h3>能力描述</h3></div>
			<div class="box4"><p>技术能力
			掌握HTML,CSS,JavaScript</p></div>
			<div class="box3"><h2>综合能力</h2></div>
			<div class="box4"><p>良好的沟通，主动积极，努力勤奋</p></div>
			<div class="box3"><h3>教育经历</h3></div>
			<div class="box4"><p>本科
			百度前端技术学院小微学院<br/>
			研究生
			百度前端技术学院大斌学院</p></div>
			<div class="box3"><h3>项目经历</h3></div>
		<div class="box4"><p>小度小度
			作为前端工程师参与了ABC组件的开发<br/>
			SAN Doc
			作为文档工程师参与了SAN Doc的编写</p></div>
			</div>
			</div>
	</body>
</html>

.father{
	background:blue;
	border: 1px solid blue;
	overflow: auto;
}
.box{
	height:50px;

	background: grey;
    margin: 0px;
	padding:4px;
	font-size: 12px;
	color: white;
	border:2px solid black;


	}
	.box3{
		height:80px;
		width:80px;
		background: darkgrey;
		border:2px solid red;
		margin: 0;
 		float: left; 
	    
	}
	.box4{
		height:80px;
	
		background: white;
		border:2px solid red;
	
	}

清除浮动

clear属性值可以为left和right

分别可以清除元素左右两侧浮动的影响

使用空标记可以清除浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素浮动</title>
		<link href="css/yuansufudong.css" type="text/css" rel="stylesheet">
	</head>
	<body>
		<div class="father">
			<div class="box1">box01</div>
			<div class="box2">box02</div>
			<div class="box3">box03</div>
		<!-- 	<div class="box4"></div> -->
			<!-- <p>你好，你在哪里呀，我觉得我好像见过你，好久不见了,你好，你在哪里呀，我觉得我好像见过你，好久不见了你好，你在哪里呀，我觉得我好像见过你，好久不见了你好，你在哪里呀，我觉得我好像见过你，好久不见了</p> -->
		</div>
	</body>
</html>

.father{
	background: #ccc;
	border: 1px dashed #999;
	/* overflow: hidden; */
}
.box1{
	height: 50px;
	
	line-height: 50px;
	background:gray;
	border:1px solid #FF3;
	margin: 5px;
	padding:0px 10px;
	float: left;
}
.box2{
	height: 50px;

	line-height: 50px;
	background:gray;
	border:1px solid #FF3;
	margin: 5px;
	padding:0px 10px;
	float: left;

}
.box3{
	height: 50px;

	line-height: 50px;
	background:gray;
	border:1px solid #FF3;
	margin: 5px;
	padding:0px 10px;
	float: left;

}
.father:after{
	display: block;
	clear: both;
	content: "";
	visibility: hidden;
	height: 0;
}
/* .box4{
	clear: both;
} */
/* p{
	background: #FCF;
	border: 1px dasheed #F33;
	margain:15px;
	padding:0px 10px;
	clear: left;
} */

也可以使用after伪对象清除浮动

overflow属性

如何使用浮动进行布局

看清设计图，构思出盒子，调试，添加细节