CSS学习笔记 ｜ 青训营笔记

用户9542557051350
111 阅读7分钟

CSS学习笔记

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

课堂重点:

  • CSS 用法
  • CSS 选择器
  • CSS 选择器的特异度
  • CSS 继承
  • CSS 布局方式及相关技术
  • CSS display 属性
  • CSS 盒模型 - 行级
  • CSS 盒模型 - 块级
  • CSS Flex 布局
  • CSS Grid 布局
  • CSS position 属性

Part 1 CSS 用法

  • 外链
  • 嵌入
  • 内联

Part 2 CSS 选择器

选择器:找出页面中的元素，以便给他们设置样式
多种方式选择元素：

  • 按照标签名、类名或id（标签选择器、id选择器）
  • 按照属性
  • 按照DOM树中的位置

通配选择器 * ：匹配所有
id选择器 #
类选择器 .
属性选择器 []
^= : 开头等于
$= : 结尾等于

伪类：

  • link
  • visited
  • hover
  • active
  • focus

Part 3 CSS 选择器的特异度

当有元素同时匹配多个选择器时，应判定选择器的优先级，优先级较高的选择器发挥作用
判断选择器优先级：特异度(Specificity) 越特殊优先级越高

嵌套选择器

它可能适用于选择器内部的选择器的样式。

在下面的例子设置了四个样式：

  • p{ }: 为所有 p 元素指定一个样式。
  • .marked{ }: 为所有 class="marked"  的元素指定一个样式。
  • .marked p{ }: 为所有 class="marked"  元素内的 p 元素指定一个样式。
  • p.marked{ }: 为所有 class="marked"  的 p 元素指定一个样式。

特异度

!important：10000
内联样式：1000
id选择器：100
类选择器、属性选择器、伪类：10
元素选择器、伪元素：1
通配符：0
举个栗子：

  1. #nav .list li a:link

  2. .hd ul .links a

     #        .         E
    id     (伪)类      标签

解释：

     在 1 中，id 选择器有 1个（#nav），类与伪类共有 2个（.list 与 :link）,元素与伪元素共有 2个（li 与 a）。所以在 1 中的特异度为 122。

     在 2 中，id 选择器有 0个，类与伪类共有 2个（.hd 与 .links）,元素与伪元素共有 2个（ul 与 a）。所以在 2 中的特异度为 22。

     因为，在 1 中的特异度为 122 大于 在 2 中的特异度为 22 。

     所以，在 2 中的选择器的优先级更高。

Part 4 CSS 继承

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

  • 如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性;
  • 当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);

e.g:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Cherry</title>
    <style>
        p {
            color: red;
        }

        .plot p {
            text-align: center;
        }

        #sentence {
            text-decoration: underline;
        }

        p em {
            color: blue;
        }

        body.plot p {
            color: green;
        }

        body {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <hr>
    <p>there is a cat,which is mine</p>
    <div class="plot">
        <p id="sentence">there is a <em>cat</em>,which is mine</p>
        <p>there is a cat,which is mine</p>
    </div>

    <hr>
</body>

</html>

result:

OKISZEMZTIS~(VGBE2GQU)H.png 

以上例子均为可继承属性，实际上也存在一些不可继承属性
关于具体的可继承属性与不可继承属性请查阅相关文档

对于不可继承属性可以进行显式继承：

inherit 显式继承
强制获取父元素属性，向父元素依次向上继承，直至初始值(CSS中，每个属性都有一个初始值)
initial 显式重置为初始值 
将元素属性设置为初始值(具体各元素属性初始值请查阅相关文档)

Part 5 CSS 布局方式及相关技术

布局方式

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

浮动

绝对定位

盒模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

image.png

不同部分的说明：

  • Margin(外边距)  - 清除边框外的区域，外边距是透明的。
  • Border(边框)  - 围绕在内边距和内容外的边框。
  • Padding(内边距)  - 清除内容周围的区域，内边距是透明的。
  • Content(内容)  - 盒子的内容，显示文本和图像。

注意Margin(外边距)的重叠问题 :
当两个盒子的外边距重叠时，取二者间最大的外边距显示

盒模型分类

box-sizing 设置盒模型

  • content-box
  • border-box

content-box 大小指定的是content

content
width：指定content box宽度 取值：长度、百分数、auto
height:：指定content box高度 取值：长度、百分数、auto
padding
-top -bottom -left -right
border
边框样式、颜色、粗细
-top -bottom -left -right
-width -style -color
margin外边距
-top -bottom -left -right
border-box 大小指定的是border
border
width：指定border box宽度 取值：长度、百分数、auto
height:：指定border box高度 取值：长度、百分数、auto
padding
-top -bottom -left -right
border
边框样式、颜色、粗细
-top -bottom -left -right
-width -style -color
margin外边距
-top -bottom -left -right

盒模型溢出后的显示方式

overflow 设置盒模型溢出后的显示方式

盒模型溢出后的显示方式：

  • visible
  • hidden
  • scroll
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

Part 6 CSS display 属性

display：block 块级盒子
display：inline 行级盒子
display：inline-block 行级，但可设置宽高，作为一个整体不可拆分多行
display：none 排版时完全忽略

Part 7 CSS 盒模型 - 行级

行级元素 生成行级盒子
span、em、strong、cite、code 等

行级盒子(Inline Level Box) 和其他行级盒子一起放在一行或多行
盒模型中的width height 不适用

行级排版上下文 IFC

只包含行级盒子时创建一个 IFC
盒子在一行水平放，放不下时换行
text-align 水平对齐
vertical-align 垂直对齐
避开浮动元素（float）

Part 8 CSS 盒模型 - 块级

块级元素 生成块级盒子
body、article、div、main、section、h1~6、p、ul、li 等

块级盒子(Block Level Box) 不与其他盒子并列 适用于所有盒模型

块级排版上下文 BFC

某些容器（根元素HTML标签、浮动、绝对定位、inline-block、Flex子项、Grid子项等）会创建一个BFC
盒子从上到下摆放
垂直margin合并
BFC内盒子的margin不会与外面的合并
BFC不会和浮动元素重叠

Part 9 CSS Flex 布局

display:flex 设置元素生成一个 Flex 容器

可控制:

  • 摆放流向
  • 摆放顺序
  • 盒子宽度和高度
  • 水平和垂直方向的对齐
  • 是否允许拆行
    •

justify-content 设置主轴（水平方向）排版方式
align-items 设置侧轴（竖直方向）排版方式

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

Part 10 CSS Grid 布局

display:grid 设置元素生成一个块级的Grid容器

使用 grid-template 相关属性将容器划分为网格
设置每一个子项占哪些行/列

Part 11 CSS position 属性

  • static
  • relative
  • fixed
  • absolute

static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。

relative 定位

相对定位元素的定位是相对其正常位置。
移动相对定位元素，但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。

CTWD1%92Q}7C5OA2)RQHI.png

fixed 定位

元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动

absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。

XGYV4Q1S(@TS@~KB[](PQN9.png

个人总结

CSS主要负责前端工程中的“样式”部分内容，与HTML知识交叉非常广泛，因此我在学习时通常会进行同步学习，这样同时会加强两部分知识的理解。在学习的过程中经常需要查阅相关文档，很多内容不需要记忆或背诵，只要知道其“存在”，需要时查阅文档即可。

引用参考

CSS教程
青训营课程-CSS

avatar
文章
阅读
粉丝