CSS边距以及变态盒模型

时间 2019-12-06 标签 css 边距以及变态模型
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局</title>
    <style>
        header{
            height: 100px;
            background-color: #cccccc;
        }
        section{
            background-color: #FF7100;
            height: 400px;
        }
        #child1{
            width: 10%;
            height: 100%;
            background-color: #FF0000;
            float: left;
            /*padding-left: 1px;*/  border: 10px solid black;
            /*margin border padding都会影响页面布局，content不变，  实际宽度为：在content的基础上加上margin border或padding*/  /*变态盒模型 borber-box 添加padding或者border不会影响页面布局  只会挤压页面内容content*/  box-sizing: border-box;
            /*overflow规定了内容溢出盒子时如何处理*/  overflow: auto;
            /*border-radius 盒子弧度*/  border-radius: 50%;
        }
        #child2{
            width: 80%;
            height: 100%;
            background-color: aqua;
            float: left;
            border-radius: 50%;
        }
        #child3{
            width: 10%;
            height: 100%;
            background-color: brown;
            float: left;
            border: 10px solid black;
            box-sizing: border-box;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<header></header>
<section>
    <div id="child1"></div>
    <div id="child2"></div>
    <div id="child3"></div>
</section>
</body>
</html>