金鱼脑 CSS网页杂记 (持续更新)

SCSS 倍数间格

@function line($count: 1){  @return $baseLineHeight * count}.test {  padding: line(2);}

ul > li 间格问题

1:17:50 讲解使用 inline-block 中间会有 "一字元" 的空格

  ul {    list-style: none;    font-size: none;    li {      display: inline-block;      font-size: 16px;    }  }

width: auto VS 100%

What Does “width: 100%” Do in CSS?

width: auto (较推荐使用)

块级元素 Default 设定内容宽 = margin + border + padding + width

width: 100%

内容宽 等同于 父级 width (父必须有设定 width)与 auto 相比 内容宽 不含 margin在没有设置 box-sizing: border-box 不论给与 margin / padding 都会破版在设置 box-sizing: border-box 给与 margin 会破版

範例 CodePen 连结

rgba() VS opacity

opacity 作用于元素，代表其子元素也会被淡化rgba() 只能用于颜色、背景色 (子元素不影响)

inline-flex

表该容器为 Inline，对于子元素无影响

nth-child, nth-of-type

first-child / last-child / first-of-type / last-of-type

nth- 皆可传入 odd / even / 2n+3nth-child(n) 选择父标籤下的 第n个 "子元素"nth-of-type(n) 选择父标籤下的 第n个 "某元素"

块级 (Block)

宽继承于容器 (预设 width: auto)纵向堆叠 (自动换行)能设定宽高、margin、padding

行内 (Inline)

自动包裹内容排成一行 (不自动换行)设置 宽高 & margin 上下 无效!!利用设置 line-height 拉开两行相叠的行内元素

Ex: .div > p + .div > p

  span {    // 无效区    height: 150px;    width: 150px;    margin-top: 10px;    margin-bottom: 10px;    // 有效区    margin-left: 20px;    margin-right: 20px;    padding: 10px;    line-height: 50px;  }

line-height

line-height 代表 两行文字中间的高度。文字共有4条线 顶线 -> 中线 -> 基线 -> 底线line-height 代表 基线至基线的距离深入 CSS 之 line-height 应用

vertical-align 垂直对齐

用于 文字/图片/icon 垂直对齐文字default 为 baselinemiddle 置中 (最常用)text-bottom 文字最高

  <div class="testBlock">    <span>Text</span>    <img class="vertical-align-middle" src="https://fakeimg.pl/40x40/">    <span>Text</span>  </div>

display

block: 撑满容器 (利用 margin: 0 auto 水平置中)inline: 自动包裹内容，表现如行内 (实用)inline-block: 自动包裹内容，表现如块级 (实用)

user-select 禁用选取

支援度蛮高的，但 "必须" 加上浏览器 prefixnone 禁止用户选取 文本 & "子元素"text 双击可选单词 / 三击可全选文本all 单击 / 右键子元素 全选该区块W3School DEMO

float 浮动

用于文绕图若子皆float，会造成该母元素 height 0 (形成破版)clearfix 清除浮动

  // 挂载 parent 上  .parent {    &:after {      content: "";      display: block;      clear: both;    }  }

column 多栏文字

多栏文字排版器columns: 100px 3 (栏宽度、栏数)column-width 栏宽度 (配合 media 设置最小宽度)column-count 多少栏数column-gap 栏间隔column-rule 分割线样式缩写

column-rule: 4px double #fff

column-span:all 使该元素横跨所有栏

不可见元素与点击事件

display: none 不可被点击visibility: hidden 不可被点击z-index: -100 不可被点击opacity: 0 可被点击穿透效果 pointer-events

position fix Y轴置中

写 ModalBox 一直没想到这招纪录一波

  .modal {    z-index: 30;    position: fixed;    top: 20vh;        // 重点在此    left: 50%;    transform: translateX(-50%);  }

border 0 / none

border: none (用此吧!)
表示没有，浏览器解析"none"时将不作出渲染动作，即不会消耗内存值。border: 0
设为"0"像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。

参考资料

MDNW3School