前端学习随笔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，其语法为

box-sizing :  content-box  || border-box || inherit;

当属性值为content-box时，盒模型为标准盒模型；为border-box |时，盒模型为怪异盒模型；为inherit时，将从父元素继承。
注：width/height/border/padding都是单独占用空间的，而margin并非单独占用空间，比如两个相邻的div的margin都是200px，那么这两个div中间的间距只有200px。

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

/*为背景设置一个纯色*/
background-color: <color> | transparent(默认) | inherit
/*指定在元素的背景中出现的背景图像(这可以是静态文件，也可以是生成的渐变)*/
background-image: <url> | none(默认) |inherit
/*指定背景应该出现在元素背景中的位置*/
background-position: position-x position-y
/*指定背景是否应该被重复(平铺)*/
background-repeat: repeat(默认) | repeat-x | repeat-y | no-repeat | inherit
/*当内容滚动时，指定元素背景的行为，例如，它是滚动的内容，还是固定的?*/
background-attachment: scoll(默认) | fixed | local
/*在一行中指定以上五个属性的缩写*/
background:[<bg-color>||<background-image>||<background-repeat>||<background-position>||<background-attachment>] | inherit
/*允许动态调整背景图像的大小*/
background-size: contain | cover | <length>

注：

1. 所有背景属性不能继承！！！
2. 背景还可以时渐变色，示例代码如下（更多信息请查找gradient属性）：

/* linear-gradient属性为css3属性，对浏览器版本有要求，不过可以满足目前大部份最新浏览器，ie8及以下版本浏览器请自行查找兼容方法*/
background: linear-gradient(to bottom,  #000000 0%,#ffffff 100%);

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）。
边框常用属性有：

border-width: <length> | inherit
border-style: none | hidden | dotted | solid | dashed | double | groove | ridge | inset | outset | inherit
border-color: <color< | inherit

合并的语法为：

border: border-width border-style border-color

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

border-top: border-width border-style border-color

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

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

border-radius: <length> | <percentage>

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

border-radius: 30px;  /*圆形*/
border-radius: 30px/60px;  /*椭圆*/

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

border-radius: 30%;  /*圆形*/
border-radius: 30%/60%;  /*椭圆*/

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

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

border-radius: 1em/5em;
/* 等价于： */
border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

border-radius: 4px 3px 6px / 2px 4px;
/* 等价于： */
border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

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 - 链接被点击的时刻

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