CSS基础巩固

一颗帅土豆
104 阅读8分钟

CSS（Cascading Style Sheets，层叠样式表）

核心知识

选择器
  1. 标签选择器：根据元素的标签名来选择元素。例如，p 选择器将选择所有 <p> 标签。
  1. 类选择器：根据元素的类名来选择元素。类名以 . 开头，例如 .my-class 选择器将选择所有具有 my-class 类的元素。
  1. ID选择器：根据元素的ID来选择元素。ID以 # 开头，例如 #my-id 选择器将选择具有 my-id ID 的元素。

  1. 属性选择器：根据元素的属性来选择元素。例如，[type="text"] 选择器将选择所有 type 属性为 text 的元素。

  2. 后代选择器： 后代选择器用于选择作为某元素后代的元素。后代选择器由两个或多个选择器之间的空格表示**

  3. 子元素选择器：子选择器（>），只能选择直接子元素，不会选择孙子或更深层级的后代元素。

  4. 相邻兄弟选择器 (+)： 选择紧跟在指定元素后面的 ，第一个兄弟元素。只能选择紧邻的兄弟，无法选中后续的其他兄弟

  5. 普通兄弟选择器 (~)： 选择指定元素后面的 所有兄弟元素。

  6. 伪类选择器：以 : 或 :: 开头，用于选择处于特定状态的元素，例如：:hover, :active, ::before, ::after 等。

    1. 结构伪类：
      • :first-child：选择父元素的第一个子元素。
      • :last-child：选择父元素的最后一个子元素。
      • :nth-child(n) ：选择父元素的第 n 个子元素。
      • :nth-of-type(n)： 选择父元素中某一类型的第 n 个子元素。
      • :not(selector) ：选择不匹配某选择器的元素。
    2. 表单伪类
      • :checked：匹配选中的复选框、单选按钮或选中状态的 <option>。
      • :disabled：匹配禁用状态的表单控件。
      • :enabled：匹配启用状态的表单控件。
      • :placeholder-shown：匹配显示占位符的输入框。
    3. 链接伪类
      • :link： 选择未访问的链接。
      • :visited：选择已访问的链接。

    4. 动态伪类

      • :root：匹配文档的根元素（通常是 <html>）。
      • :empty：匹配没有任何子元素的元素。
      • :target：匹配 URL 中指定的锚点目标。

    5. 否定伪类

      1. :not() ：排除特定选择器。

学习链接

文档流

是引导网页中的元素排列和布局的，它默认的方向是从左向右，从上而下。开发中一些属性会导致失去流动性，例如width等

盒模型
  • W3C 标准盒模型：属性width,height只包含内容content，不包含border和padding。
  • IE盒模型：width,height包含border和padding，指的是content+padding+border
视觉格式上下文（Visual Formatting Model）

一套规用来计算元素转换为盒子的规则

学习链接

层叠上下文（stacking context）

如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。

层叠顺序

  1. 谁大谁上： 当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
  2. 后来居上： 当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

如何形成层叠上下文

  1. 文档根元素（HTML）
  2. position值为absolute|relative且z-index不为auto
  3. position值为fixed|sticky
  4. flex子元素z-index不为auto
  5. grid子元素z-index不为auto
  6. opacity 属性值小于1
  7. transfrom属性值不为none
  8. filter属性值不为none

学习链接

值和单位

  1. 绝对长度单位

    1. px

  2. 相对长度单位

    1. em:相对于父级的font-size，父级不存在逐级向上查找（倍数）
    2. rem：相对与根元素的字体大小（倍数）
    3. vw、vh: 相对于视口的宽高[1~100]对应视口 1~100%
媒体查询

  1. 常见媒体类型

    • all（所有），适用于所有设备。
    • handheld（手持），用于手持设备。
    • print（印刷），用于分页材料以及打印预览模式下在屏幕上的文档视图。
    • projection（投影），用于投影演示文稿，例如投影仪。
    • screen（屏幕），主要用于计算机屏幕。

  2. 常用的 media属性

    • width：浏览器宽度
    • height：浏览器高度
    • device-width：设备屏幕分辨率的宽度值
    • device-height：设备屏幕分辨率的高度值
    • orientation：浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为 portrait，否则为 landscape。
    • aspect-ratio：比例值，浏览器的纵横比。
    • device-aspect-ratio：比例值，屏幕的纵横比。
    • color：设备使用多少位的颜色值，如果不是彩色设备，值为 0。
    • color-index：色彩表的色彩数 monochrome：单色帧缓冲器每个像素的字节
    • resolution：分辨率值，设备分辨率值。
    • scan：电视机类型设备扫描方式，progressive 或 interlace。
    • grid：只能指定两个值 0 或 1，是否基于栅格的设备。

  3. 引入 media

    • link 方法引入

      <link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

    • @media

      @media screen and (min-width: 600px) and (max-width: 800px) {
  选择器 {
    属性: 属性值;
  }
}

    学习链接

