易忘知识点

z-index

Z-index 仅能在定位元素上奏效（例如 position: relative; 不改变其位置还生效z-index）

盒子模型 box-sizing:border-box

传统盒子模型 = 内容的宽度和高度 + 内边距 + 边框 CSS3盒子模型 = 内容的宽度和高度(包含了内边距+边框) box-sizing:border-box

内边距 padding

  1. padding会撑开盒子，但如果没指定宽度则不会
  2. 行内元素尽量只设置左右内外边距，不设置上下内外边距，因为有兼容性问题

外边距 margin

image.png

定位 position

  1. 相对定位移动后 原来的位置会保留
  2. 绝对定位 如果父级没有定位则会以浏览器为准

image.png

浮动 flow

  1. 浮动会脱落标准流（脱标），会显示在另一个未设定浮动的元素上面（不占位置）
  2. 元素浮动后会变成行内块级元素
  3. 出现以下情况需要 清除浮动 ,否则影响布局
    1. 父级没高度
    2. 子盒子浮动了
    3. 影响下面布局了

image.png

文本 font

  1. 水平居中 text-align:center

    不仅可以文字居中，还可以让行内元素和行内块级元素也居中

  1. 字体粗细 font-weight

    100-900, 400=norman, 700=bold 不跟单位

  1. 字体系列 font-family

image.png

  1. 文本缩进 text-indent: 10px | 2em;em相对单位即当前元素font-size的1个文字大小。

行 | 行内块 | 块元素

image.png
image.png
image.png
image.png

背景 background

image.png

圆角 border-radius

image.png
image.png

鼠标样式 cursor

image.png

vertical-align 属性

image.png

图片|表单对齐

image.png

图片底部空白间隙

image.png

溢出文字省略号 …

单行

image.png

多行

image.png

行高的继承性

image.png