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

来源：互联网发布：知巳手机编辑：程序博客网时间：2024/05/17 05:00
<!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>
0 0