CSS——盒子模型和border-radius

前言

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

CSS盒子模型的简介

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

盒子模型的使用

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

    
    
    



    

        a
    

image.png

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

border-radius

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

image.png

↓↓↓↓↓↓↓↓↓↓

image.png

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

image.png

PS：我们也可以使用百分比来作为border-radius的值，比如圆形的话直接border-radius:50%就可以实现了~~