理解CSS | 青训营笔记

HduCowHorseFpy
59 阅读3分钟
理解CSS | 青训营笔记
CSS 层叠、优先级（优先程度递减）

1、样式表来源（优先程度递增）

  • 用户代理样式：浏览器默认样式
  • 用户样式表：很少有
  • 作者样式表：developer写的
  • 作者样式表中的！important
  • 用户样式表中的！important
  • 用户代理样式中的！important

2、选择器优先级

选择器优先级：内联样式 > id样式 > class 样式 > 标签样式

3、源码位置

根据源码的顺序来定 最后一个定义的生效

  • 对于@import的样式，根据@import的顺序
  • 对于link和style的样式，根据在document中的顺序
<head>
    <style>
        .red {
            color: red;
        }
    </style>
    <link rel="stylesheet" href='./index.css' type='text/css'>
</head>
<body>
    <h1 class='red green blue'>
    </h1>
</body>
​
/* index.css */
.blue {
    color: blue;
}
.green {
    color: green;
}
// 最终h1的颜色是green
建议
  • 选择器尽量少用id选择器
  • 尽量不要使用！important
  • 自己的样式加载在引用库样式的后面
继承
  • 大部分具有继承特性的属性跟文本相关
  • 可以使用inherit关键字显式指定一个属性值从其父元素继承
CSS的值和单位

  • 单位

    • 角度

    • 时间

    • 分辨率

    • 长度

      • 绝对长度
      • 相对长度

  • 值

    • 文字类：比如像initial这种关键字、颜色、位置等等
    • 数值类：比如z-index：1这种数值，或者带有单位的数值、百分比
    • 函数生成：比如calc( ), min( ). max( )等
盒模型__负外边距
  • 设置左边或顶部的负外边距，元素就会相应地向左、向上移动，导致元素与前面的元素重叠
  • 而设置右边或者底部的负外边距，元素不会移动，其右边或下面的元素会相应向左向上移动

布局：常规流、弹性盒子、Grid、定位

1、常规流布局

消除外边距塌陷的办法：

  • 在两个相邻的上下边距之间增加border、padding或者内联元素，使之不相邻
  • 设置父元素为 BFC ，是父子元素不在同一个BFC中

内联级格式化上下文实际case

  • 文字和icon垂直对齐
<div>
    <img>
    <span>111</span>
</div>
img {
    vertical-align: middle;
}
span {
    vertical-align: middle;
}
  • 单行文字垂直居中
// html
<div class='title'>
    我是标题
</div>
// css
.title {
    line-height: 36px;
    height: 36px
}

2、弹性盒子布局

3、网格布局

.grid-container {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-rows: 60px 6fr 1fr;
}

4、使用策略：

  • 大面积或整体布局 推荐使用Grid布局
  • 小面积或组件中，可以使用Flex布局0

5、定位 Position

  • relative：元素相对于自己原来在文档流中的文职进行定位，但是原来文档流的空间还在
  • absolute：元素被移出正常文档流，且没有预留空间，相对于最近的非static定位祖先元素进行定位。
  • fixed：元素被移出正常文档流，且没有预留空间，相对于屏幕视口进行定位，屏幕滚动也不会改变位置
  • sticky：元素相对它的最近滚动祖先（祖先的overflow是scroll/hidden/auto）的视口定位
设备像素

显示器上绘制的最小单位，显示屏通过控制每个像素点的颜色，使屏幕显示出不同的颜色

avatar
文章
阅读
粉丝