CSS边距以及变态盒模型

来源：互联网发布：阿里云身份证识别demo 编辑：程序博客网时间：2024/06/05 11:42
<!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>
阅读全文
0 0