【青训营】- CSS基础

知府松
214 阅读4分钟

一、本堂课重点内容：

  1. CSS及其的基本概念
  2. CSS的学习方法
  3. CSS基础知识
  4. CSS进阶知识

二、详细知识点介绍：

1、CSS的组成部分

  • 选择器： 指定需要添加样式的元素
  • 声明： 指定需要添加的样式名称和样式类型，也就是属性和属性值
  • 属性： 样式名称
  • 属性值： 样式类型，也就是样式的具体效果

选择器之前用逗号分隔，声明之间用分号分隔

2、CSS的继承关系

CSS中的继承，指的是特定的css属性向下传递到后代元素。其中部分属性可以继承，一些属性不可以继承，因此，只要知道可以继承的属性即可。

  1. 字体系列属性
  2. 文本系列属性
    • text-indent：文本缩进
    • text-align：文本水平对齐
    • line-height：行高
    • word-spacing：增加或减少单词间的空白（即字间隔）
    • letter-spacing：增加或减少字符间的空白（字符间距）
    • text-transform：控制文本大小写
    • direction：规定文本的书写方向
    • color：文本颜色
  3. 元素可见性：visibility
  4. 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
  5. 列表属性：list-style-type、list-style-image、list-style-position、list-style
  6. 生成内容属性：quotes
  7. 光标属性：cursor

3、CSS的学习资源

4、CSS的常用规则

4.1 盒子模型

CSS box-model

盒子模型结构如上图所示。目前有两种盒子模型，分别是W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)，可以使用一下CSS代码进行盒子模型的切换。其中，content-box指的是标准盒子模型，border-box指的是IE盒子模型。CSS中的盒子默认是标准盒子模型。

box-sizing: content-box/border-box

两种盒子模型的区别：标准盒子模型中的height和width设置的是content的高度和宽度，而IE盒子模型中的height和width设置的是border、padding和content总共的高度和宽度。

盒子的占用面积：border、padding和content总共的高度与宽度之积

4.2 弹性布局

只需要在容器的样式中加上display: flex声明，就可以得到一个弹性布局模型。此时容器类似于块级元素，但宽度默认由子元素决定；子元素类似于inline-block元素，可以设宽高且不换行。

  1. 使用在父元素上的属性
    • flex-direction：控制子元素的排布方向（主轴方向）
      • row：从左到右
      • row-reverse：从右到左
      • column：从上到下
      • column-reverse：从下到上
    • flex-wrap：定义轴线方向排不下时，如何换行
      • nowrap：不换行
      • wrap： 换行，第一行在上方
      • wrap-reverse：换行，第一行在下方
    • flex-flow：这个属性是flex-directon和flex-wrap的结合属性，属性值也是这两个属性值的自由组合
    • justift-content：设置主轴方向上的空间分配，或对齐方式
      • flex-start：在父元素的左侧
      • flex-end： 在父元素的右侧
      • center： 在父元素的中间
      • space-between：两端对齐，各项之间的距离都相等
      • space-round：每一项之间的间隔都相等
    • align-items： 定义与主轴交叉的轴（副轴）上的对齐方式
      • flex-start：在父元素的左侧
      • flex-end： 在父元素的右侧
      • center： 在父元素的中间
      • stretch： 每个子元素都在副轴方向上占满父容器
      • baseline：每一项的第一行文字基线对齐
    • align-content: 定义多根轴向的对齐方式，若只有一根轴线，该属性不起作用。
  2. 使用在子元素上的属性
    • order：子元素的排列顺序，数值越小越靠前
    • flex-grow：子元素占据父元素的放大比例，默认是0，即存在剩余空间，也不放大
    • flex-shrink： 定义子元素的缩小比例，默认为1，即空间不足时，子元素缩小；为0时，不缩小

三、课后个人总结：

上一节的内容感觉只是机械的把很多知识点罗列了出来，按理说，毕竟应该是给自己看的，要根据自己的实际情况，详略得当，应该主要写出自己不熟悉或没见过的知识点。所以，在这次笔记中，我只是复习了比较重要的和自己不熟悉的知识点，而不是系统性的把所有知识点进行归纳和总结，毕竟这只是我的个人笔记，不是学习资料。其中，有的语句是参考了课件，有的是根据自己的理解进行的总结，包括一些定义上的概括。

四、引用参考：

avatar
文章
阅读
粉丝