布局

来源：互联网发布：飞机晚点软件编辑：程序博客网时间：2024/05/11 01:28

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
header{
height: 100px;
background-color: gold;
}
section{
background-color: #585858;
height: 400px;
}
#child1{
width: 20%;
height: 100%;
background-color: orange;
float: left;
/*margin-left: 10px;*/
padding: 10px;
/*margin border padding都会影响页面的布局，content不变，
实际宽度为：在在content的基础上加上margin,border或paddoong*/
border: 10px solid green;
/*变态盒模型 border-box 添加padding或者border不会影响页面布局，
只会挤压页面内容的content*/
box-sizing: border-box;
overflow:scroll;
}
#child2{
width: 60%;
height: 100%;
background-color: blueviolet;
float: left;
}
#child3{
width: 20%;
height: 100%;
background-color: brown;
float: left;
}
</style>
<title>布局</title>
</head>
<body>
<header></header>
<section>
<div id="child1">
杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育
杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育
杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育
杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育
杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育
杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育
</div>
<div id="child2"></div>
<div id="child3"></div>
</section>
</body>
</html>

0 0