CSS动画
transition(过渡动画)

将元素上的某个属性过渡到另外一个属性，一次性的，不能重复触发。不能涉及多个属性。

animation(帧动画)
  1. animtion 可以看做是对 transition 的拓展，通过设置关键帧来定义每个节点的状态，
  2. name：名称
  3. duration：播放持续时间
  4. timing-function：速度效果的速度曲线（贝塞尔曲线）
  5. delay: 延迟
  6. iteration-count：播放次数
  7. direction：播放次数
  8. play-state：播放状态，暂停继续
  9. fill-mode：控制元素结束后状态，（停留在哪一帧）
flex

练习链接：flexboxfroggy.com/

定义

采用 Flex 布局的元素，所有子元素自动成为容器成员.容器默认存在两根轴: 水平的主轴和垂直的交叉轴

容器属性
  1. flex-direction:决定主轴的方向
  2. flex-wrap:默认情况下，项目都排在一条线.flex-wrap决定换行
  3. flex-flow：flex-direction属性和flex-wrap简写
  4. justify-content:定义了项目在主轴上的对齐方式。
  5. align-items:定义项目在交叉轴上如何对齐。
  6. align-content:定义了多根轴线的对齐方式,一根轴线不生效
子元素属性
  1. order：子元素排列顺序。数值越小，排列越靠前，默认为 0
  2. flex-grow：子元素放大比例，默认为 0 ，即如果存在剩余空间，也不放大。
  3. flex-shrink：子元素的缩小比例，默认为 1，定义为0，不缩小（空间被压缩使用）
  4. flex-basis：定义了在分配多余空间之前，子元素占据的主轴空间，默认auto。自身空间大小。
  5. flex： [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 简写
  6. align-self：允许单个子元素有与其他子元素不一样的对齐方式（左右对其,左边两个元素，右边一个可使用自身对齐方式）
grid
与flex布局异同

那就是 flex 布局是一维布局，grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

定义

网格布局，是一种新的CSS布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。也存在容器跟子元素概念

容器属性
  1. display：创建一个网格容器（grid、inline-grid）
  2. grid-template-columns、grid-template-rows：分别描述每个子元素的宽高。repeat函数使用
  3. grid-row-gap、grid-column-gap 、 grid-gap：分别设置行间距和列间距
  4. grid-template-areas：定义区域，一个区域由一个或者多个单元格组成
  5. grid-auto-flow：定义自动布局算法怎样运作
  6. justify-items 、align-items 、place-items：设置单元格内容的水平位置、垂直位置
  7. justify-content 、align-content 、place-content：整个区域在容器的水平位置、垂直位置
  8. grid-auto-columns 、 grid-auto-rows：指定隐式网格的宽高
子元素属性
  1. grid-column-start 、grid-column-end 、grid-row-start 、grid-row-end：指定子元素位置
  2. grid-area：指定子元素放在哪一个区域
  3. justify-self、align-self、place-self：设置子元素水平垂直位置
repeat函数

设置子元素宽高时可以使用repeat(2,100px) == 100px 100px， fr:等分单位，可以将容器的可用空间分成想要的多个等分空间。自动实现响应式，也可以fr配合repeat函数使用

CSS三大特性
优先级

min-height/min-width > max-height/max-width > !important > 行内样式 > ID选择器 > 类选择器、属性选择器、伪元素和伪类选择器 > 元素选择器 > 通用选择器 > 继承样式

继承性

子元素会自动继承父级元素一些属性包含 字体、字号、颜色、行距等

层叠性

无论在同一个元素中还是在不同的div中，后面的样式将前面的层叠掉

avatar
文章
阅读
粉丝