search

zptime / blog

个人博客
0 stars 0 forks source link

前端基础知识之CSS篇 #17

Open zptime opened 3 years ago

zptime commented 3 years ago

常用css效果

彻底搞定 vertical-align 垂直居中不起作用疑难杂症

BFC(块级格式化上下文)

描述：具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

触发条件：只要元素满足下面任一条件即可触发 BFC 特性

特性及应用：

div 水平垂直居中

分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

CSS 预编译器比较：Sass, Scss, Less, Stylus

img 元素底部为何有空白

浏览器 IMG 图片原生懒加载 loading="lazy"

Chrome 浏览器(76 以上版本 2019 年)的 IMG 图片和 IFRAME 框架会支持原生懒加载特性，使用 loading="lazy"语法。

<img src="./example.jpg" loading="lazy" alt="zhangxinxu">

元素 focus 时，页面不滚动不定位的 JS 处理

// preventScroll是一个可选参数，默认值是false，表示不阻止聚焦滚动。如果preventScroll参数值是true则表示只聚焦不滚动。
var y = window.pageYOffset;
button.focus({
  preventScroll: true,
});
// IE浏览器的处理
if (window.pageYOffset != y) {
  setTimeout(function () {
    document.documentElement.scrollTop = y;
  }, 0);
}

键盘可访问性

