CSS入门 | 青训营笔记

用户8198131734702
71 阅读5分钟

标题：「理解 CSS」第四届字节跳动青训营 - 前端专场

网址：live.juejin.cn/4354/yc_CSS…

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

理解CSS

1、CSS是什么？

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

2、如何在页面中使用CSS

  1. 外链
<link rel = "stylesheet" href = "/assets/style.css">
  1. 嵌入
<style>
    li{ margin: 0; list-style: none;}
</style>
  1. 内联
<p style="margin:lem 0">Example Content</p>

3、CSS是如何工作的

屏幕截图 2022-07-25 160011.png

4、选择器 Selector

  • 找出页面中的元素，一遍给他们设置样式
  • 使用多种方式选择元素
    • 按照标签名、类名或id
    • 按照属性
    • 按照DOM树中的位置
（1）通配选择器：“*”，用来选择所有元素
<style>
    * {
        padding：0;
        margin: 0;
      }
</style>
（2）标签选择器：书写每个标签来给元素增加样式
<style>
    h1 {
        color: orange;
       }
</style>
（3）id选择器：给标签设置id属性，再为其增加样式，注意id是唯一值
<style>
    #logo {
        color: orange;
       }
</style>
（4）类选择器：为同一类型的多个元素设置样式时使用，可以出现多次，比较常用
<style>
    .logo {
        color: orange;
       }
</style>
（5）属性选择器：通过元素的属性或属性值来选中元素，为其设置样式，也可以为其做一些匹配来设置样式。
<style>
    input[type="disabled"] {
        color: #999;
       }
</style>

5、伪类（pseudo-classes）

  • 不基于标签和属性定位元素
  • 几种伪类
    • 状态伪类
    • 结构性伪类
（1）状态伪类
<style>
a:visited {//a被访问过后颜色变为灰色
    color: gray;
    }
a:hover {//a鼠标悬停时显示红色
    color: red;
    }
</style>
（2）结构性伪类：根据出现的位置来决定是否选中这个元素
<style>
li:first-child {//li的第一个孩子文字设为灰色
    color: gray;
    }
a:last-child {//li的最后一个孩子文字设为红色
    color: red;
    }
</style>

6、组合（Combinators）

在页面中，我们可以使用这些方法为元素设置CSS样式

屏幕截图 2022-07-25 162114.png

当我们想要为多个元素设置同样的样式时，我们可以采用选择器组。

7、颜色-RGB

rgb(aaa,bbb,ccc)/#aabbcc,这一串表示中a都表示红色设置，b表示黄色设置，c表示蓝色设置。

屏幕截图 2022-07-25 162612.png

8、文字

（1）字体 font-family

可以指定多个字体，但要用逗号隔开。

<style>
    h1 {
           font-family:Youyuan;
       }
</style>

通用字体族

  • Serif 衬线体
  • Sans-Serif 无衬线体
  • Cursive 手写体
  • Fantasy
  • Monospace 等宽字体
（2）大小 font-size
  • 关键字
    • small、medium、large
  • 长度
    • px、pm
  • 百分数
  • 相对于父元素字体大小
（3）字重 font-weight
  • 400-normal
  • 700-bold
（4）行高 line-height

当行高与盒子高度相等是，盒子内的文字就可以在盒子内垂直居中。

深入CSS

1、继承

某些属性会自动继承其父元素的计算值，除非显示指定一个值

<style>
    body {
        font-size: 20px;
        }
    p {//p会继承body的字体属性值
        color: red;
      }
</style>
显示继承

可以通过一个容器使不能继承的属性继承

屏幕截图 2022-07-25 164941.png

初始值
  • CSS中，每个属性都有一个初始值
    • background-color的初始值为transparent
    • margin-left的初始值为0
  • 可以使用initial关键字显示重置为初始值
    • background-colo：initial

2、布局（Layout）是什么？

  • 确定内容的大小和位置的算法
  • 依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

  • 常规流
    • 行级
    • 块级
    • 表格布局
    • FlexBox
    • Grid布局
  • 浮动
  • 绝对定位

块级

  • 某些容器会创建一个BFC
    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow值不是visible的块盒
    • display：flow-root；

CSS最常见的盒子布局

屏幕截图 2022-07-25 204526.png

块级元素可以设置宽度width

  • 指定content box宽度
  • 取值为长度、百分数、auto
  • auto由浏览器根据其它属性确定
  • 百分数相对于容器的content box宽度

块级元素还可以设置高度height

  • 指定content box高度
  • 取值为长度、百分数、auto
  • auto取值由内容计算得来
  • 百分数相对于容器的content box宽度
  • 容器有指定的高度时，百分数才生效

内边距padding

  • 可指定元素四个方向的内边距
  • 百分数相对于容器宽度

外边距margin

  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度
  • 使用margin:auto 使水平居中

溢出处理overflow

 overflow：visible//溢出内容展示
 overflow：hidden//溢出内容隐藏
 overflow：scroll//溢出内容出现滚动条

块级元素和行级元素的对比

屏幕截图 2022-07-25 210424.png

display属性

属性作用
block块级盒子
inline行级盒子
inline-block本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none排版时完全被忽略

行级

  • 只包含行级盒子的容器会创建一个IFC
  • IFC的排版规则
    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align 决定一行内盒子的水平对齐
    • vertical-align 决定一个盒子在行内的垂直对齐
    • 避开浮动（float）元素

Flex Box 是什么？

  • 一种新的排版上下文
  • 它可以控制子级盒子的：

    • 摆放的流向

    • 摆放顺序

    • 盒子宽度和高度

    • 水平和垂直方向的对齐

    • 是否允许折行

flex属性作用
justify-content主轴上的对齐方式
align-items十字交叉轴上的对齐方式
flex-direction项目排列方向，可水平可垂直
flex-wrap换行方式
align-content多根轴线的对齐方式

屏幕截图 2022-07-25 213406.png

Grid布局

屏幕截图 2022-07-25 213653.png

display：grid

  • display：grid 使元素生成一个块级的Grid容器
  • 使用grid-template 相关属性将容器划分为网格
  • 设置每一个子项占哪些行/列

float布局

position属性作用
static默认值，非定位元素
relative相对自身原来位置偏移，不脱离文档流
absolute绝对定位，相对非static祖先元素定位，不会对流内元素布局造成影响
fixed相对于视口绝对定位
avatar
文章
阅读
粉丝