第三章 样式 盒模型

一、css样式

• 行内样式：style="width=300px;background:red"
• 内部样式：<style type="text/css">多条css规则</style>

• 外部样式：<link rel="stylesheet" type="text/css" href="css文件路径"/>

  三者优先级：
  采取就近原则，相同属性不同值会被覆盖。
  行内样式>内部样式>外部样式

二、 盒模型

盒模型包括：元素内容、内边距、边框和外边距。

• 元素框的最内部分是实际的内容 直接包围内容的是内边距
• 内边距呈现了元素的背景
• 内边距的边缘是边框

• 边框以外是外边距 外边距默认是透明的 因此不会遮挡其后任何元素

  注意：背景应用与内容和内边距、边框组成的区域 在css中 width 和height指的是内容区域的宽度和高度 增加内边距、边框和外边距不会影响内容区域的尺寸 但是会增加元素框的总尺寸。

  内边距：padding-top padding-right padding-bottom padding-left
  注意：padding 不允许存在负值
  padding

  • 四个值 padding：上 右 下 左
  • 三个值 padding：上 左右 下
  • 两个值：padding：上下 左右
  • 一个值：padding：上下左右

  边框：border-top border-right border-bottom border-left
  border：1px【边框大小】 solid【边框样式】 red【边框颜色】；
  边框样式：
  - none 无边框
  - solid 实线
  - dashed 虚线
  - dotted 点状
  - double 双线
  - grove 3D凹槽
  - ridge 3D垄状
  - inset 3Dinset
  - outset 3Doutset
  边框颜色

  • 十六进制颜色值 #CC00FF 可简写成#C0F
  • 英文单词 red blue pink yellow green

  外边距：margin-top margin-right margin-bottom margin-left
  注意：margin允许存在负值
  margin

  • 四个值 margin：上 右 下 左
  • 三个值 margin：上 左右 下
  • 两个值：margin：上下 左右

  • 一个值：margin：上下左右

    盒模型的大小：
    宽：元素宽度+左右内边距+左右边框
    高：元素高度+上下内边距+上下边框

  盒模型的站位大小：
  宽：元素宽度+左右内边距+左右边框+左右外边距
  高：元素高度+上下内边距+上下边框+上下外边距