CSS
文章平均质量分 87
学习css,让你的前端不再单调
归子莫
对什么都感兴趣的开发者。
展开
-
【CSS3】盘点Sass与LESS的异同
之前写过Sass和less的文章,有的同学在评论区有过留言,问两者有何不同,使用的时候该怎么去选择?在这篇文章中回复了。我不会说哪一种好(成年人的世界要懂得左右逢源!),我列出来,你们来看!原创 2022-01-10 22:08:12 · 471 阅读 · 5 评论 -
【CSS3】伪类与伪元素真的不“伪”,且不要记混哟
前端开发一年之前从来不用,一年之后伪类伪元素真香!但是有一个问题,伪类和伪元素傻傻分不清!今天就来好好的辨一辨它们。原创 2021-12-30 20:34:05 · 886 阅读 · 32 评论 -
【CSS】我如何解释CSS变量的好
【CSS】我如何解释CSS变量的好博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!说明其实多说变量有多好,干我们这行的都知道。就说JS,没了变量,那代码就乱了套。那可读性和代码的篇幅,都让程序员成为一次性工,没法复用。所以CSS的变量的作用非常之大(原谅没啥墨水的程序员),虽说CSS逻辑没有那么复杂,但对于代码的可读性有着大大的增强。CSS作为样式官,那么良好的代码风格,不正是符合它的风格吗。CSS 变量可以访问 DOM,这原创 2021-11-29 21:36:23 · 417 阅读 · 0 评论 -
【Sass/SCSS】我花4小时整理了的Sass的函数
【Sass/SCSS】我花4小时整理了的Sass的函数博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!说明Sass 定义了各种类型的函数,这些函数可以通过 CSS 语句直接调用。可以看到Sass的函数功能已经相当丰富了。整理了Sass的主要函数,重点在于后面的颜色函数,设计非常的银杏!String(字符串) 函数quote(string)给字符串添加引号quote(hello) //"hello"unquote原创 2021-11-23 23:33:17 · 1143 阅读 · 0 评论 -
【Less】给 CSS 加点料
【Less】给 CSS 加点料博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!说明相比Sass的高调宣言,Less就比较低调了,看下面官网的介绍官网地址:Less中文网什么是 Less已经知道了什么是Sass的情况下,相信对什么是Less应该也会比较的清晰了,它也是CSS的武器,让CSS更加强大。(感觉最近说话有点朴素了哈)官方回答:Less (Leaner Style Sheets 的缩写) 是一门向后兼容的 CS原创 2021-11-22 23:49:33 · 478 阅读 · 0 评论 -
【Sass/SCSS】预加载器中的“轩辕剑”
【Sass/SCSS】预加载器中的“轩辕剑”博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!说明随着前端技术发展的越来越迅速,前端的样式也需要更加贴近时代的审美,那么CSS就需要承担更多的工作,(强调!这不是煽情!这是宣讲背景。????),为了给CSS怼上去,预加载器出现了,没错,CSS用上了武器。Sass/SCSS——预加载器中的“轩辕剑”,这也不是我帮它吹,是它自己说的,下图为例。官网地址:SASS中文网什么是Sas原创 2021-11-18 10:34:49 · 474 阅读 · 0 评论 -
CSS 浮动布局放弃float,拥抱flex(详解)
CSS 浮动布局放弃float,拥抱flex(详解)文章目录CSS 浮动布局放弃float,拥抱flex(详解)说明Flex布局容器和项目容器属性flex-direction属性flex-wrap属性flex-flow属性justify-content属性align-items属性align-content属性项目属性order属性flex-grow属性flex-shrink属性flex-basis属性flex属性align-self属性博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人原创 2021-07-13 19:03:29 · 1184 阅读 · 1 评论 -
使得元素垂直居中和水平居中
使得元素垂直居中和水平居中垂直居中在子元素的line-height中设置和父元素中的height的值一样就可以啦水平文字居中在父元素里面配置text-align: center;...原创 2020-02-21 18:43:49 · 165 阅读 · 0 评论 -
border-radius(圆角)属性和box-shadow(阴影)的使用
border-radius属性的使用顺时针的顺序一个值div{border-radius:5px}定义的盒子四个角5像素圆角效果两个值div{border-radius:5px 0;} 定义的盒子左上角和右下角5px圆角,其它两个角为0不圆角三个值div{border-radius:5px 5px 0 0;} 定义盒子的左上角和右上角5px圆角,其它两个角为0不圆角...原创 2020-02-21 17:19:26 · 1088 阅读 · 0 评论 -
使用margin实现类似浮动的效果
使用margin实现类似浮动的效果margin:-60px 15px 15px 15px; 类似于像这样的效果。原创 2020-02-21 17:10:28 · 264 阅读 · 0 评论 -
margin标签的使用
margin(外边距)属性的使用定义和用法margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。这个属性有几种配置的方式方法一(四个值)margin:10px 5px 15px 20px;上外边距是 10px右外边距是 5px下外边距是 15px左外边距是 20px方法二(三个值)margin:10px 5px 15px;上外边距是 10...原创 2020-02-18 12:11:36 · 3312 阅读 · 0 评论 -
CSS 盒子模型(Box Model)
CSS 盒子模型(Box Model)所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。定义CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。图解Margin(外边距) - 清除边框外的区域,外边距是透明的。Border(边框) - 围...原创 2020-01-31 13:04:17 · 373 阅读 · 0 评论 -
样式的继承和优先级
样式的继承和优先级样式的继承儿子会继承父亲没有的样式样式的优先级如果同时作用的话,要先比较优先级,优先级的关系为:1、id > class > 标签2、行内样式 > 内嵌样式 > 外部样式3、优先级相等的话后面的样式会覆盖前面的样式强制优先级!important样式的权重叠加标签样式(1) < 类演示(10) < id(100) &...原创 2020-01-30 22:19:37 · 375 阅读 · 0 评论 -
CSS层叠样式表
CSS层叠样式表定义CSS控制网站的表现CSS由三部分构成选择器属性属性的取值选择器类样式选择器1、必须以点开头2、通过元素的class属性来调用3、可以多次调用ID选择器1、必须以#号开头2、通过元素的id属性来调用3、只能被调用一次标记选择器直接选择HTML相应的标记关联选择器标签下面的子集标签1、空格 包括下个层级的2、尖括号 必须为父子关系的3、...原创 2020-01-30 21:55:51 · 281 阅读 · 0 评论