CSS学习笔记--初级版2

一、元素类型

• 行内元素

  • 一行并列

  • 不设置宽高：宽高默认是内容宽高

• 行内块元素

  • 一行并列

  • 可以设置宽高：宽高默认是内容宽高

  • 多个行内块之间有可控间隙

• 块级元素

  • 独占一行

  • 可以设置宽高

    • 默认宽度是父元素的宽度

    • 默认高度是内容的高度

二、元素类型的转换样式

display

• inline 行内

• inline-block 行内块

• block 块

• none 不显示

三、尺寸

• width 宽度

• height 高度

四、文本样式

• font-size 文字大小

• font-family

  • 字体类型

  • 可以写多个值，多个值通过逗号分隔

  • 从左往右，有哪一个用哪一个

• font-style 是否倾斜

• font-weight

  • 数值

    • 100 细

    • 400 标准

    • 700 加粗

    • 900 更加粗

  • 单词

    • ligther 细

    • normal 标准

    • bold 加粗

    • bolder 更加粗

• color 颜色

  • 单词

  • rgb

  • rgba

  • 十六进制

• text-align

  • 文字对齐

  • 可以让 文本 行内元素 行内块元素 水平方向对齐

• text-indent 首行缩进

• text-transform

  • 转大小写

  • touppercase 转大写

  • tolowercase 转小写

• text-decoration

  • 文本内容划线

    • none 没有

    • overline 上划线

    • underline 下划线

    • line-through 删除线

• letter-spacing 字间距

• word-spacing 词间距

• line-height 行高

五、盒模型

• 盒模型组成

  • content 内容

    • 真实显示内容的区域

  • padding 内边距

    • 内容和边框之间的间隙

    • 不能设置负数

    • 一般不会给行内元素设置padding

  • border 边框

    • 复合样式

    • border 四边 宽度 外观 颜色

    • border-top-style

    • border-top-color

    • border-top-width

    • border-top 宽度 外观 颜色

    • border-style 上右下左

    • border-color 上右下左

    • border-width 上右下左

  • margin 外边距

    • 一个盒子和另一个盒子之间的间隙

    • 可以设置负数

    • 一般不会给行内元素设置margin，不会生效

    • margin 塌陷

      • 上面的盒子给 下margin，下面的盒子给 上margin，按照大的取值

      • 父子盒子都设置了margin，父盒子和子盒子之间的margin没有

        • overflow hidden

        • 上 padding

        • 上 边框

        • 脱离标准文档流

• 标准盒子模型

  • 设置的宽高 就是 内容区域的尺寸

  • 整体尺寸 = 内容(设置的宽高) + padding + border + margin

• 怪异盒子模型

  • 整体尺寸 = 内容 + margin

  • box-sizing

    • 默认 content-box

    • 设置 border-box