CSS——盒子模型和border-radius
2020-12-20 本文已影响0人
moutory
前言
学习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>
image.png
PS：我们也可以使用百分比来作为border-radius的值，比如圆形的话直接border-radius:50%就可以实现了~~
