CSS入门详解（三）

接下来的文章中列举一些CSS中内容区之外盒子模型常用属性。

• 在CSS中，可以使用颜色名称/RGB 值/十六进制值/色相、饱和度和明度来指定颜色，部分色卡如图。

• 背景

  • background-color：设置背景颜色，默认是透明的。属性值为上述所说的三种颜色值，或是linear-gradient函数来设置渐变背景。
  • background-image：设置背景图片操作。属性值为图片路径。
  • background-repeat：设置背景平铺方式操作，属性值有4种，分别为repeat 平铺 (默认)， no-repeat 不平铺， repeat-x 水平平铺，repeat-y 垂直平铺。
  • background-position：设置背景的位置操作，有3种书写风格：方位名词：top，left，right，bottom；精确单位：坐标或者百分比；混合单位：同时包含方位名词和精确单位。
  • background-size：设置背景尺寸操作。值可以为具体像素、百分比、cover（扩展图片来填满元素）、contain（缩小图片来适应元素的尺寸）。
  • background-attachment:设置背景图片是随对象内容滚动还是固定的。值可以为scroll（指定背景图片会随元素里内容的滚动而滚动，这是默认值），fixed（背景图片固定，不会随元素里内容的滚动而滚动）。
  • background-clip:设置背景覆盖的范围。
  • background-origin:设置背景覆盖的起点。

• 边框

  • border-width：设置边框粗细。值为具体像素值，如果四个参数则顺序为上、右、下、左，如果三个参数则顺序为上、左右、下，两个参数则顺序为上下、左右，如果一个参数则为设置四个方向的边框。

  • border-style ：设置边框样式，默认情况是无边框的。属性值可以为none:无边框；
    hidden:隐藏边框；dotted:点线边框；dashed:虚线边框；solid:实线边框；double:双线边框；groove:3D凹槽边框；ridge: 3D凸槽边框；inset:3D凹入边框；outset:3D凸出边框。

  • border-color：设置边框颜色。属性值同背景颜色。
  • border 属性是以上各个边框属性的简写属性。
  • border-radius：可使边框带圆角效果。属性值为具体像素值，即内切圆的半径。可以分为以下四种属性：
    • border-top-left-radius:该属性用于指定左上角的圆角半径。
    • border-top-right-radius:该属性用于指定右上角的圆角半径。
    • border-bottom-right-radius:该属性用于指定右下角的圆角半径。
    • border-bottom-left-radius:该属性用于指定左下角的圆角半径。

• 内边距

  • padding：设置内容和边框之间的距离。属性值为具体像素值，顺序同边框粗细。
  • padding-top:设置上边的内填充距离。
  • padding-right:设置右边的内填充距离。
  • padding-bottom:设置下边的内填充距离。
  • padding-left:设置左边的内填充距离。

• 外边距

  • marign：设置盒子与盒子之间的距离。属性值为具体像素值，顺序同边框粗细。
  • marign-top:设置上边的外边距距离。
  • marign-right:设置右边的外边距距离。
  • marign-bottom:设置下边的外边距距离。
  • marign-left:设置左边的外边距距离。