盒子模型-元素类型-背景与列表样式

盒子模型：两种

标准盒模型下盒子的大小 = content + border + padding + margin

怪异（IE）盒模型下盒子的大小=width（content + border + padding） + margin

HTML文件头的（Doctype文档类型）声明浏览器用标准盒子模型解析

*相邻盒子的相邻外边距会重叠而不是叠加（只计算大的外边距）

*box-sizing:border-box；指定该属性后浏览器会根据设定的宽高减去内外边距边框智能计算宽高。content = width - border - padding - margin

display 属性规定元素应该生成的框的类型

块级元素，占一行

,~

,

,
• ,
  ,

  ,

  ,

  等

  行内元素（内联元素），在一行显示，占满一行才会在下行显示

  ,,等

  *替换元素，浏览器根据其标签的元素与属性来判断显示的具体内容

  ,等

  背景样式

  background-color: ; background-image: ; 包含内边距和边框，不包含外边距；背景图片覆盖背景颜色

  *边框颜色默认和内容字体颜色一样

  background-position 设置背景图像的起始位置（根据所在容器），第一个个值水平位置，第二个值垂直位置，只写一个第二个默认居中（可写百分比、具体数值、top，right，left，bottom，center）

  background-attachment 背景图像是否固定或者随着页面的其余部分滚动      fixed固定  scroll滚动

  background 简写，后面的属性不分先后顺序，用空格分隔

  列表样式

  list-style-type 列表项目标记类型（圆点，正方形...）

  list-style-position 列表项目标的位置；inside第二行文本缩进 |  outside第二行文本不相对项目标记缩进

  list-style-image 用图片设置列表项目标记

  list-style 简写，后面的属性不分先后顺序，用空格分隔；list-style-image覆盖list-style-type