CSS基础知识—【结构、层叠、视觉格式化】

结构和层叠##

• 选择器的优先级顺序： style[内联元素]选择器>Id选择器>类选择器 属性选择器>元素选择器>通配器选择器

• 重要性：@important 有这个标记的属性值，优先级最高

• 层叠：按选择器的优先顺序和出现的先后顺序排序；

视觉格式##

• 基础知识

  • 正常流： 指文本从左向右，从上向下显示，即传统的文档布局；
  • 块级元素： 在正常流中会在器框之前和之后生成换行，正常流中的块级元素会垂直摆放，通过display:block可生成块级元素
  • 行内元素 块级元素的后代，声明display:inline 生成一个行内框；

• 水平格式化

  • 元素的宽度会手：margin pading影响，是width[内容宽度]+margin-left+pading_left+boder-left+border-right+pading_right+margin_right
  • auto 属性会自动确定所需长度，而使元素框的宽度等于父元素的width，
    • 如果三个元素都为100px,则margin-right:auto;
    • 如果magin-left:auto;margin-right:auto 则会设置为相等的值将此元素在父元素中居中；
    • 如果三者都设置为auto，则外边距会设置为0 ，width会尽量宽；
  • 负外边距 作用作用用于是元素不超过父元素的宽度,如果为负值则表示该元素的起点或终点向左延伸或向后延伸；

• 垂直格式化

  • overflow 控制内联元素超过高度后的视觉显示效果
  • 合并垂直外边距，两个块级元素上下相邻，则以最大的外边距进行合并；
  • 负外边距 两个垂直边距为负值则取两个外边距的绝对值最大值，如果一正一负，取两者和的绝对值；

• 行内元素

  • 基本术语和概念
    • 匿名文本：所有为包含在行内元素的字符串，例如：
      testasdf
      其中 test为匿名文本
    • em框，字符框，其大小受字体大小控制
    • 内容区：个字符em框构成的框，也可以是元素中字符形成的框
    • 行间距 font-size 与line-height 值之差
    • 行内框 ，内容区+行间距来描述，非替换元素行内框为line-height,而替换元素为其内容区的高度；

• 垂直对齐 vertical-align该属性会上移元素；

  • top 将元素行内框的顶端与包含该元素的行框顶端对齐
  • bottom 将元素行内框的顶端与包含该元素的行框底端对齐

• 行内块元素 inline-block 将元素的角色定位为替换元素放在行中,可以设置高、宽；