遥遥领先

CSS 基础

图片 hover 效果

<div class="wrapper">
  <img src="imge.png" />
</div>

.wrapper {
  height: 220px;
  width: 220px;
  border-radius: 50%;
  overflow: hiden;
  border: 6px solid #fff;
}

.wrapper img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  filter: grayscale(100%);
  transition: 0.5s ease;
  cursor: pointer;
}
.wrapper img:hover {
  transform: scale(1.3);
  filter: grayscale(0%);
}

csshover 效果

<div class="wrapper">
  <img src="img.jpg" />
</div>

.wrapper {
  height: 220px;
  width: 220px;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid #fff;
}
.wrapper img {
  height: 100%;
  width: 100%;
  border-radius: 50$;
  filter: grayscale(100%);
  transition: 0.5s ease;
  cursor: pointer;
}

.wrapper img:hover {
  transform: scale(1.3);
  filter: grayscale(0%);
}

滤镜

. {
  filter: drop-shadow(-37px -9px 5px #fff);
}

css 工具

autoprefixer cssnano purgecss css module

css 处理过程

css 代码 -> postcss -> css 代码 sass/less/stylus ->预编译器 -> css ->后处理器 -> css sass/less/stylus ->预编译器 -> css ->postcss -> css

flex margin

.container3 .item {
  --n: 10;
  --gap: calc((100% - 50px * var(--n) / var(--n) / 2));
  margin: 10px var(--gap);
}

css 滚动蒱捉技术之 scroll scroll

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  width: 100%;
  height: 300px;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.container::-webkit-scrollbar {
  width: 0;
}
.item {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
  scroll-snap-align: start;
  scroll-snap-stop: alway;
}
.item:nth-child(1) {
  background: #62c454;
}
.item:nth-child(2) {
  background: #f5bd50;
}
.item:nth-child(3) {
  background: #ea695d;
}

css 必填样式

.label span:has(+ input[required])::after {
  content: "*";
  color: #f40;
}

/* 选中第一个字母 */
.content::first-letter {
  font-weight: bold;
  font-size: 4em;
}

.content::selection {
  text-decoration: underline;
}

如何实现高度自动的过度

.detail {
  transform-origin: center top;
  transform: scaleY(0);
  transition: 0.5s;
}
.btn:hover .detail {
  transform: scaleY(1);
}

const btn = document.querySelector(".btn");
const detail = document.querySelector(".detail");
btn.onmouseenter = function () {
  detail.style.height = "auto";
  const { height } = detail.getBoundingClientRect();
  detail.style.height = 0;
  detail.style.transition = ".3s";
  detail.offsetHeight;
  console.log(height);
  detail.style.height = height + "px";
};

模拟 material 文本框

.form-item input:valid ~ label,
.form-item input:focus ~ label {
  color: #xxxx;
  transform: translateY(-40px);
  font-size: 16px;
}

flex+margin

  • 父级元素使用 flex 后子元素使用 margin auto，子元素自动上下左右居中
<div style="display:flex">
  <div class="item"></div>
  <div class="item"></div>
  <!-- 这个元素会飘向右边 -->
  <div class="item" style="margin-left:auto"></div>
</div>

<style>
  .container5 .item {
    --n: 7;
    --gap: calc((100% - 50px * var(--n)) / var(--n) / 2);
    margin: 10px var(--gap);
  }
</style>

<div class="container5" style="display:flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

布局-多栏布局

两栏布局

<style>
  .clearfix:after {
    content: "";
    display: block;
    clear: both;
  }
  .container {
    background: lightblue;
    width: 90%;
    margin: 0 auto;
  }
  .aside {
    float: left;
    background: #008c8c;
    color: #fff;
    width: 300px;
    margin-right: 10px;
  }
  .main {
    /* float: right; */
    /* 常规流盒子 避开浮动，创建bfc */
    overflow: hidden;
    background: gray;
  }
</style>

<!-- 宽度自动的时候适应内容 -->
<body>
  <div class="container clearfix">
    <aside class="aside">lorem*1000</aside>
    <div class="main">lorem*10000</div>
  </div>
</body>

三栏布局

<style>
  .clearfix:after {
    content: "";
    display: block;
    clear: both;
  }
  .container {
    padding: 30px;
    border: 3px solid;
  }
  .left {
    float: left;
    width: 300px;
    background: lightblue;
  }
  .right {
    float: right;
    width: 300px;
    background: lightblue;
  }

  .main {
    overflow: hidden;
    background: gray;
  }
</style>

<!-- 宽度自动的时候适应内容 -->
<body>
  <div class="container clearfix">
    <aside class="left">lorem*1000</aside>
    <!-- /* 文字是行盒 行盒会避开浮动元素 */ -->

    <aside class="right">lorem*1000</aside>
    <div class="main">lorem*10000</div>
  </div>
</body>

三栏布局等高问题

  • css3 弹性盒
  • js 控制
  • 伪等高
<style>
  .aside {
    height: 10000px;
    margin-bottom: -9999px;
  }
  .container {
    /* 多余的使用 */
    overflow: hidden;
  }
</style>

书写顺序

  • 浮动元素先写

如果不是浮动元素先写

  • main 在顶部 使用 margin :0 300px;预留空间
  • left 和 right 使用绝对定位
Last Updated:
Contributors: 刘荣杰