理解CSS | 青训营笔记

眩晕的洋葱
64 阅读4分钟

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

1、CSS是什么？

  • Cascading Style Sheets
  • 用来定义页面元素的样式
    • 设置字体和颜色
    • 设置位置和大小
    • 添加动画效果

2、样式选择优先级

  • !important声明的样式的优先级最高；
  • 内联 > 嵌入 > 外链； image.png

3、选择器优先级

image.png

常见选择器有：id选择器、类选择器、通配符选择器...... 他们之间也有优先级之分：

  • 标签选择器、伪元素选择器：1
  • 类选择器、伪类选择器、属性选择器：10
  • id选择器：100

伪类（pseudo-classes）选择器：

  • 不基于标签和属性定位元素
  • 伪类分类：
    • 状态伪类

image.png - 结构伪类

image.png

4、颜色

rgb、hsl、alpha（透明度）

5、字体

font-family、font-size、font-weight、font-style

6、line-height

两行文字的基准线（baseline）之间的距离 image.png

7、css计算

image.png image.png

8、布局（Layout）是什么？

计算内容大小与位置，放在相应的位置； image.png

  • 布局的相关技术：
    • 常规流
      • 行级
      • 块级
      • 表格布局
      • FlexBox布局
      • Grid布局
    • 浮动
    • 绝对定位
1、盒子模型

盒子模型分为：标准盒模型、怪异盒模型（IE盒模型） 区别（横向）：

  • 标准盒模型：width、padding、border、margin
  • 怪异盒模型：width（width+padding+border）、margin

扩展：

  • 我们在面试题中看到的css题目像是画一个三角形、扇形这种图形时，我们用到的就是属性就是border属性；
  • margin：auto可以使元素居中；
  • 如果两个元素在垂直方向上同时设置了margin值，会发生折叠的现象，我们可以使用浮动、定位等方式去解决这种折叠现象

标准盒模型与怪异盒模型的转换： 标准盒模型设置：box-sizing:content-box； 怪异盒模型设置: box-sizing:border-box;

2、overflow(溢出)

overflow：在一些已经指定宽高的盒子里文本超过容易本身的宽高时，可以使用overflow去控制文本是否溢出； overflow有三种值：visible（默认）、hidden（截去所超出的文本）、scroll（隐藏超出的文本，有滚动条）

3、块级和行级

块级元素：display:block 可以设置宽高，单独显示一行；

行级元素：display:inline 不可以设置宽高；

行内块元素：display:inline-block 本身是行级，可以放在行盒中；可设置宽高，作为一个整体不会被拆散成多行；

display:none 排版时完全被忽略，即元素被隐藏起来；

4、排版上下文
4.1、行级排版上下文

image.png

4.2、块级排版上下文

image.png tips：常考：如何触发BFC？BFC有什么作用？BFC的特点？

BFC的排版规则：

  • 盒子从上到下摆放
  • 垂直margin合并
  • BFC内盒子的margin不会与外面的合并
  • BFC不会和浮动元素重叠
4.3、flex box布局

image.png

flex布局可以轻松的解决元素垂直水平居中的问题

  • 对设置flex布局的父容器：
    • flex-direction （主轴方向）
    • flex-wrap（是否换行）
    • flex-grow
    • justify-content（沿着主轴方向元素的排列）
    • align-items（沿着交叉轴方向元素的排列）
    • align-contents（有多条轴才起作用）
4.4grid布局

grid布局即网格布局，是一个二维的布局方式，由纵横橡胶的两组网格线形成的框架性布局结构 1、容器属性

  • display属性
  • grid-template-columns 属性， grid-template-rows 属性
  • grid-row-gap 属性， grid-column-gap 属性， grid-gap 属性
  • grid-template-areas 属性
  • grid-auto-flow 属性
  • justify-items 属性， align-items 属性， place-items 属性
  • grid-auto-columns 属性和 grid-auto-rows 属性

2、项目属性

  • grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性
  • grid-area 属性
  • justify-self 属性、align-self 属性以及 place-self 属性
4.5float浮动
  1. 浮动是什么？
  2. 如何清除浮动？有哪几种方法？

总结：

本次课程韩老师讲的很详细，从css是什么，到css里面的各种属性进行了讲解；讲解的都是css大致的学习方向，并且对css里面不同的东西做出了一些比较典型的讲解，像选择器、字体、布局等都讲解了一遍，但是由于上课时间有限，没有一一详说，需要我们在老师讲的方向上进行深挖，像讲到css的选择器和字体，那我们要学会扩展到css如何计算优先级，以及css哪些可以继承和哪些不可以继承？像讲到布局后，我们要知道常见的两栏布局和三栏布局是如何实现的？以及一些浮动的知识点，也要再继续去学习。

avatar
文章
阅读
粉丝