<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding:0;
margin: 0;
}
/*兄弟: margin上下以大的为主 左右叠加 父子:左右没问题 上下会使父盒子向下塌*/
.father{
/* padding: 110px; */
margin-top: 50px;
width: 300px;
height: 300px;
background-color: gray;
overflow: hidden; /*管住自己 增加布局约束 布局在自己盒子里边不去影响其他盒子*/
}
.son{
width: 100px;
height: 100px;
background-color: blue;
margin-top: 50px;/*只有兄弟时两个盒子之间可以使用margin-设置间距父子时不可以*/
}
.box1{
width: 500px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="father">
I am father
<div class="son">
I am child
</div>
</div>
<div class="box1"></div>
</body>
</html>
运行结果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding:0;
margin: 0;
}
/*兄弟: margin上下以大的为主 左右叠加 父子:左右没问题 上下会使父盒子向下塌*/
.father{
/* padding: 110px; */
margin-top: 50px;
width: 300px;
height: 300px;
background-color: gray;
overflow: hidden; /*管住自己 增加布局约束 布局在自己盒子里边不去影响其他盒子*/
}
.son{
width: 100px;
height: 100px;
background-color: blue;
/* margin-top: 50px; *//*只有兄弟时两个盒子之间可以使用margin-设置间距父子时不可以*/
margin: 0 auto;/*水平居中*/
/* margin: auto auto; *//*错误*/
}
.box1{
width: 500px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="father">
I am father
<div class="son">
I am child
</div>
</div>
<div class="box1"></div>
</body>
</html>
运行结果:
块级元素和行内元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div,p,h1{
background-color: gold;/*块级元素独占一行*/
/* display: inline-block; *//* 块级元素变为行内元素 */
}
img{
width: 100px;
height: 100px;
background-color: blue;
/* display:block; *//* 行内元素变为块级元素 */
}
span{
/*display:block; *//* 行内元素变为块级元素*/
background-color: #0000FF;
}
</style>
</head>
<body>
<div>one</div>
<p>two</p>
<h1>three</h1>
<img /><img /><!-- *行内块元素* -->
<hr /><!-- 水平线 -->
<span>河北地质大学</span>
<span>河北地质大学</span>
<span>河北地质大学</span>
<span>河北地质大学</span>
<span>河北地质大学</span><!-- 行内元素 没有宽高,无法设置宽高 根据内容撑开盒子-->
</body>
</html>
运行结果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div,p,h1{
background-color: gold;/*块级元素独占一行*/
display: inline-block; /* 块级元素变为行内元素*/
}
img{
width: 100px;
height: 100px;
background-color: blue;
display:block; /* 行内元素变为块级元素*/
}
span{
display:block; /* 行内元素变为块级元素*/
background-color: #0000FF;
}
</style>
</head>
<body>
<div>one</div>
<p>two</p>
<h1>three</h1>
<img /><img /><!-- *行内块元素* -->
<hr /><!-- 水平线 -->
<span>河北地质大学</span>
<span>河北地质大学</span>
<span>河北地质大学</span>
<span>河北地质大学</span>
<span>河北地质大学</span><!-- 行内元素 没有宽高,无法设置宽高 根据内容撑开盒子-->
</body>
</html>
运行结果: