css
文章平均质量分 80
css的一些笔记
ccattempt
是的,就在那里。
展开
-
sass的基本语法整理
整理下sass的常用语法目录1、变量2、嵌套语法3、继承4、注释5、根选择器@at-root6、1、变量sass中可以使用变量,变量名以$开头:$c: #fff;body { color: $c;}/* 编译成css */body { color: #fff;}注意变量声明遵循实现了块级作用域,如果在选择器内声明的变量,只能在选择器内部使用:// 正确案例body { width: 100%; height: 100%; $c: red; #app.原创 2021-12-19 17:57:12 · 1881 阅读 · 0 评论 -
使用css设置超出盒子宽度时显示省略号
1、单行单行比较常见,不赘述。.show-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}2、多行多行文本相对来说不太好处理,因为没有专门的css属性支持。不考虑兼容性可以通过-webkit-line-clamp模拟,它的功能是可以设置块级盒子里面最多能够显示的行数,如果超出则会在最后一行显示省略号。这个属性需要配合其他属性使用。.show-mul-ellipsis { display原创 2021-08-14 13:55:42 · 1577 阅读 · 0 评论 -
css中的渐变色
简单介绍渐变色和阴影目录1、径向渐变2、径向渐变参考文献1、径向渐变径向渐变使用linear-gradient,语法如下:background-image: linear-gradient(渐变方向, 颜色1[位置1], 颜色2[位置2], 颜色3[位置3]...);渐变方向有以下几种值:使用表示方位的单词to top 表示从下往上的方式进行渐变to bottom 表示从上往下的方式进行渐变to right 表示从左往右的方式进行渐变to left 表示从右往左的方.原创 2021-02-21 22:35:09 · 8207 阅读 · 1 评论 -
nth-child和nth-of-type的区别
nth-child和nth-of-type是比较常用的一个伪类选择器,过去一直没在意这个,今天发现原来他们之间还有这样的区别,记录一下。我们首先来看MDN上对它们的解释::nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素,然后按照位置先后顺序从1开始排序,选择的结果为CSS伪类:nth-child括号中表达式(an+b)匹配到的元素集合(n=0,1,2,3...):nth-of-type(an+b) 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选.原创 2021-02-10 16:48:06 · 1781 阅读 · 1 评论 -
学习flex基础用法,这篇就够啦
flex布局是目前常用的一种布局方式,这篇文章主要对flex的常用基础知识做一个整理。目录1、flex简介2、主轴上的设置2、侧轴上的设置4、其余部分参考链接1、flex简介flex布局是一种一维布局(网格布局则是一种二维布局)。这种布局主要作用于父级容器,通过控制父级容器的排列规则来达到需要的效果。任何一个元素都可以使用flex布局,只要给元素添加display: flex;即可。我们把添加了display: flex;的元素称为容器,元素内部的子元素称为项目。从上图我们可以看出,flex布.原创 2021-02-05 17:24:04 · 2683 阅读 · 0 评论 -
关于position的sticky定位的介绍
前端时间浏览阮神的博客发现position居然还有个sticky这种神奇的定位,马上试了试,简单好用,一些简单的,比如说手机京东网页的吸附效果就可以使用sticky快速做好。目录1、`sticky`的效果2、`sticky`的简单介绍3、参考链接1、sticky的效果sticky有粘性的意思,所以sticky定位也可以称为粘性定位。从名字就可以看出这个定位常用于一些吸附功能。例如下面这个京东的页面,页面向上滑动的时候搜索框会从相对定位变成固定定位,使得其在用户浏览页面的时候搜索框一直固定在顶部,便.原创 2021-02-04 21:49:36 · 913 阅读 · 0 评论 -
关于colgroup和col标签的介绍,使用其达到固定表头的效果
今天摸鱼的时候看阮神的博客,里面介绍了position的用法,最后一部分介绍了一个新的定位属性sticky,其中有一个固定表头的案例,我发现案例里面的固定表头只能用于那种占据整个页面的那种大表,但是我们常用的表格通常是只在一部分区域使用,于是查了一下固定表头的实现,在其中一种实现方法中发现了colgroup和col标签,回想起element-ui的表格组件也用了这两个标签,属实好奇,百度后决定记录一下。目录1、colgroup和col2、colgroup和col标签的区别3、使用colgroup和co.原创 2021-02-01 17:43:06 · 8848 阅读 · 0 评论 -
css样式为什么是从右向左解析
过去从来没有考虑过css的解析顺序,今天偶然发现这个问题,记录一下,这篇来自津泊客的同名文章,我自己在语言上做了一些调整。另外可以结合winter老师的一个分享视频进行理解。这里先感谢他们。目录1、浏览器的渲染过程1、浏览器的渲染过程从这张图可以看出,浏览器在...转载 2021-01-31 16:29:39 · 648 阅读 · 0 评论 -
关于html中文字空格以及换行符的处理
在阮一峰大神的博客中发现空格原来可以有多种处理方式,过去只知道用$nbsp;真是惭愧。长路漫漫吖目录1、html里面的空格1、html里面的空格123原创 2021-01-27 16:28:24 · 6133 阅读 · 0 评论