盒模型和边框圆角

作者: 小透明进击战 | 来源:发表于2019-06-24 17:49 被阅读0次

盒模型和边框圆角
CSS3
任务九问答题
css3新特性总结
W3C盒模型与IE盒模型的区别
任务9-1
CSS3
CSS盒模型详解
理解盒模型
标准盒模型和怪异盒模型的区别

盒模型

box-sizing

盒子模型width=border+padding+contentwidth（内容的宽）
height=border+padding+contentheight（内容的高）
因为网页如果加了浮动，当某一个元素添加padding或者border，超出了父盒子的宽度，就会造成其他子盒子往下溢出，这种就容易影响整个页面布局。所以css3出现了盒模型，解决了这个问题。
盒模型有两个关键属性，分别是content-box和border-box。
content-box，说明设定的宽度就是内容的宽度。
+border-box，说明设定的宽度是整个盒子的宽度，就是如果你添加padding，盒子宽度依旧是这么大，只是内容宽度会被压缩变小。

边框圆角

border-radius的圆角大小随着半径越大，圆角越大

image.png

安卓小机器人案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>安卓机器人</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .android {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            margin: 50px auto;
        }
        .an_head {
            width: 250px;
            height: 125px;
            border-radius: 125px 125px 0 0;
            background-color: darkgreen;
            margin: 10px auto;
            position: relative;
        }
        /*眼睛使用伪元素*/
        .an_head::before,.an_head::after {
            content: "";
            /*行内元素转换成块级元素，方法有三，display，float，position*/
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background-color: #fff;
            top: 70px;

        }
        .an_head::before {
            left: 70px;
        }
        .an_head::after {
            right: 70px;
        }
        .an_body {
            width: 250px;
            height: 250px;
            background-color: darkgreen;
            border-radius: 0 0 20px 20px;
            position: relative;
            margin: 0 auto;
        }
        .an_body::before,.an_body::after {
            content: "";
            width: 30px;
            height: 180px;
            border-radius: 10px;
            background-color: darkgreen;
            position: absolute;

            top: 20px;
        }
        .an_body::before {
            left: -40px;
        }
        .an_body::after {
            right: -40px;
        }
        .an_footer {
            width: 250px;
            height: 100px;
            margin: 0 auto;
            position: relative;
        }
        .an_footer::before,.an_footer::after {
            content: "";
            position: absolute;
            top: 0;
            background-color: darkgreen;
            width: 30px;
            height: 100px;
            border-radius: 0 0 10px 10px;

        }
        .an_footer::before {
            left: 50px;
        }
        .an_footer::after {
            right: 50px;

        }

    </style>
</head>
<body>
<div class="android">
    <div class="an_head"></div>
    <div class="an_body"></div>
    <div class="an_footer"></div>
</div>

</body>
</html>