布局

最新推荐文章于 2024-08-26 17:21:03 发布

JV_YAN

最新推荐文章于 2024-08-26 17:21:03 发布

阅读量286

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/JV_YAN/article/details/70605878

版权

HTML5 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

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