Giter VIP home page Giter VIP logo

infinite-css's People

Contributors

liuxiaodeng avatar

Stargazers

avatar avatar

infinite-css's Issues

自适应宽高等比矩形

padding 是前端开发最常用的属性之一，很多时候我们都只是用它来做为元素的内边距使用。很少有人关心更多的特性。

其实它有个特性可能大家都不知道，就是当它的值为「百分比」时，它的计算规则：不管是水平方向上还是垂直方向上的值都是相对元素的「宽度」来计算出来的。

所以利用这一点，我们可以实现一个等比例自适应的矩形。

比如：实现一个宽高比为 2:1 的矩形。

<template>
<div class="rect"></div>
</template>
<style>
.rect {
  padding: 25% 50%;
  background-color: #3eaf7c;
}
</style>

查看效果

更多优质文章关注微信公众号：六小登登，加我微信，拉你进入优质前端交流群。来这里一起交流，一起进步。

content属性的妙用之动态切换图片

通常要想实现二个图片的切换效果，都是两张图片的现实隐藏。今天看到这个之后你就可以使用 CSS 来实现这个效果了。简单方便。

注意：看似图片替换了，但是当你打开控制台查看时，图片的 src 属性是不发生变化的，这里只是修改了视觉效果。

另外除了 img 元素可以这么做之外，其他普通元素也是可以的，大家赶紧自己尝试一下吧。

<template>
<img class="img-item" src="/head.png">
</template>
<style>
.img-item {
  width: 200px;
}
.img-item:hover {
  content: url(/gonghao.jpg);
}
</style>

查看效果

更多优质文章关注微信公众号：六小登登，加我微信，拉你进入优质前端交流群。来这里一起交流，一起进步。

任意高度的全屏布局

全屏布局，你第一想到的就是 height: 100%，可是这里面有一个坑：

就是在高度设置 100% 的时候，父级元素的高度必须设定 100%，否则是无效的。

但是如果涉及到比较深层嵌套时，是一件非常麻烦的事情。比如我们会经常见到这样的代码：

html,body {
  height: 100%;
}

目的就是为了子元素可以设定 height: 100%。这种方式的缺点就是嵌套层级深时，带来维护的麻烦。

今天介绍一种方法可以让元素的 height: 100% 产生效果。那就是给元素加个绝对定位属性。

<template>
<div class="box">
  无高度父元素
  <div class="child"></div>
</div>
</template>
<style>
.box {
  position: relative;
  padding: 100px;
  width: 300px;
  color: #3eaf7c;
}
.child {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.5);
}
</style>

当然除此之外，我们还可以用另外一种方式实现相同效果。

.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.5);
}

大家可以想象一下，在什么场景下使用此方法比较好。其实页面的 loading 非常适合这种方式实现。不仅仅是全局的 loading，更适合某个局部元素的 loading。比如表格刷新时，在表格中加入loading。

这是方式的好处在于，我们不用关心元素的高度，适用性非常强。
查看效果

更多优质文章关注微信公众号：六小登登，加我微信，拉你进入优质前端交流群。来这里一起交流，一起进步。

等间距布局

利用流的自动填充空间特性，在等间距布局的同时，我们可以自由的设置每个区域的margin、padding、border而不用自己去计算。

以往我们都是自己计算出宽度然后减去各种值，而这里则无需关注这些。任由你飞翔。

<template>
  <div class="demo1">
    <div class="item"><div class="child"></div></div>
    <div class="item"><div class="child"></div></div>
    <div class="item"><div class="child"></div></div>
  </div>
</template>
<style>
.demo1 {
  padding: 0 1em;
  background-color: #f5f5f5;
  overflow: hidden;
}
.demo1 .item {
  float: left;
  width: 33.3%;
}
.demo1 .child {
  margin: 1em;
  padding: 1em;
  background-color: #3eaf7c;
  border: 1px solid #3eaf7c;
}
</style>

查看效果

更多优质文章关注微信公众号：六小登登，加我微信，拉你进入优质前端交流群。来这里一起交流，一起进步。

流特性之无宽度导航

