本文详细介绍了HTML中的div元素以及CSS的盒子模型，包括宽度、高度、内外边距、浮动和布局方式，如margin-collapse、margin-auto和vertical-align的使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>盒子模型</title>
<link href="new_file.css" rel="stylesheet"/>
</head>
<body>
<div class="box1">hello box1</div>
<div class="box2">hello box2</div>
<div class="wbox">
<div class="nbox"></div>
</div>
</body>
</html>
<!-- css部分
*{
/*通配符:指所有标签*/
margin: 0;
padding: 0;
}
.box1{
width: 400px;
height: 300px;
background-color: purple; /*背景颜色*/
color: red;
font-size: 36px;
margin-bottom: 80px;
/*margin-top: 50px;
margin-left: 100px;*/
/**/
margin: 50px auto;
}
.box2{
width: 600px;
height: 300px;
background-color: purple;
font-size: 36px;
margin-top: 120px;
/* 块级盒子水平居中显示,给盒子的左右外边距设置为auto 前提条件：设置宽*/
margin: auto;
margin-bottom: 200px;
}
/*1.相邻两个盒子之间外边距合并:只给其中一个盒子设置外边距
2.嵌套盒子之间外边距的塌陷:给父盒子家边框 给父盒子加内边距padding 给父盒子加overflowd: hidden
3.给父盒子加overflow：hidden*/
.wbox{
width: 600px;
height: 600px;
background-color: aqua;
margin-top: 100px;
margin: auto;
/*border: 1px solid red;*/
padding-top: 100px;
/* overflow: hidden; */
}
.nbox{
width: 300px;
height: 300px;
background-color: blueviolet;
margin: auto;
/* margin-top: 100px; */
} -->
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
