您的位置：首页 > Web前端 > HTML5

HTML5第六课时，布局的简单应用

2017-04-19 22:22 323 查看

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
header{
height: 100px;
background-color: #585858;
}
section{
background-color: yellowgreen;/*这里的颜色被其子div覆盖了。*/
height: 400px;
}
#child1{
width: 20%;/*占其父类宽度的多少*/
height: 100%;
background-color: royalblue;
float: left;
padding: 1px;
border: 10px solid black;
/*加了padding，或者margin，border，都会影响页面布局，就会挤出去其他的div*/
/*如果内容溢出的话，用overflow来解决。*/
box-sizing: border-box;
/*box-sizing是变态盒模型，border-box是以边距开始计算，
不会让div挤出去，以布局为主，挤得是内容。
默认的是content-box,以内容为主，挤得的是div*/
}
#child2{
width: 60%;
height: 100%;
background-color: darkmagenta;
float: left;
}
#child3{
width: 20%;
height: 100%;
background-color: red;
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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航