盒子模型

CSS链接

链接有四种状态：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
color属性用来颜色修饰；text-decoration 属性大多用于去掉链接中的下划线；还可以添加更多的属性来修饰

CSS列表

修改用于列表项的标志类型，可以使用属性 list-style-type
其值针对于有序列表：lower-alpha、upper-alpha、lower-roman、upper-roman；对于无序列表：disc、circle、square、none等

将图像作为列表项标记： list-style-image

ul li {list-style-image : url(xxx.gif)}

利用 list-style-position确定标志出现在列表项内容之外还是内容内部。

为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style

li {list-style : url(example.gif) square inside}

缺少的值自动填充默认值。

CSS表格

设置表格边框，使用 border 属性

table, th, td
  {
  border: 1px solid blue;
  }
  
table
  {
  border-collapse:collapse;
  }

例中的表格具有双线条边框。如果需要把表格显示为单线条边框，使用 border-collapse 属性。

border-collapse 属性设置是否将表格边框折叠为单一边框：
caption-side设置表格标题的位置。
text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中。vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐。
控制表格内边距：padding 属性

CSS轮廓

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

outline在一个声明中设置所有的轮廓属性。
outline-color设置轮廓的颜色。
outline-style设置轮廓的样式。
outline-width设置轮廓的宽度。

文档流

网页是一个多层结构，一层摞着一层，通过css可以分别为每一层来设置样式，作为用户只能看到最上面一层，这些层中，最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中排列。

对我们来说，元素主要有两个状态，在文档流中，不在文档流中。

在文档流中，块元素：独占一行，且默认宽度是父元素的全部，默认高度被内容撑开。行内元素：不会独占一行，只占自身大小，行内元素在页面自左向右排列，若一行不能容下所有行内元素，则换行。

盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
内容区content、内边距padding、边框border、外边距margin。

一个盒子的可见框的大小，由内容区、内边距和边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算
1、内容区
内容区的大小由width、height两个属性来设置。
2、边框
至少需要设置三个样式：border-color、border-width（有默认值，一般是3个像素）、border-style。

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

红色虚线代表的是border边框，蓝色区域部分是元素内容，蓝色框与红色虚线框之间的区域就是内边距padding，红色虚线框border以外的部分称之为外边距margin。
假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素。

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

注意：关于浏览器的兼容性，根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。然而IE5.X 和 6的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

CSS内边距

padding 属性定义元素边框与元素内容之间的空白区域。该属性接受长度值或百分比值，但不允许使用负值。

内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距上。

h1 {padding: 10px;}
#所有 h1 元素的各边都有 10 像素的内边距
h1 {padding: 10px 0.25em 2ex 20%;}
#按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值

也可以通过使用下面四个单独的属性，分别设置上、右、下、左内边距：padding-top、padding-right、padding-bottom、padding-left。
注意：百分数值是相对于其父元素的 width 计算的，如一个段落的父元素是 div 元素，那么它的内边距要根据 div 的 width 计算

CSS边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。border 属性允许你规定元素边框的样式、宽度和颜色。
注意：元素的背景是内容、内边距和边框区的背景。
1、样式
border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。默认样式为none

p.aside {border-style: solid dotted dashed double;}
#可以为一个边框定义多个样式

如果是为元素框的某一个边设置边框样式，可以使用下面的单边边框样式属性：border-top-style、border-right-style、border-bottom-style、border-left-style。
2、宽度
通过 border-width 属性为边框指定宽度。它们的值可以是长度值也可以是关键字（thin、medium、thick） 3 个关键字的具体宽度并没有被定义。也可以通过下列属性分别设置边框各边的宽度：border-top-width、border-right-width、border-bottom-width、border-left-width。四个值就是按照上右下左顺序设置，值与值空格隔开。

注意：如果边框样式为 none（如果不设置样式，则默认为none），即边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为 0，而不论您原先定义的是什么。
3、颜色
默认的边框颜色是元素本身的前景色。**如果没有为边框声明颜色，它将与元素的文本颜色相同。**即color的属性值

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

