CSS——盒子模型和border-radius

作者: moutory | 来源:发表于2020-12-20 12:48 被阅读0次

CSS 盒子模型
CSS——盒子模型和border-radius
前端一些面试题
2019-05-05
CSS之基础知识开篇（二）
css基础问题
css 盒子模型
2019-06-24
html页面绘制方面
CSS：盒子模型（box）

前言

学习CSS，盒子模型是绕不过去的一个重点，每个元素实际展现出来的大小都和盒子模型中的数字息息相关。这篇文章将主要讲一下盒子模型的概念和使用，希望能够帮助不清楚的朋友们实现快速入门。

CSS盒子模型的简介

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒子模型的使用

我们可以同过调整元素的内外边距、边框来实现元素的位置调整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin-top: 50px;
            margin-left: 100px;
        }
        #app{
            height: 200px;
            width: 200px;
            border: red 2px solid;
        }
        #box{
            height: 100px;
            width: 100px;
            border: red 2px solid;
            margin: 10px 20px 30px 40px;
            background: palegoldenrod;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="box">
        a
    </div>
</div>
</body>
</html>

image.png
我们由此也很容易可以推算出，一个元素最终展现出来的高度和宽度公式是
最终高/宽 = 元素本身的width/height + 左右border + 左右padding + 左右margin

border-radius

border-radius顾名思义即边框半径，我们常常利用这个属性来进行元素边框半径的调整，比如说制作圆形的图像。
说了这么多，那么什么是边框半径呢？
一个块元素有四个角，边框半径就相当于在每个角上面嵌套了四个小圆形

image.png
↓↓↓↓↓↓↓↓↓↓

image.png

举一反三，我们就可以用border-radius来实现半圆和圆形了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #round{
        height: 100px;
        width: 100px;
        border-radius: 50px;  /* 表示4个角都是50px*/
        background: pink;
    }
    #halfRound{
        margin-top: 50px;
        height: 50px;
        width: 100px;
        background: greenyellow;
        border-radius: 50px 50px 0 0 ;
    }
</style>
<body>
<div>

    <div id="round"></div>
    <div id="halfRound"></div>
</div>
</body>
</html>