前端系统课程 - 11. CSS 布局与定位 (1)

文档流与高度

  • 元素的自动高度，是由其内部所有文档流元素的高度总和决定的（注意“决定”不代表“相等”）。

  • 文档流就是文档内元素流动的方向。

    • 行内元素（内联元素）的流动方向是从左往右，当一行不够时换行；

    • 块级元素（外联元素）的流动方向是从上往下，每个块级元素独占一行，宽度不影响这个特性；

  • 行内元素中的文字换行时，默认是不会将一个完整的英文单词或连续的字母和数字截断的，而会将汉字截断；如果想让换行时截断任意字符，可以给行内元素添加属性 word-break: break-all。

  • 字体的居中不是以中线对齐，而是以基线对齐。

  • 字体的默认行高是由每种字体内置的推荐行高决定的，不同的字体有不同的推荐行高。

  • 行内元素的自动高度等于默认行高、上下内边距以及上下边框的总和。

  • 实际开发中，尽量不使用 height 属性设置元素的高度。

脱离文档流与定位

  • 除了浮动属性外，使用元素的定位属性也可以使元素脱离文档流，例如相对定位和固定定位。

  • 当子元素脱离文档流后，父元素的高度会塌陷。

  • 元素脱离文档流后，元素拥有行内块级元素特性，元素的自动宽度由内部的内容决定。

  • 固定定位 fixed 会使元素相对于 <body> 元素定位。

  • 使用绝对定位 absolute 定位元素时，一般要将元素的父元素设置为相对定位 relative，简称“子绝父相”。

背景图

  • 使用 background-position 属相来设置背景图的定位方式。

  • 使用 background-size 属性来设置背景图的填充方式。

边框的妙用

利用加粗加大的边框，配合不同的样式属性，可以做出很多不同的效果，例如做个三角形：

1
2
3
4
5
.test{
    width: 0;
    border: 10px solid transparent;
    border-left-color: red;
}

图标资源

  • 阿里图标库 了解一下；

  • <svg> 元素的宽高需要同时设置；颜色设置使用 fill 属性。