同样可以指定四个边的颜色，规则同宽度设置类似，如果颜色值小于 4 个，值复制就会起作用。
注意：特殊情况下想要创建不可见的边界框，可以将border-color设置成transparent。

CSS外边距

如果不加以声明，margin 的默认值是 0。
margin-top：上外边距，设置一个正值，元素会向下移动
margin-bottom：下外边距，设置一个正值，其下边的元素会向下移动。
margin-left：左外边距，设置一个正值，元素会向右移动。
margin-right：默认情况下其不会产生任何效果

注意：元素在页面是按照自左向右的顺序排列的，所以默认情况下我们设置的左、上外边距会移动元素自身，而下右外边距会移动其他元素

h1 {margin : 10px 0px 15px 5px;}

水平布局

一个元素在其父元素中，水平布局必须满足以下等式：
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right =其父元素内容区的宽度

如果相加使等式不成立，则称为过度约束，则等式会自动调整。
1、如果这七个值没有为auto的情况，则浏览器会自动调整margin-right的值使等式满足。
2、其中有三个可以设置为auto，分别是width、margin-left、margin-right
3、若某个值为auto，则会自动调整为auto的那个值使等式成立。
4、如果将一个宽度和外边距设置为auto，则宽度会自动调整到最大，而设置auto的那个外边距自动为0
5、如果三个值都设置为auto，则宽度最大，外边距都为0
6、如果将两个外边距设置为auto，宽度为固定值，则会将外边距设置为相同的值，利用这个特点使一个元素水平居中在父元素。

垂直布局

默认情况下，父元素的高度被内容撑开。如果给父元素设置高度，则设置多少就是多少。

CSS外边距合并/折叠

外边距合并指的是，相邻的垂直方向外边距会发生折叠。
1、兄弟元素间的相邻垂直外边距会取两者中的较大值。特殊情况，如果一正一负，则取两者的和；如果都是负值，取绝对值较大的那个。
2、父子元素间的相邻外边距，子元素的会传递给父元素（上外边距），其折叠会影响到页面的布局，必须进行处理。其一可以设置padding-top，也可以为父元素设置边框border-top
注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

行内元素的盒模型

行内元素不支持设置宽度和高度，比如span、a，但是行内元素可以设置padding，垂直方向padding上不会影响页面布局；行内元素可以设置border，垂直方向border上不会影响页面布局；行内元素可以设置margin，垂直方向上不会影响页面布局。

但是如果想让行内元素变为块元素可以借助display属性。display有两个可选值，inline：将元素设置为行内元素；block：将元素设置为块元素；inline-block：将元素设置为行内块元素，即可以设置宽高，又不会独占一行。；table：将元素设置成表格；none：元素不在页面中显示，即隐藏，位置也不占。

visibility属性，默认值visible，元素在页面正常显示；hidden值，元素在页面中隐藏，不显示，但是位置还占着。

盒子大小

默认情况下，盒子可见框大小由内容区、边框、内边距共同构成。
box-sizing可以用来设置盒子尺寸的计算方式，其默认值为content-box，即宽度高度用来设置内容区大小；border-box，宽度和高度用来设置整个盒子可见框的大小，即宽高度是指内容区、内边距、边框的总大小

轮廓阴影和圆角

1、outline属性用来设置元素的轮廓线，用法和border一模一样，不同的是，轮廓不会影响页面布局，影响到整个可见框的大小。

2、box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局，第一个值水平偏移量，正值向右移动，负值向左移动；第二个值叫垂直偏移量，正值向下移动，负值向上移动；第三个值：阴影的模糊半径10px 值越大 阴影越模糊；第四个值 阴影的颜色。

3、border-radius可以分别指定四个角的圆角，规则是左上、右上、右下、左下；当为三个值的时候（找对角）。
将元素设置为圆形：border-radius：50%；