无宽度导航，让导航更具有自适应，不再使用繁琐的计算，解放你的个位数加减计算能力。

通常导航布局，都会这么做：

<template>
  <div class="demo1">
    <a class="nav">导航一</a>
    <a class="nav">导航二</a>
    <a class="nav">导航三</a>
  </div>
</template>
<style>
.demo1 {
  width: 200px;
  border-radius: 3px;
  background-color: #3eaf7c;
  
}
.demo1 .nav {
  display: block;
  width: 100%;
  border-bottom: 1px solid #0b7b48;
  color: #fff;
}
</style>

因为增加 width: 100% 破坏了元素的流动性，所以当我们增加一些边距时，会超出意外的效果。

.demo1 .nav {
  display: block;
  padding: 10px;
  width: 100%;
  border-bottom: 1px solid #0b7b48;
  color: #fff;
}

而我们去掉宽度，保持其流动性即可。

.demo1 .nav {
  display: block;
  padding: 10px;
  border-bottom: 1px solid #0b7b48;
  color: #fff;
}
</style>

效果查看

更多优质文章关注微信公众号：六小登登，加我微信，拉你进入优质前端交流群。来这里一起交流，一起进步。

CSS实现任意高度的上下收缩动画

任意高度元素的上下滑动效果：

利用 max-height 的特性，设置一个永远比内容大的高度，这时元素的高度就是内容的高度，这样在配合使用 transition 属性就可以实现过渡效果。

这里使用的技巧就是，设置一个高度永远比内容要高。

不过这里有需要注意的地方是：不能把高度设置的太高，否则会出现「延迟现象」。应该找一个绝对安全且较小的值。

查看效果

<template>
  <div class="box">
    鼠标悬浮进行滑动鼠标悬浮进行滑动鼠标悬浮进行滑动鼠标悬浮进行滑动鼠标悬浮进行滑动鼠标悬浮进行滑动鼠标悬浮进行滑动鼠标悬浮进行滑动鼠标悬浮进行滑动鼠标悬浮进行滑动鼠标悬浮进行滑动鼠标悬浮进行
  </div>
</template>
<style>
.box {
  padding: 20px;
  width: 150px;
  max-height: 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  overflow: hidden;
  transition: max-height 1s;
  cursor: pointer;
}
.box:hover {
  max-height: 450px;
}
</style>

更多优质文章关注微信公众号：六小登登，加我微信，拉你进入优质前端交流群。

content属性的妙用之通用字符

利用 CSS 添加通用字符，优势在于更好的替换，减少多处填写更改 HTML 代码。

<template>
<div>
  <form class="form">
    <label>用户名</label><input type="text" />
    <label>手机号</label><input type="text" />
    <label>邮箱</label><input type="text" />
  </form>
</div>
</template>
<style>
.form label:before {
  content: "*";
  color: red;
}
</style>

注意️：我这里只是写了一个最为常见的简单用法，你可发挥更大的价值。一般固定化格式的都可以很好的利用这一点。而且内容也可以更加丰富多样。

.form label:before {
  content: "我可以是更多的东西";
}

查看效果

更多优质文章关注微信公众号：六小登登，加我微信，拉你进入优质前端交流群。来这里一起交流，一起进步。

content属性的妙用之计数器 

<template>
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</template>
<style>
.parent {
  counter-reset: number;
}
.child:before {
  counter-increment: number;
  content: counter(number);
}
</style>

注意: 一个容器里只能有一个「计数器值」。所以下面这种是不会出现递增的。

<style> .counter { counter-reset: counter; } .counter:before { counter-increment: counter; content: counter(counter); } </style> 
<template>
  <div class="counter"></div>
  <div class="counter"></div>
  <div class="counter"></div>
</template>
<style>
.counter {
  counter-reset: counter;
}
.counter:before {
 counter-increment: counter;
 content: counter(counter);
}
</style>

所以，从这方面也引出了一个问题，就是当我们在 body 元素上重置一个默认值时，它将在任何地方都会递增。
查看效果

更多优质文章关注微信公众号：六小登登，加我微信，拉你进入优质前端交流群。来这里一起交流，一起进步。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.