/* 借助<label>元素实现按钮样式 */
<input
  id="t"
  type="submit"
  > <label
  class="btn"
  for="t"
  > 提交</label
  > [type="submit"] {
  position: absolute;
  clip: rect(0 0 0 0);
}
.btn {
  display: inline-block;
  padding: 2px 12px;
  background-color: #cd0000;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

/* 模拟focus状态的outline效果 */
:focus + label.btn {
  outline: 1px dotted Highlight;
  outline: 5px auto -webkit-focus-ring-color;
}
tr .btn {
  opacity: 0;
  filter: alpha(opacity=0);
}
tr:hover .btn,
tr .btn:focus {
  opacity: 1;
  filter: none;
}

a 标签的 target 属性

功能：点击一个链接，如果这个链接浏览器已经打开过，则刷新已经打开的链接窗口；如果这个链接没有打开过，则使用新窗口打开这个链接页面

实现：设置链接元素和表单元素的 target 属性值为目标 URL 地址值。如：<a href="blank.html" target="blank.html">空白页</a>

无外链的 CSS 开发策略

让 CSS flex 布局最后一行列表左对齐的 N 种方法

justify-content 对齐问题描述：在 CSS flex 布局中，justify-content 属性可以控制列表的水平对齐方式，例如 space-between 值可以实现两端对齐。但是，如果最后一行的列表的个数不满，则就会出现最后一行没有完全垂直对齐的问题。

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.list {
  width: 24%;
  height: 100px;
  background-color: skyblue;
  margin-top: 15px;
}

CSS 伪类

:not(.disabled) {}    /* 优先级等同于.disabled选择器 */
:not(a) {}    /* 优先级等同于a选择器 */

scroll 相关 api

// 1.兼容性很好的scrollLeft和scrollTop
// 设置element左滚动距离100
element.scrollLeft = 100;
// 设置element上滚动距离200
element.scrollTop = 200;

// 2.IE9+浏览器支持，控制窗体滚动距离的pageXOffset和pageYOffset
// 设置窗体左滚动距离100
window.pageXOffset = 100;
// 设置窗体上滚动距离200
window.pageYOffset = 200;

// 3.IE/Edge浏览器不支持的scrollTo和scrollBy：既能作用于windows对象，表示窗体滚动；又可以作用于普通Element元素，表示元素滚动。
// scrollTo()表示滚到到指定的位置，而scrollBy()表示相对当前的位置滚动多少距离
window.scrollTo();
Element.scrollTo();

window.scrollBy();
Element.scrollBy();

HTML audio 音频 API

神奇的 CSS 滤镜与混合模式

CSS filter:hue-rotate 色调旋转滤镜实现按钮批量生产

<button class="ui-button ui-button-warning">红按钮</button>

/* 1.传统色值 */
.ui-button-warning,
.ui-button-warning.disabled,
.ui-button-warning.disabled:hover,
.ui-button-warning.loading,
.ui-button-warning.loading:hover {
  border: 1px solid #f4615c;
  background-color: #f4615c;
  color: #fff;
}
.ui-button-warning:hover,
input.ui-button-warning:focus,
button.ui-button-warning:focus {
  background-color: #ff7772;
  border-color: #ff7772;
  color: #fff;
}
.ui-button-warning:not(.disabled):active,
.ui-button-warning:not(.loading):active {
  background-color: #dc5652;
  border-color: #dc5652;
}

/* 2.色调旋转 */
.ui-button-warning {
  filter: hue-rotate(140deg);
}
hue-rotate(90deg)   /* 90度旋转 */
hue-rotate(.5turn)       /* 180度旋转 */
hue-rotate(3.142rad)     /* 3.142弧度旋转，近似一圈，也就是360度 */
.bird {
  animation: pulse 5s linear infinite;
}
@keyframes pulse {
  from {
    filter: hue-rotate(0);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

CSS 创意与视觉表现

/* 平行四边形 */
.shape-left {
  /* 倒三角 */
  shape-outside: polygon(0 0, 100% 0, 0% 100%);
}
.shape-right {
  /* 正三角 */
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
}

/* 透明方格（深浅交错）背景图 */
.square {
  display: inline-block;
  padding: 300px;
  background-color: #fff;
  background-image: linear-gradient(
      45deg,
      #eee 25%,
      transparent 25%,
      transparent 75%,
      #eee 75%
    ), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee
        75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

/* 镂空 */
.clip-shape{
  outline: 9999px solid rgba(0,0,0,.5);  /*方形镂空*/
  box-shadow: 0 0 0 9999px rgba(0,0,0,.75); /*圆角镂空*/
  mask /*五角星镂空*/
}

纯 CSS 滚动指示器

CSS 滚动指示器：滚动指示器指的是页面的顶端会有一个进度条，指示滚动的进度。

/* <div class="indicator"> </div > */
body {
  position: relative;
}
.indicator {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(to right top, teal 50%, transparent 50%) no-repeat;
  background-size: 100% calc(100% - 100vh);
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: darken; /*关键*/
}
.indicator::after {
  content: "";
  position: fixed;
  top: 5px;
  bottom: 0;
  right: 0;
  left: 0;
  background: #fff;
  z-index: 1;
}

CSS 实现文字下面波浪线动画

CSS scroll-snap 滚动事件停止及元素位置检测

CSS Scroll Snap：可以让网页容器滚动停止的时候，无需任何 JS 代码的参与，浏览器可以自动平滑定位到指定元素的指定位置。兼容性非常好，移动端几乎可以放心使用。

如何 disabled 禁用所有表单 input 输入框元素

/* 设置pointer-events:none */
form {
  pointer-events: none;
}

/* 使用::before伪元素创建一个浮层该在所有的表单元素上，例如： */
form {
  position: relative;
}
form::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background-color: rgba(0,0,0,.001);
}

/* 以上两个方向虽然可以让点击无效，但是并没有阻止键盘访问，也就是Tab键索引，或者回车都能触发表单行为 */
/* 要真正意义上禁用所有的表单元素很简单，嵌套在<fieldset>元素中，然后设置<fieldset>元素disabled就可以了 */
<form>
  <fieldset disabled>
    <legend>表单标题</legend>
    <...>
  </fieldset>
</form>

CSS3 的 box-sizing，怪异盒模型

弹性 flex 布局

div {
  display: flex; // flex布局
  justify-content: center; // 使子项目水平居中
  align-items: center; // 使子项目垂直居中
}

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari 和 Chrome */
  border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

  behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */
}
zptime commented 3 years ago

1. 水平垂直居中

绝对定位水平垂直居中[absolute + margin:auto]

兼容性：IE7 及之前版本不支持

div {
  width: 200px;
  height: 200px;
  background: green;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

绝对定位水平垂直居中[absolute + margin 负间距]

div {
  width: 200px;
  height: 200px;
  background: green;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
}

绝对定位水平垂直居中[absolute + transform]

兼容性：IE8 不支持

div {
  width: 200px;
  height: 200px;
  background: green;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

弹性盒模型[不定宽高水平垂直居中]

.box {
  height: 600px; // 去掉高度，只能垂直居中
  display: flex;
  justify-content: center;
  align-items: center;
}
.box > div {
  background: green;
  width: 200px;
  height: 200px;
}

table 布局

将父盒子设置为 table-cell 元素，可以使用 text-align:center 和 vertical-align:middle 实现水平、垂直居中。

比较完美的解决方案是利用三层结构模拟父子结构

<p class="outerBox tableCell"></p>
<p class="ok"></p>
<p class="innerBox">tableCell</p>
<p></p>
<p></p>

<style>
  /*table-cell实现居中，将父盒子设置为table-cell元素，设置text-align:center,vertical-align:
middle;子盒子设置为inline-block元素*/
  .tableCell {
    display: table;
  }
  .tableCell .ok {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  .tableCell .innerBox {
    display: inline-block;
  }
</style>

calc

对子盒子实现绝对定位，利用 calc 计算位置

<p class="outerBox calc"></p>
<p class="innerBox">calc</p>
<p></p>

<style>
  /_绝对定位，clac 计算位置_/ .calc {
    position: relative;
  }
  .calc .innerBox {
    position: absolute;
    left: -webkit-calc((500px - 200px)/2);
    top: -webkit-calc((120px - 50px)/2);
    left: -moz-calc((500px - 200px)/2);
    top: -moz-calc((120px - 50px)/2);
    left: calc((500px - 200px) / 2);
    top: calc((120px - 50px) / 2);
  }
  #div1 {
    position: absolute;
    left: 50px;
    width: calc(100% - 100px);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
  }
</style>

其他方式

zptime commented 3 years ago

2. 圣杯布局（两边固定，中间自适应）

float 浮动布局

<article class="main">
  <div class="left">左</div>
  <div class="right">右</div>
  <div class="center">
    中
    <h2>浮动布局</h2>
  </div>
</article>

.left{float: left; width: 300px; height: 100px; background: #631D9F;}
.right{float: right; width: 300px; height: 100px; background: red;}
.center{margin-left: 300px; margin-right: 300px; background-color: #4990E2;}
.main::after{ content:''; display: block; clear: both; // 清除浮动}

position 定位布局

<article class="main">
  <div class="left">左</div>
  <div class="center">
    中
    <h2>绝对定位</h2>
  </div>
  <div class="right">右</div>
</article>

.left{position: absolute; left: 0; width: 300px; background-color: red;}
.center{position: absolute; left: 300px; right: 300px; background-color: blue;}
.right{position: absolute; right: 0; width: 300px; background-color: #3A2CAC;}

position 属性有 5 种

table 布局

.main {
  width: 100%;
  display: table;
}
.left,
.center,
.right {
  display: table-cell;
}
.left {
  width: 300px;
  background-color: red;
}
.center {
  background-color: blue;
}
.right {
  width: 300px;
  background-color: red;
}

弹性(flex)布局

.main {
  display: flex;
}
.left {
  width: 400px;
  background-color: red;
}
.center {
  background-color: blue;
  word-break: break-word;
}
.right {
  background-color: red;
  width: 400px;
}

网格(gird)布局

.div {
  width: 100%;
  display: grid;
  grid-template-rows: 100px;
  grid-template-columns: 300px auto 300px;
}

总结

以上 5 种实现三栏布局的方式的优缺点：