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 控制内联元素超太高度后的视觉显示效果
  • 合并垂直外边距，两个块级元素上下相邻，则以最大的外边距进行合并；
  • 负外边距 两个垂直边距为负值则取两个外边距的绝对值最大值，若是一正一负，取二者和的绝对值；
• 行内元素
  • 基本术语和概念
    • 匿名文本：全部为包含在行内元素的字符串，例如：
      test asdf
      其中 test为匿名文本
    • em框，字符框，其大小受字体大小控制
    • 内容区：个字符em框构成的框，也能够是元素中字符造成的框
    • 行间距 font-size 与line-height 值之差
    • 行内框 ，内容区+行间距来描述，非替换元素行内框为line-height,而替换元素为其内容区的高度；
• 垂直对齐 vertical-align该属性会上移元素；
  • top 将元素行内框的顶端与包含该元素的行框顶端对齐
  • bottom 将元素行内框的顶端与包含该元素的行框底端对齐
• 行内块元素 inline-block 将元素的角色定位为替换元素放在行中,能够设置高、宽；