理解CSS（二）| 青训营笔记

命中不缺狗
114 阅读3分钟

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

选择器权重

  • 内联样式，如：style=“”，权值为1000
  • ID选择器，如：#content，权值为0100
  • 类，伪类和属性选择器，如：.content，权值为0010
  • 类型选择器和伪选择器，如：div p，权值为0001
  • 通配符、子选择器、相邻选择器等，如*、>、+、权值为0000
  • 继承的样式没有权值

CSS继承

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

文字相关的属性大多是可以自动继承的，盒子模型相关的属性都是不可自动继承的，但是可以使用inherit显示继承，如下

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

初始值

CSS中，每个属性都有一个初始值：

  • background-color的初始值为transparent
  • margin-left的初始值为0
  • 可以使用initial关键字显示重置为初始值：background-color：initial

布局

什么是布局

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

布局相关技术

布局主要分为常规流、浮动、绝对定位三种。

常规流

常见的常规流布局分为行级排版、块级排版、FlexBox、Grid布局

行级排版

行级排版（Inline Formatting Context，IFC）

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

IFC内的排版规则

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

块级排版（Block Formatting Context，BFC）

以下条件下会创建一个BFC

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

排版规则

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

一种新的排版上下文，可以控制盒子相关的属性，包括

  • 摆放的流向

    • flex-direction：

      image-20220725200448285

  • 盒子宽度与高度

    • flex-grow：有剩余空间时的伸展能力
    • flex-shrink：容器空间不足时收缩的能力
    • flex-basis：没有伸展或收缩时的基础

  • 水平和垂直的对齐

    • justify-content

      image-20220725200542189

    • align-items

      image-20220725200638229

  • 是否允许折行

    • flex-wrap：wrap 规定灵活的项目在必要的时候拆行或拆列。
Grid布局

  • display：grid使元素生成一个块级的Grid容器

  • 使用grid-template相关属性将容器划分为网格

  • 设置么一个子项站那些行列

  • grid line网格线，grid area网格区域，代码如下：

    .a {
  grid-area: 2/2/4/4;
}
.b {
  grid-area: 1/1/3/3;
}

    样式如下：

    image-20220725201355687

浮动

可以使用浮动实现文字环绕效果，下面图片使用float：left效果：

image-20220725201709180

绝对定位

绝对定位主要通过设置position属性实现：

  • static 默认值，非定位元素

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

  • absolute 绝对定位，相对非static祖先元素定位，不会对流内元素造成，影响创建一个新的流，按照新的流去布局

  • fixed 相对于视口绝对定位，影响创建一个新的流，按照新的流去布局

avatar
文章
阅读
粉丝