随笔分类 - CSS
摘要:clamp() 函数的作用是把一个值限制在一个上限和下限之间,当这个值超过最小值和最大值的范围时,在最小值和最大值之间选择一个值使用。 语法 clamp() 函数接收三个用逗号分隔的表达式作为参数,按最小值、首选值、最大值的顺序排列。 { font-size: clamp(20px, 18px, 4
阅读全文
摘要:如下图,如果是你,你会怎么实现: 通常我们会通过字体图标来显示中间的加号,外层用一个div包裹即可;或者使用伪元素来模拟中间的一横一竖,这都比较麻烦。 其实我们可以直接使用div+css就可以实现。 轮廓属性outline outline属性是用来设置一个或多个单独的轮廓属性的简写属性 , 例如 。
阅读全文
摘要:(题图:梵高 向日葵) 我们最开始学前端的时候都会看到教程在处理外部css,js的时候会将css放在header中,js放在body的最后。为什么要这样子处理,今天参考一些资料好好分析下。 为什么外链css为什么要放头部? 首先整个页面展示给用户会经过html 的解析与渲染过程。 而 外链css无论
阅读全文
摘要:问题提出 现在有两个div左右排列,但是两个div的内容不相同,如何设置两个div的css做到在两个div等高排列呢? 下面是网上找的3种实现方法,觉得很有代表性,所以索性收藏起来。 方法一 通过父元素设置 , div自己设置 和 来实现。 方法二 使用 方法三 父元素使用 效果如下图: 参考链接
阅读全文
摘要:outline属性是用来设置一个或多个单独的轮廓属性的简写属性 , 例如 。 轮廓有下面几个属性: 他们有一种简写形式: 轮廓的特点: 轮廓不占据空间,它们被描绘于内容之上。 可以做到下图的效果: 当然我们可以做更好玩的东西,比如一个“+”号: 具体css如下: 是关键,它表示轮廓距div边的距离,
阅读全文
摘要:`table layout: fixed;` 在table上设置上面属性后,如果不设置td的宽度,那么所有td的宽度平分总table宽度。如果设置了td的宽度,则以设置的宽度为准。 // 此为默认值
阅读全文
摘要:提出问题: 现在有两个div,但是两个div里面内容多少不确定,可能左边多,可能右边多,css要如何设置可以保证左右两边的div等高呢? 解决方案: 每个div使用display:table-cell div的父元素使用display:box 示例代码1: <!DOCTYPE html> <html
阅读全文
摘要:css样式的优先级分为引入优先级和声明优先级。 引入优先级 引入样式一般分为外部样式,内部样式,内联样式。 外部样式:使用link引入的外部css文件。 内部样式:使用style标签书写的css样式。 内联样式:直接书写在html标签里面的css样式。 优先级如下: 内联样式 > 外部样式 = 内部
阅读全文
摘要:好久没写文章了,下笔突然陌生了许多。 第一个原因是刚找到一份前端的工作,业务上都需要尽快的了解,第二个原因就是懒还有拖延的习惯,一旦今天没有写文章,就由可能找个理由托到下一周,进而到了下一周又有千万条理由拖到下下一周,所以解决的办法就是当成任务来做,让自律成为一种习惯,做起事来就不会有太大的抱怨。
阅读全文
摘要:文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用。 一、盒子没有固定的宽和高 方案1、Transforms 变形 这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用。内容块定义transform: translate(-50
阅读全文
摘要:CSS概念 CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表) Css是用来美化html标签的,相当于页面化妆。 样式表书写位置: <head> <meta charset="UTF-8"> <title>Document</title> <style type="
阅读全文