菜鸟教程CSS学习笔记（03）

盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素。
包括外边距margin，边框border，内边距padding，内容content。

CSS margin外边距

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

在CSS中，它可以指定不同的侧面不同的边距：

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

CSS 内边距padding（填充）

length 定义一个固定的填充(像素, pt, em,等)
% 使用百分比值定义一个填充

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

元素的宽度和高度

当指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。

下面的例子中的元素的总宽度为 450px：

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

CSS边框

CSS边框属性允许指定一个元素边框的样式和颜色。

CSS轮廓（outline）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。

注：本文为菜鸟教程https://www.runoob.com/try/try.php?filename=trycss_font-family学习笔记，侵权删。