背景附着

• background-attachment:scroll|fixed
• 背景附着就是指背景图片的滚动形式，默认是scroll。设置scroll就是图片会随着对象的滚动而滚动，而设置fixed背景图会一直固定在当前位置不受滚动的影响，和固定定位类似。

背景简写

• 简写顺序background:背景颜色 背景图片地址 平铺 滚动 位置
• 以上的顺序并不是严格要求的，但是为了方便阅读建议使用这种顺序来书写。
• 背景颜色包含了边框内边距内容
• 背景图片包含padding和内容
• 盒子模型：第一层border，第二层padding内容，第三层背景图片，第四层背景颜色，第五层外边距

盒模型

网页布局的本质

• 要明白网页上是不允许自由拖拽排版的，那么应该怎么实现UI设计出来的漂亮网页呢？实际上是通过盒模型来实现的。我们把网页上的所有元素都放进盒子里，然后再通过css来调整盒子的位置样式，从而实现精确的展示，这就是网页布局。

认识盒子模型

• 盒子的组成：内容+填充padding+边框border+外边距margin
• 以上四个就是盒子的基本组成，但是在浏览器调试工具中看会发现盒子大小并没有算上外边距，因为浏览器计算的是盒子实体大小，不是实际大小。真正的实际大小需要全部计算上。

盒子边框border

• 格式：border:boder-width border-style border-color
  • border-width是设置线的粗细。border-color设置的是边框的颜色。这里重点说一下border-style，它又四个可选择属性：
    • none（默认值）就是没有边框
    • solid（最常用的）设置实线类型的边框
    • dashed 设置虚线类型的边框
    • dotted 设置点线类型的边框

表单控件边框清零

• 表单的一些控件是自带了边框样式的，而且因为各大浏览器内核不同，渲染出来的效果也不一样。为了良好的兼容性，实现所有浏览器样式统一，这里就要用到表单控件边框清零。
• 实现的方法很简单，例如你要清零input输入控件的边框：
  input {
border:0;
}
.class {
border:1px solid #ccc;
}
• 从上面例子的代码可以看出，首先直接取消控件的边框，然后再给具体的控件设置一个border样式，因为设置了具体的样式，所以所有浏览器渲染出来的效果都是一样的。

取消轮廓线

• 在一些链接和输入框，当然光标焦点到之后，会一条蓝色的轮廓线，但同样是因为浏览器内核不同，它们显示的样式不一样，所以我们为了统一样式，会取消这条轮廓。
• 取消方法：
  input, a {
outline：none；
}
• 把outline属性设置none，就可以取消。

a:active与a:focus的区别

• a:active是鼠标激活链接的时候，就是说鼠标点下链接时呈现的效果
• a:focus是链接获得焦点时候呈现的效果。当你鼠标点击链接时它便获得了焦点，并且焦点会一直在链接上，除非你鼠标又点击了其他东西，焦点才会转移。
• 不好理解的话，亲手试试能发现它们的不同。

盒子边框的分解细写

• 盒子的四条边框是可以自由组合来细化设置的。
• 例如：
  • 只设置上边框样式为虚线：border-top-style:dashed;
  • 只设置全部颜色为红色：border-color:red;
  • 只设置下边框粗细为2px：border-bottom-width:2px。
• 综上所述，边框的上下左右四条边框以及属性是可以自由组合来细写的。

盒子内边距

• 盒子内边距就是padding值，设置盒子内容与边框之间的距离
• 写法如下：
  • padding:10px; 设置上下右左内边距都是10px;
  • padding:10px 20px; 设置上下为10px 左右为20px；
  • padding:10px 20px 30px; 设置上为10px 左右为20px 下为30px;
  • padding:10px 20px 30px 40px;设置上为10px 右为20px 下为30px 左40px，是的当写满四个值，它的顺序是顺时针的方向来赋值。

内边距的小技巧

• 使用内边距时，为了保证内边距的距离足够，盒子会自动被撑开一点。这个特性是无法避免的，但实际上我们可以利用这个特性来实现一些小的效果。
• 例如：在行内块元素中，有多个的话，它们之间的距离因为默认外边距的原因会挨的比较近，如果在不能修改外边距的情况下怎么能让它们距离隔开一点呢。这时就可以给内边距padding设置左右值，当盒子被撑开后它们内容的距离就会增加了。而且如果给同样的标签设置内边距的话，因为值是相同的，你会发现它们增加的距离也是相等的很美观。
• 注意：padding只有在盒子设置了宽度时才会撑开盒子，如果不设置宽度或者继承父元素宽度对盒子是没有影响的。

盒子外边距

• 盒子外边距就是margin值，设置盒子外部上下左右的距离，总体写法与内边距相同。
• 写法如下：
  • margin:10px; 设置上下右左外边距都是10px;
  • margin:10px 20px; 设置上下为10px 左右为20px；
  • margin:10px 20px 30px;设置上为10px 左右为20px 下为30px;
  • margin:10px 20px 30px 40px;设置上为10px 右为20px 下为30px 左40px，是的当写满四个值，它的顺序是顺时针的方向来赋值。

如何实现用外边距让盒子水平居中

• 条件必须满足，必须是块级元素，然后必须设置了宽度。
• 格式：margin：0 auto;
• 原理：margin-left：auto的作用是把盒子左外边距撑满，即距离拉到最大，这样盒子就会跑到最右边。margin-right：auto，与之相反，是让盒子右边撑满，盒子会跑到最左边。那么怎么才能让左边和右边同时撑满呢，答案是居中。只有居中两边的外距离才能撑满的同时距离相同。