第十七天学习：CSS框模型

关键字：框模型

学习计划：

• CSS框模型简介
  • border特性
  • padding特性
  • margin特性

学习记录：

• CSS框模型（box model）
  • 规定了元素框处理元素内容、内边距、边框和外边距的方式
  • 可以使用CSS分别控制每个框的顶部、底部、左边和右边边框以及页边空白和内边框；并且可以为框的每一边指定不同的宽度和颜色
  • 
  • 元素框的最内部分是实际内容，直接包含的内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后面的任何元素。
  • 背景应用于由内容和内边距、边框组成的区域。
  • width和height指的是内容区域的宽度和高度，增加内边距、外边距和外边距不会影响到内容区域的尺寸，但是会增加元素框的总尺寸。
  • 内边距、边框和外边距都是可选的，默认值是零，可以应用于一个元素的所有边，也可以应用于单独的边。
  • 外边距可以是负值，而且在很多情况下都要使用负值的外边距。
• border特性
  • border特性可用于指定代表元素的框的边框外观，可以改变表框的3种特性：
    • border-color：指示边框的颜色
    • border-style：指示边框应该是实线、虚线或双线，或者是其他的可能值之一
    • border-width：指示边框的宽度
  • border-color特性
    • 用于改变框周围边框的颜色
    • 值：
    • 可以使用下面的特性单独改变边框底部、左侧、顶部、右侧的颜色
      • bordr-bottom-color
      • border-left-color
      • border-top-color
      • border-right-color
  • border-style特性
    • 可用于指定边框的样式

    值：

    • none（没有的）：没有边框（默认值）
    • solid（固体的）：由单条实线组成
    • dotted（点线）：由一系列的点组成　
    • dashed（虚线）：由一系列的短线组成
    • double（双重的）：由两条实线组成
    • groove（凹槽）：边框看上去如同雕刻进页面中
    • ridge（山脊）：边框的外观与值groove相反
    • inset（嵌入） ：边框使框看上去如同嵌入页面
    • outset（外凸）：边框使框看上去如同位于画布之外
    • hidden（隐藏）：与none相同，但是对于表元素存在边框冲突解决方法
    • 可以使用下面的特性单独改变 框的边框底部、左侧、顶部和右侧的样式
      • border-bottom-style
      • border-left-style
      • border-right-style
      • border-top-style

扩展阅读：

问题的记录与解决：

• border-style特性中hidden的用法？