理解CSS｜ 青训营笔记

cat711
81 阅读7分钟

理解CSS｜ 青训营笔记

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

一、本堂课重点内容：

  • CSS代码构成、使用方法
  • CSS流程之选择器、文本渲染
  • CSS选择器的特异性、继承
  • CSS求值过程、调试方法
  • CSS布局方式及相关技术
  • CSS行级、块级盒模型

二、详细知识点介绍：

1. CSS是什么

  • Cascading Style Sheets

  • 用来定义页面元素的样式

    • 设置字体和颜色
    • 设置位置和大小
    • 添加动画效果

2. 基本构成

选择器 {
    属性名: 属性值:
    /*属性名与属性值组成的语句是一个声明*/
}

3. 在页面中使用CSS

1. 外链式

引入同一文件夹下的CSS文件，需要在头部写入即可引入CSS文件

2. 嵌入式

在头部将CSS样式内容写入标签中，一般适用于长沙市样式较少时

3. 内联式

直接在标签内引入style，并将CSS样式写入

4. 选择器

  • 找出页面中的元素，以便给他们设置样式

  • 使用多种方式选择元素

    • 按照标签名、类名或者id(#)
    • 按照属性
    • 按照DOM树中的位置

1. 类选择器

<li class="done">hello</li>
//
<style>
    .done {
        color: gray;
        text-decoration: line-through;
    }
</style>
​

2.属性选择器

<label>用户名：</label>
<input value="zhao"disabled /
<label>密码：</1abel
<input value="123456"type="password"/>
​
<style>
    [disabled] {
        background:#eee;
        color:#999;
    }
</style>

5. 伪类

  • 不基于标签和属性定位元素

  • 几种伪类

    • 状态伪类
    • 结构性伪类

常用的几种状态：

  • hover：当鼠标经过该元素时
  • visited：当浏览过该标签时
  • link：当设置了链接时
  • focus：当获得焦点时

引用指定的子盒子时：

引用第一个子盒子时：first-child

引用最后一个子盒子时：last-child

注意：是给子元素的标签加引用，而不是父元素

6. 组合

名称语法说明实例
直接组合AB满足A同时满足Binput:focus
后代组合A B选中B,如果它是A的子孙nav a
亲子组合A>B选中B,如果它是A的子元素section>p
兄弟选择器A~B选中B,如果它在A后且和A同级h2~p
相邻选择器A+B选中B,如果它紧跟在A后面h2+p

7. 选择器组

每个选择器之间用逗号隔开，其余同选择器用法

选择器组常用于当部分CSS属性值相同时。可以将属性写在选择器组内，避免代码重复冗杂。

8. 其他

  • 透明度：alpha，数值范围：0~1
  • 字体：font-family

  • font-size

    • 关键字：small、medium、large
    • 长度：px、em
    • 百分数：相对于父元素字体大小

  • 行高：line-height

    测量方法：从上一行文字底部到下一行文字最低端即为行高

  • 初始值：

    1. CSS中,每个属性都有一个初始值

      • background的初始值为transparent
      • margin-left的初始值为0

    2. 可以使用initial关键字显式重置为初始值

      • background-color：initial

  • 宽度：width

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

  • 高度：height

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

  • 外边距：margin

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

  • 内边距：padding

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

    使用内边距时可能会有父盒子被撑开的问题，要把子盒子的值设置为父盒子的值减去两个padding的值

  • 边框：border

    指定容器边框样式、粗细和颜色

    • 三种属性

      • border-width
      • border-style：solid、dotted、dashed
      • border-color

    • 四个方向

      • border-top
      • border-right
      • border-bottom
      • border-left

  • 溢出部分：overflow

    属性值：visible、hidden、scroll

  • position属性

    • static 默认值，非定位元素

    • relative 相对自身原本位置偏移，不脱离文档流

      • 在常规流里面布局
      • 相对于自己本应该在的位置进行偏移
      • 使用top、left、bottom、right设置偏移长度
      • 流内其它元素当它没有偏移一样布局

    • absolute 绝对定位，相对非static祖先元素定位

      • 脱离常规流
      • 相对于最近的非static祖先定位
      • 不会对流内元素布局造成影响

    • fixed 相对于视口绝对定位

9. 调试CSS

  • 右键点击页面，选择检查

  • 使用快捷键

    • Ctrl+Shift+I (Windows)
    • Cmd+Opt+I (Mac)

10. 继承

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

显式继承：

* {
    box-sizing:inherit;
}
html {
    box-sizing:border-box;
}
.some-widget {
    box-sizing:content-box;
}

11. 布局

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

布局相关技术：

常规流：行级、块级、表格布局、FlexBox、Grid布局

  • 根元素、浮动和绝对定位的元素会脱离常规流
  • 其它元素都在常规流之内(in-flow)
  • 常规流中的盒子，在某种排版上下文中参与布局

行级排版上下文

  • Inline Formatting Context (IFC)

  • 只包含行级盒子的容器会创建一个IFC

  • IFC内的排版规则

    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align决定一行内盒子的水平对齐
    • vertical-align决定一个盒子在行内的垂直对齐
    • 避开浮动((float)元素

块级排版上下文

  • BFC内的排版规则

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

  • 某些容器会创建一个BFC

    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow值不是visible的块盒
    • display:flow-root;

浮动

绝对定位

12. 块级元素和行级元素

块级元素：不和其他盒子并列摆放，自己独占一行，适用于所有的盒模型

常见的块级元素标签有：body、div、ul、li、section、main、h1~6等

行级元素：和其它行级盒子一起放在一行或拆开成多行，不使用width、height等块级元素的属性值

常见的行级元素标签有：span、em、cite、code、strong等

13. FlexBox

  • 一种新的排版上下文

  • 可以控制子盒子的：摆放的流向、摆放顺序、盒子的宽度和高度、水平和垂直方向的对齐、是否允许折行

  • Flexibility

    • 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
    • flex-grow有剩余空间时的伸展能力
    • flex-shrink容器空间不足时收缩的能力
    • flex-basis没有伸展或收缩时的基础长度

14. Grid布局

display：grid

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

三、实践练习例子：

<link rel="stylesheet" href="/style.css">
//
<style>
    li { margin: 0; list-style: none; }
    p { margin: 0; lem 0; }
</style>
//
<p style="margin: lem 0">apple</p>

<head>
<meta charset="UTF-8">
<title>Blog</title>
<style>
    h1 {
        color:orange;
        font-size:24px;
    }
    p {
        color:gray;
        font-size:14px;
        line-height:1.8;
    }
</style>
</head>
<body>
<h1>Web框架的架构模式探讨</h1>

html {
    font-size:24px;
}
.a {
    width:100%;
    padding:1em;
    border:3px solid #ccc;
}

<div>
This is a paragraph of text with long word
Honorificabilitudinitatibus.Here is an image
<img src="https://assets.codepen.io/59477/cat.png"alt="cat">
And <em>Inline Block</em>
</div>
<style>
    div {
        width:10em;
        //overflow-wrap:break-word;
        background:#411;
    em {
        display:inline-block;
        width:3em;
        background:#33c;
    }
</style>        

<div class="container">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>
<style>
    .container {
        display:flex;
        border:2px solid #966;
    }
    .a,.b,.c {
        text-align:center;
        padding:1em;
    }
    .a {
        background:#fcc;
    }

四、课后个人总结：

  • 对元素的定位是CSS的重点，要理解定位方式的本质及核心，多尝试，多总结
  • CSS的另一个作用是对元素进行样式修饰，涉及到很多样式、属性、引用方法等要知道大致内容，在插件的提示下能够熟练应用
avatar
文章
阅读
粉丝