css学习系列------盒子模型、背景样式、列表样式

写在前面

• 盒子模型
  • 宽度
  • 高度
  • 边框
  • 内边距
  • 外边距
• IE盒子模型
• display属性
• 背景样式
• 列表样式

---

一、盒子模型：

1、宽度

• 宽度：width：长度值 / 百分比 / auto
• 最大宽度：max-width：长度值 / 百分比 / auto
• 最小宽度：min-width：长度值 / 百分比 / auto

2、高度

• 高度：height：长度值 / 百分比 / auto
• 最大高度：max-height：长度值 / 百分比 / auto
• 最小高度：min-height：长度值 / 百分比 / auto

3、边框属性

• 边框宽度（border-width)：设置元素边框宽度: thin/medium/thick/长度值（px、em等）

• 边框颜色（border-color）: 设置元素边框颜色：颜色/transparent

• 边框样式（border-style）：设置元素边框样式

  • none/hidden：无
  • dotted : 点状
  • dashed：虚线
  • solid：实线
  • double：双线
  • groove：3D凹槽
  • ridge：3D垄状
  • inset： 3D inset
  • outset：3D outset
  • inherit：继承

注意：有上、下、左、右四个不同的方向：border-top/bottom/left/right-width/color/style

4、内边距

（1）概念：元素的内容与边框之间的距离

（2）分为4个方向：padding-top/right/bottom/left：长度值/百分比

（3）简写：padding：值1 值2 值3 值4 可以缩写

5、外边距属性

（1）概念：元素与元素之间的距离

（2）分为4个方向：margin-top/right/bottom/left：长度值/百分比

（3）简写：margin：值1 值2 值3 值4 可以缩写

（4）垂直方向：两个相邻元素都设置外边距，则外边距为高度中最大值

---

二、IE盒子模型

• 如果有DOCTYPE文档类型声明，则按照标准盒子模型来解析。否则，各个浏览器会按照自己的方式解析。

---

三、display属性

（一）HTML元素分类：

• 块级元素，占一行：例如：

<p>、<div>、<h1>~<h6>、<ul>、<li>、<ol>、<dl>、<dt>、<dd>等

• 行内元素（内联元素），一行内显示。例如：

<span>、<a>、<em>等

（二）display属性：

• inline:元素显示为内联元素，前后无换行符。行内元素不具备宽高属性设置。

• block:元素显示为块级元素，前后有换行符。

• inline-block:元素呈现为inline，具有block相应特性。

• none:元素不显示

---

四、背景样式

• background-color：背景颜色

  • 颜色（rgb，16进制，颜色名）/ transparent
  • 背景区包括内容、内边距和边框，不包括外边距

• background-image：背景图片

  • url（绝对地址 / 相对地址）/ none
  • 默认位置为元素的左上角，并在水平和垂直方向上重复

• background-position：背景图像位置

  • 百分比 / 值 / top / right / bottom / left / center

• background-attachment：背景图像固定或者滚动

  • scroll：默认，背景图像随滚动条滚动
  • fixed：图片位置固定

• background-repeat：背景图片是否重复以及重复的方式

  • repeat / no-repeat：重复（水平和垂直方向上均重复） / 不重复
  • repeat-x / repeat-y：水平 / 垂直重复

• background：将上述背景属性简写在一个声明中

---

五、列表样式

• list-style-type：有无列表项以及何种类型的列表项

  • 有序列表
    • decimal：1，2，…
    • lower-roman：罗马数字（小写）
    • upper-roman：罗马数字（大写）
    • lower-alpha：a，b，…
    • upper-alpha：A，B，…
    • none：无
  • 无序列表
    • disc：圆点（实心），默认
    • circle：圆点（空心）
    • square：方块（实心）
    • none：无

• list-style-image：列表项为图片

  • url / none

• list-style-position: 列表项标志的位置

  • inside / outside（默认）

• list-style： 将上述列表项属性简写在一个声明中