这是我参与「第五届青训营 」笔记创作活动的第2天

本堂课重点内容

• css是什么以及如何使用
• css选择器以及特异度
• 布局的概念以及应用
• 块级盒子与行级盒子的区别
• 主轴与侧轴对齐
• flex布局与grid布局

css是什么

• css是用来定义页面元素的样式的，比如设置字体和颜色、设置位置和大小、添加动画效果等等。

• 在页面钟使用css有三种方式，分别是外链式、嵌入式和内联式。

css选择器

• 通配符选择器：*，表示选中所有标签。

• 标签选择器

• id选择器(id的值在页面中是唯一的)

• 类选择器(用class标识，可以出现多次)

• 属性选择器

布局是什么

• 简单来说布局就是定义网页各个元素的排列方式，把元素按正确的大小摆放在正确的位置上。

• css布局总的分为三种，分别是常规流、浮动和绝对定位。

块级vs行级

• 块级盒子：

不和其他盒子并列排放，默认自己独占一行，块级盒模型适用所有的盒模型属性。

块级常用元素有body、article、div、h1~h6、p、ul、li等等。

• 行级盒子：

可以和其他行级盒子一起放在一行或拆开成多行，行级盒模型中的width、height是不适用的。

行级常用元素有span、em、strong、cite、code等等。

• display属性

我们可以通过display属性来转换行级盒子或者块级盒子。

主轴与侧轴

• 主轴方向就是元素的流向，侧轴就是与主轴垂直的方向

• 主轴方向用justify-content属性做对齐

• 侧轴方向用align-items对齐，如果不设置属性值stretch，默认的值就是，会把里面所有元素的高度撑到和容器一样高。

flex布局

• 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
• flex-grow：有剩余空间时的伸展能力。

例如：

• flex-shrink：容器空间不足时收缩的能力。
• flex-basis：没有伸展或收缩时的基础长度。

Grid布局

• flex布局是一种单一方向的布局，有的时候我们需要二维的布局，例如下图所示：

• grid布局是先将元素划分成一个个网格，然后再设置每一个子项占哪些行/列。

本文若有不足之处，欢迎纠正！😊