前端学习之路css(03)-基础属性

CSS ul（列表样式）

在html中有两种列表样式，无序列表和有序列表。一般无序列表特殊图形（比如小圆点等）来表示列表的标号，有序列表用数字等来表示标号。在CSS样式中，我们可以定义不同样式的列表展示。
比如：

---

CSS Table（表格）

具体参见

---

CSS Box Model（盒子模型）

所有的html元素都可以看做盒子，在CSS中，封装周围的html元素，包括：边距、边框、填充和实际内容。

我们可以结合这个图片来说明一下。

• Margin，外边距，清除边框外的区域，外边距是透明。
• Border，边框，围绕在内边距和内容外的边框。
• Padding，内边距，清除内容周围的区域，内边距是透明的。
• Content，盒子内容，显示文本和图像。

对一个标签来讲，它的宽高应该有下面来计算：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距。
总元素的高度=高度+顶填充+底填充+上边框+下边框+上边距+下边距。

---

CSS Border（边框）

CSS允许指定一个元素的边框和样式。它最基本的属性如下所示。
border-style，属性来设置边框的样式；
border-width，属性来设置边框的宽度；
border-color，属性来设置边框的颜色；

更多用法参照

---

CSS outline（轮廓）

轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到凸起元素的作用，它在边框之外。如下图所示位置。

和CSS边框类似，它也有基本的三种属性。
outline-style，轮廓的样式属性；
outline-width，轮廓的宽度属性；
outline-color，轮廓的颜色属性；

---

CSS Margin（外边距）

我们应该很好理解Margin的含义，它在此处的意义几乎等同于在Android的意义。

---

CSS Padding（填充）

同样的，理解Padding更加容易了，在这里就省略例子了。

---