CSS盒模型

视觉格式化模型

• 视口(viewport)：浏览器的可视区域，用户通过视口浏览网页
• 块级元素：会被格式化成块状的元素，例如：p,div,section等，将display设置为block,list-item,table使元素变为块级
• 行级元素：不会为其内容生成块级框，让其内容分布在多行中，display设置为inline,inline-block,inline-table使元素变成行级
• 盒子的生成：每个块级元素生成一个主块级盒，用它来包含子集盒；每个行级元素生成一个行级盒，行级盒分布于多行
• 行级盒的margin-top和margin-bottom不会产生效果，margin-left和margin-right会产生作用，行级盒的padding-top和padding-bottom不影响行布局。
• 块级盒子中子盒子的生成，块级盒子中可以包含多个子块级盒子，也可以包含多个子行级盒子，不在行级元素里面的文字，会生成匿名行级盒。块级盒子中不能同时包含块级盒和行级盒子，遇到这种情况会用匿名块级盒来包含行级盒。
• 行级盒子内的子盒子的生成：行级盒子内可以包含行级盒子，行级盒子包含一个块级盒子，会被块级盒子拆分成两个子行级盒子，这两个盒子又分别被匿名块级盒子包含。
  

aaa

bbb

ccc

h1包含的是一个块级盒子，此时它就会将em和strong两个行级盒子分割开，两个匿名块级盒子包含行级盒子

块级格式化上下文排版细节

• display属性：block生成块级盒；inline生成行级盒；inline-block生成行级盒，为其内容生成块级盒，生成的块级盒可以放在行级盒内；none在排版时将元素忽略。
• visibitily:控制元素展示，取值：visible、hiddle(透明)、collspan
• Generated content:控制在CSS中多产生一个盒子存放指定的内容。用来和:after及:before 伪元素一起使用，在对象前或后显示内容。

行级格式化上下文排版细节

• line-height：两行baseline之间的距离
• baseline：小写字母的下边缘
• vertical-align:定义盒子所处的行盒(line box)的垂直对齐关系
  -取值有baseline（默认值，元素放置在父元素的基线上）
  sub（垂直对齐文本的下标）
  super（垂直对齐文本的上标）
  top（把元素的顶端与行中最高元素的顶端对齐）
  text-top（把元素的顶端与父元素字体的顶端对齐）
  middle（把此元素放置在父元素的中部）
  bottom（把元素的顶端与行中最低的元素的顶端对齐）
  text-bottom（把元素的底端与父元素字体的底端对齐）
  百分比(相对于元素自身的行高)
• lists-style-type:设置列表项标记的类型
  -取值有：none
  disc 默认。标记是实心圆。
  circle 标记是空心圆。
  square 标记是实心方块。
  decimal 标记是数字。
  decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
  lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
  upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
  lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
  upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
  lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
  lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
  upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
  hebrew 传统的希伯来编号方式
  armenian 传统的亚美尼亚编号方式
  georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
  cjk-ideographic 简单的表意数字
  hiragana 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
  katakana 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
  hiragana-iroha 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
  katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）
• list-style-position:设置列表项标记的位置
  -取值：inside : 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
  outside :默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
  inherit :规定应该从父元素继承 list-style-position 属性的值。
• list-style-image:把图像设置为列表中的项目标记,取值url
• background-size:cover，图片始终覆盖此区域
• border-radius:定义盒子的圆角
• box-shadow:向框添加一个或多个阴影
  -box-shadow: h-shadow v-shadow blur spread color inset;
  h-shadow 必需。水平阴影的位置。允许负值。
  v-shadow 必需。垂直阴影的位置。允许负值。
  blur 可选。模糊距离。
  spread 可选。阴影的尺寸。
  color 可选。阴影的颜色。请参阅 CSS 颜色值。
  inset 可选。将外部阴影 (outset) 改为内部阴影。
• -