CSS
Always--Learning
选择远远大于努力
展开
-
TailwindCSS为前端开发者带来了什么?
什么是Tailwind CSS?Tailwind CSS是一个功能类优先的CSS框架,它集成了flex、text-center这样的类,Tailwind CSS希望实现的是开发者无需离开HTML页面,即可快速创建出各种样式效果。Tailwind CSS相较于其他CSS框架有什么优势?优势1:Tailwind CSS类名具有较好的语义化传统的语义化类名是CSS难以维护的重要原因,也就是说起名很麻烦,但是Tailwind CSS的语义化类名可以很好的解决这个问题,例如:text-lg:表示一个原创 2022-04-24 07:29:55 · 2441 阅读 · 1 评论 -
Rem布局是如何实现响应式的?
从一个实际例子来看Rem布局是如何实现响应式的首先rem是一个相对单位,指的是相对于根元素html的font-size的大小,假如根元素font-size大小为16px,那么1rem就是16px,2rem就是32px,但是px是一个绝对单位,如果我们将根元素的font-size设置为一个绝对单位,那么是无法实现响应式布局的,因此,我们可以给根元素的font-size的大小设置为一个动态单位vw。给根元素的font-size指定为动态单位vw请看下面的例子:/* 100vw -->原创 2022-04-20 15:55:04 · 849 阅读 · 0 评论 -
这一次,一起来了解下position的盲区
为什么要了解position?学习这个知识之前,我们首先要知道为什么要学习这个知识点,position不仅是面试中的常考点,很多CSS布局中也是不可获取的一种方案,因此我们必须熟练掌握这个知识。Position有哪些属性?1. 静态定位static静态定位指的是目标元素使用正常的布局,也就是按照元素在文档流中的默认位置进行排列布局,此时设置top、right、bottom、left和z-index属性是无效的。2. 相对定位relative相对定位是相对元素未添加定位时的位置进行移动,原创 2022-03-12 17:22:28 · 523 阅读 · 0 评论 -
这一次,彻底搞懂CSS选择器
一、CSS选择器的优先级第一优先级:!important内联样式/行内样式:权重1000ID选择器:权重为0100类、伪类、属性选择器:权重为0010标签、伪元素选择器:权重为0001通配符、子类选择器和兄弟选择器:权重为0000继承的样式没有权重。二、权重是十进制吗?上面我们提到的权重不是十进制而是256进制,!important的权重是正无穷,但是这里的无穷是可以比较的,也就是说无穷+1比无穷要大。三、权重之间是如何进行比较的?权重从左向右进行比较。1000 > 0原创 2022-02-21 16:36:43 · 218 阅读 · 0 评论 -
安装sass并将sass文件转换为css文件
安装sass全局安装sassnpm install -g sass注意:sass的后缀名是scss。将sass文件转换为css文件将sass文件转换为css文件sass --watch test.scss output.css执行上面的语句会监听scss文件的变化,一旦文件发生变化并保存后将立即输出到css文件上。监听目录的变化sass --watch app/sass:public/stylesheetssass将会监听app/sass目录下所有文件的变动,原创 2022-01-07 16:53:10 · 1097 阅读 · 0 评论 -
面试官:请实现单行文本居中,多行文本左对齐?
什么是单行文本居中,多行文本左对齐?为了准确的向大家阐述,这是什么意思?我特意做了一个GIF动图,这样能够更好的帮助大家理解什么是单行文本居中,多行文本左对齐。实现方法实现方式1:相对定位 + transform + inline-block之所以要设置inline-block是因为这样可以让元素的宽度有子元素决定。HTML结构 <div class="father"> <div class="text">测试单行文字居中,多行文本左对齐。测试单行原创 2021-11-15 08:06:00 · 970 阅读 · 0 评论 -
面试官让你使用CSS画一个圆,你会吗?
最近看到一道比较基础的前端面试题,和大家分享下。面试官问:请使用CSS绘制一个圆。方法:使用border-radius我们只需要将border-radius设置为50%即可。HTML部分<div class="circle"></div>CSS部分 .circle { width: 80px; height: 80px; background-color: pink; margin: 10px auto; border-radius: 50%; }.原创 2021-10-02 10:22:34 · 326 阅读 · 0 评论 -
一道考查面试者CSS功底的面试题—实现CSS九宫格
通过CSS实现九宫格可以很好的考查候选人的CSS基本功,所以在当今的前端面试中,无论是大厂还是小厂,这个面试题经常出现在候选人面前,这道题目看似简单,但是最终能够做出来的人也是凤毛麟角,让我们来一探究竟吧。方法一:使用tabletable布局能够实现的原因在于table的tr和td能够将元素形成行列显示。table布局中有一个是否合并边框的样式border-collapse: collapse;值得我们注意。HTML部分<table> <tr> .原创 2021-10-01 16:00:58 · 312 阅读 · 0 评论 -
这一次,彻底搞定伪类和伪元素的区别
很多人经常对CSS中的伪类和伪元素分不清楚,或者将这两者混为一谈,今天让我们来了解下这两者都有哪些区别。在CSS3之前是没有伪元素与伪类的区别的,直到CSS3才将这二者区分开来。为什么要引入伪类和伪元素?CSS之所以要引入伪类和伪元素是为了格式化文档树之外的信息,也就是说,伪类和伪元素是用来修饰不在文档树的部分,比如第一句话中的第一个字母或列表中的第一个元素。什么是伪类?伪类表示的是被选择元素的某种状态,例如hover。伪类的分类状态性伪类状态性伪类是根据元素当前的状态进行选择的.原创 2021-09-28 14:11:37 · 184 阅读 · 0 评论 -
一篇文章学会Flex布局的基本使用
传统布局与Flex布局的区别传统布局兼容性好,flex布局兼容性较差。传统布局不能在移动端很好的布局,flex布局则适合在移动端布局。传统布局布局较为繁琐,Flex布局较为简单。flxe的布局原理flex布局意为弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flxe布局。当为父盒子设置flex布局之后,子元素的float、clear和vertical-align属性都将失效。采用Flex布局的元素,称为Flex容器,简称容器,它的所有子元素自动成为容器成员,并称为Fl原创 2021-08-01 19:48:55 · 312 阅读 · 0 评论 -
面试官:请说下CSS选择器优先级
什么是CSS选择器优先级?CSS选择器优先级是指在给CSS元素设置样式的时候,如果同时有多个CSS选择器同时指向一个元素,那么优先级高的选择器的元素样式会最终应用到这个元素上。通过权重来计算CSS选择器的优先级1. !important的优先级是最高的。(没有这个属性的话,则按照下面的向量来计算优先级)2. 权重相同,看谁的定义靠后,越靠后就会覆盖掉前面的样式例子1例子2例子3(优先级相同,谁在后面谁起作用)[参考资料]2分钟掌握 CSS 选择器优先级(特异性)...原创 2021-07-24 17:35:05 · 218 阅读 · 0 评论 -
大白话阐述什么是BFC(一道可能的面试题)
什么是BFC?在系统性的阐述什么是BFC之前,我们首先介绍下CSS中常见的布局。1. 普通流。行内元素排成一行,一行不够则换行,块级元素,一个占一行。2. 浮动。元素会脱离普通流。3. 定位。元素会脱离普通流。BFC也属于普通流,设置为BFC的元素,相当于一种隔离了的元素,容器内部的元素不会在布局上影响外面的元素。如何触发BFC?根元素(<html>)浮动元素(元素的float不是none)绝对定位元素(元素的position为absolute或fixed)dis原创 2021-07-22 21:06:13 · 566 阅读 · 0 评论 -
如何排查是哪个插件影响了我们的CSS样式?
问题描述今天在学习Flex布局的时候,首先定义了一个div盒子,但是页面竟然出现了三个div盒子,我首先想到可能是浏览器插件对样式进行了修改,后来果然是这样。排查方法首先打开浏览器的网络页面。清空所有的请求。刷新页面。任意点击一个非本地的请求,从Request URL中判断是哪个插件的请求。排查结果原来是SurfingKeys这个插件修改了我们的样式,我们只需将该插件设置为点击时使用,即可恢复原状。...原创 2021-07-19 10:37:37 · 280 阅读 · 0 评论 -
重置PC端页面的CSS样式代码(reset.css)
reset.css来源:https://github.com/jgthms/minireset.css/blob/master/minireset.css/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,原创 2021-05-13 16:05:30 · 408 阅读 · 0 评论