当前标签: css
一个很实用的css技巧简析
我是小雨小雨，专注于更新有趣、实用内容的小伙，如果内容对大家有一点帮助，那么就请动动手指，给个关注、点赞支持一下吧。 ^ - ^ 序言 前两天接到一个需求，其中包括一个有序的列表，我们今天就来看看这个有序怎么做更方便、简单。 当然，这个功能很简单： * 可以手动写死... * 可以循环插入dom，用索引...
2020-02-29 12:43
阅读(58)
天了噜，为什么外链css要放在头部，js要放在尾部？
（题图：梵高-向日葵） 我们最开始学前端的时候都会看到教程在处理外部css，js的时候会将css放在header中，js放在body的最后。为什么要这样子处理，今天参考一些资料好好分析下。 为什么外链css为什么要放头部？ 首先整个页面展示给用户会经过html 的解析与渲染过程。 而外链css无论放在h...
2019-12-03 11:03
阅读(122)
CSS实现带箭头的提示框
我们在很多UI框架中看到带箭头的提示框，感觉挺漂亮，但是之前一直不知道其原理，今天网上找了些资料算是弄清楚原理了； 先上效果图： 原理分析： 上面的箭头有没有觉得很像一个三角形，是的，它就是三角形；只不过它这个尖角是通过两个三角形来实现的； 首先新建一个div，画出提示框的轮廓 <div clas...
2019-10-14 16:13
阅读(146)
【CSS】CSS特效集锦，视觉魔法的碰撞与融合（一）
前言 在本文中我讲述了7种CSS的特效，它们也许看起来并不惊艳，但是我认为却足够传达本文的理念：编写一些特殊的CSS样式的时候需要不拘于常理，要用特殊的认识角度看待标签和样式属性，从而用「绕个弯」的方式达到效果。 一.浮光掠影 首先我们看第一个实现效果：在鼠标浮动到图片上方时，让一片白影一闪而过。 ...
2019-08-22 09:01
阅读(190)
还在为垂直居中苦恼？CSS 布局利器 flexbox 轻轻松松帮你搞定
传统的 CSS 布局方式是基于盒模型（它是根据盒子与父盒子以及兄弟盒子的关系确定大小和位置的算法），实现时依赖于 block, inline, table, position, float 这些属性，但对于一些特殊布局不易实现，比如垂直居中。 Flexbox Layout 是一种新的布局方式，被称为弹性布局，它使...
2019-08-12 09:39
阅读(239)
你所不知道的 CSS 负值技巧与细节
写本文的起因是，一天在群里有同学说误打误撞下，使用负的 outline-offset 实现了加号。嗯？好奇的我马上也动手尝试了下，到底是如何使用负的 outline-offset 实现加号呢？ 使用负值 outline-offset 实现加号 假设我们有这样一个简单的结构： <div></div> div { ...
2019-08-08 10:30
阅读(112)
2019前端面试系列——CSS面试题
盒模型 /* 红色区域的大小是多少？200 - 20*2 - 20*2 = 120 */ .box { width: 200px; height: 200px; padding: 20px; margin: 20px; background: red; border: 20px solid black; box-...
2019-07-20 14:14
阅读(465)
CSS 二十年发展简史
作者 | 夏之安然 责编 | 伍杏玲 出品 | CSDN（ID：CSDNnews） 在2019年的今天，我们能在网上看到炫酷的动画加载，精彩绝伦的交互效果，以及从 PC 端到移动端的响应式交互，大家觉得习以为常。可你不知道的是，在 20 多年前，网页仅仅提供了文档展示能力，没有装饰的它就像一张黑白报纸...
2019-06-26 14:42
阅读(154)