CSS学习系列(二) --- padding,border,margin的魅力和技巧

CSS是层叠样式表（Cascading Style Sheets）的缩写，是一种用来网页如何呈现的计算机语言。它能够控制网页的字体、颜色、布局等，使网页更加美观和易读。

盒模型是CSS中用于定义元素大小和位置的一个概念。它将元素划分为四个部分：内容（content）、内边距（padding）、边框（border）和外边距（margin）。

内边距（padding）

内边距是元素内容与边框之间的空白区域。它可以用来增加元素与其他元素之间的间距，或使元素居中。内边距可以使用px、em、rem、%等单位来定义。

边框（border）

边框是元素周围的线。它可以用来突出元素，或使元素与其他元素分开。边框可以使用px、em、rem、%等单位来定义。

外边距（margin）

外边距是元素与其他元素之间的空白区域。它可以用来增加元素与其他元素之间的间距，或使元素居中。外边距可以使用px、em、rem、%等单位来定义。

百分比和负值问题

百分比和负值是CSS中两个比较特殊的值。

百分比值相对于父元素的尺寸。例如，如果一个元素的内边距设置为10%，那么它的内边距将是父元素宽度的10%。

负值可以用来减少元素的尺寸。例如，如果一个元素的边框设置为-5px，那么它的边框将减少5px。

如何用CSS画三角形、正方形和扇形

CSS不仅可以用来定义元素的样式，还可以用来创建形状。下面介绍如何用CSS画三角形、正方形和扇形。

三角形

.triangle {
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 200px solid red;
}

正方形

.square {
  width: 200px;
  height: 200px;
  background-color: blue;
}

扇形

.扇形 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: green;
}