前端学习随笔4 背景，边框，列表样式，链接样式

一 心得体会

前面学习了HTML元素构建网页结构，学习了css文字属性和文本属性，今天在页面修饰方面更进一步，学习到了背景、边框、列表、链接这些方面的样式设置，发现了一些以前遗漏的知识点，比如背景样式中的background-attachment属性，这个以前基本没用到，看了之后觉得效果还是可以的，再今后的页面中可以使用到。最大的收获还是image的使用，突然发现image还可以用到边框、文本甚至列表中，觉得很神奇了，这个可以单独写一篇学习笔记了。

二相关知识点

1 背景（background）

要了解背景应用，我们需要先搞清楚盒模型。盒模型分为标准盒模型和怪异盒模型（ie盒模型）。

1. 标准盒模型中width/height为内容的宽/高，盒子总宽度/高度=width/height+padding+border+margin。
2. 怪异盒模型中width/height为内容+padding+border的宽/高，盒子总宽度/高度=width/height+margin。

在最初的浏览器中，不同浏览器会根据自己来选择盒模型模式，为了达到兼容的目的，我们一般在页面上加上一个DOCTYPE的声明标签，这样就都默认使用标准盒模型（不考虑ie8及以下远古版本）。那如果我们需要使用怪异模型怎么办呢？css3给我们增加了一个很棒的属性——box-sizing，其语法为

当属性值为content-box时，盒模型为标准盒模型；为border-box |时，盒模型为怪异盒模型；为inherit时，将从父元素继承。

注：width/height/border/padding都是单独占用空间的，而margin并非单独占用空间，比如两个相邻的div的margin都是200px，那么这两个div中间的间距只有200px。

有了上述的相关知识后我们再来看背景，背景应用的范围时box-sizing的范围，其主要属性及属性值如下：

注：

1.所有背景属性不能继承！！！

2.背景还可以时渐变色，示例代码如下（更多信息请查找gradient属性）：

3.背景图和背景色应同时指定，这样背景图不可用时背景色会替代

4.背景位置background-position通常情况为两个参数：横向位移和竖向位移，可以是数值或者百分比（默认均为0%），偏移后的坐标点为背景图中心的坐标点。当然也可以用top/bottom/center，left/right/center这两组参数替代；甚至还可以只用top/bottom/center/left/righ中的一个参数替代，这样意味着另外一个方向上的参数为center。例如background-position:top的含义其实是background-position:top center或者background-position:center top。

2 边框（border）

1.边框可以分开写（border-width），也可以合并写（border），还可以单边写（border-top）。

边框常用属性有：

合并的语法为：

单边（以上边框为例）的语法为：

注：当边框样式为 groove | ridge | inset | outset时，边框的颜色要适当淡一点，否则看不出效果

2.边框还可以加（椭）圆角，其语法为：

length用数值表示圆形的半径(单数值)或者椭圆的半长轴，半短轴（双数值并用“/”分开），负值无效：

percrntage用百分比表示圆形的半径(单数值)或者椭圆的半长轴，半短轴（双数值并用“/”分开），负值无效：

注：当百分比有两个数值是，第一个数值是width的百分比，第二个数值是height的百分比。

定义（椭）圆角顺序是以左上角开始，按顺时间方向，跟padding/margin一样，border-radius可以简写。下面举两个例子可以清楚的看出border-radius的用法:

3.边框图像（border-image）

这个暂时用的不多，准备下次总结图像的特殊使用方法时详解。

3 列表样式

基本属性如下：

1. 符号样式（list-style-type）：列表前标记的类型，其在ol和ul中有效，在dl中无效；主要属性值有 none | circle | square | decimal 等等，更多可以查看相关文档。注：ol和dl本质上就是list-style-type属性值不同。
2. 列表符号位置（list-style-position）：表明列表前面符号的位置，其属性值为 outside（默认）| inside。当属性值为outside时，列表符号不占内容位置，其位于padding中；当属性值为inside时，列表符号占用内容位置。
3. 列表标记图像（list-style-image）：用图像替代列表符号，其属性值为图片的url。注：list-style-image会覆盖掉list-style-type；我们也尽量不要使用这个属性，因为其尺寸不能改变，不能自适应屏幕大小，可以使用背景替代。

4 链接样式

链接样式其实就是该链接在不同的状态下显示的文本样式，具体的文本样式我们之前有讲过，这里就不赘述了，具体我们来说一说链接的几个状态及表示方式。

1. a:link - 普通的、未被访问的链接
2. a:visited - 用户已访问的链接
3. a:hover - 鼠标指针位于链接的上方
4. a:active - 链接被点击的时刻

通过以上伪类+样式可以设置链接在不同状态下的显示形式。