CSS 理解 | 青训营

落尘69
119 阅读5分钟

属性

优先级

属性的优先级根据选择器的特异度来区分

<body>
  <div>
    <h1 class="title"> Hello World </h1>
  </div>
</body>

<style>
  .title {
    color: red;
  }

  h1 {
    color: blue;
  }
</style>

在上面的代码中，Hello World 将表现为红色，.title 设置的 style 生效

选择器的特异度

我们大致用三种符号来区分选择器（权重自上而下递减）：

  • #:id 基本语法格式：#id名{ 属性1：属性值1；属性2：属性值2；}
  • .:(伪)类 基本语法格式：.类名{ 属性1：属性值1；属性2：属性值2；}
  • E:标签 基本语法格式：标签名{ 属性1：属性值1；属性2：属性值2；}
<body>
  <button class="btn"> 按钮 </button>
  <button class="btn primary"> 主要按钮 </button>

</body>

<style>
  .btn {
    display: inline-block;
    padding: 20px;
    width: 100px;
    text-align: center;
    border-radius: 3px;
  }

  .btn.primary {
    color: #fff;
    background-color: blueviolet;
  }
</style>

我们可以看到如上所示的效果，一个是 .btn 有一个类，另一个是 .btn.primary 有两个类，所以后者的特异度比前者的大，所以后者的优先级高于前者，主要按钮显示为 blueviolet

继承

元素的部分属性会继承父元素的计算值，除非显式指定了一个值

隐式继承

<body>
  <p> we can say <em>hello world</em> </p>
</body>

<style>
  p {
    color: blue;
  }
</style>

我们看到 <em> 中的文字继承了父类 <p> 的 color，像文字的大部分属性都会自动继承，但是还是有一些属性是不会继承的，比如子元素不会自动继承父元素的 width 等

显式继承

借助通配符 * 来让所有的 box-sizing 继承父元素的属性值

<style>
  * {
    box-sizing: inherit;
  }
</style>

初始值

CSS 中，每个元素都有初始值，在没有改动的情况下默认为初始值

  • initial 可以通过该关键字将属性重置 background-color: initial

求值过程

image.png

布局 (Layout)

盒子模型：我们在进行布局的时候一般把一个个元素当成是一个盒子。

  • content 有 width, height, 在设置宽高时如果使用百分数，则必须在容器有指定高度时才能生效

  • padding 指定元素四个方向的内边距，如果设置两值则为上下、左右，如果设置四个值则为上、右、下、左

  • border 指定容器边框样式 (style)、粗细 (width) 和颜色 (color), 可以根据四个方向分别设置

  • margin 指定元素四个方向的外边距，margin: auto可以使元素居中

    • margin collapse: 在垂直方向上两个元素设置 margin 时，上下外边距会选择大的外边距决定

  • 如果设置 box-sizing: border-box 则设置宽高会包含 margin、border、padding、content

常规流 Normal Flow

  • 根元素、浮动和绝对定位的元素会脱离常规流
  • 常规流的盒子符合下面的排版方式参与布局

行级 Inline Formatting Context

display: inline

和其他行级盒子放在一行或者拆开为多行，但是盒模型的 width、height 属性无效

默认为行级的元素有span、em、strong、cite、code 等

只包含行级盒子的容器会创建一个 IFC，内部符合 IFC 的排版规则

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

块级 Block Formatting Context

display: block

不和其他盒子并行排列，适用盒模型全部属性

默认为块级的元素有body、article、div、main、section 等

注：display: inline-block 本身是行级，但是可以设置宽高，不过只能放在一行

某些容器会创建 BFC

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

BFC 的排版规则

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

表格布局

Flex Box

display: flex

可以控制子盒子的摆放流向、顺序，盒子的宽高，水平垂直对齐和是否拆行

流向 flex-direction

row: 子元素横向排布

row-reverse: 与 row 反向

column: 子元素纵向排布

column-reverse : 与 column 反向

主轴和侧轴

image.png

主轴：justify-content

  • flex-start 靠左排布
  • flex-end 靠右排布
  • center 居中排布
  • space-between 左右不留空，子元素间距相等
  • space-around 左右留空是子元素间距的一半
  • space-evenly 左右留空和子元素间距相等

侧轴: align-items

  • flex-start 靠上排布
  • flex-end 靠下排布
  • center 居中排布
  • stretch 垂直拉伸充满容器
  • baseline 将基于文字底部对齐排布
Flexibility
  • 可以设置子项的弹性：在容器有空余时伸展 (flex-grow)，空间不够时收缩 (flex-shrink)
  • flex-basis 没有收缩或者伸展时的长度
flex
flex: 1flex-grow: 1
flex: 100pxflex-basis: 100px
flex: 2 1flex-grow: 2; flex-shrink: 1
flex: 1 100pxflex-grow: 1: flex-basis: 100px
flex: 2 0 100pxflex-grow: 2; flex-shrink: 0; flex-basis: 100px
flex: auto = flex: 1 1 autoflex: none = flex: 0 0 auto

Grid 布局

display: gird

可用 px、%、fr、auto 来设置格子的大小

grid-template

grid-template-columns 列划分网格

grid-template-rows 行划分网格

grid-area

可以从 gird line 来划分网格区域，左边和上面第一根线为 1 ，如下

.g {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 3;
  grid-column-end: 3;
}

/* 等同于 */
.g {
  grid-area: 1/1/3/3;
}

浮动 (float)

主要用于图文混排，对 img 定义 float:left，可以实现图片在文字中左浮动，文字绕开图片显示

绝对定位 (absolute)

position 属性

  • static: 默认值，即常规流
  • relative: 相对自身原本位置偏移，不脱离常规流
  • absolute: 绝对定位，相对于非 static 祖先元素定位
  • fixed: 相对于视口绝对定位，可用于导航栏固定等
  • sticky: 产生动态效果，根据滚动条的滑动和属性决定固定位置 { position: sticky; top: 10px; }
avatar
文章
阅读
粉丝