css系列
jiaojsun
做一只快乐的小码龙
展开
-
SASS—混合指令 (Mixin Directives)
混合指令(Mixin)用于定义可重复使用的样式,避免了使用无语意的 class,比如.float-left。混合指令可以包含所有的 CSS 规则,绝大部分 Sass 规则,甚至通过参数功能引入变量,输出多样化的样式。9.1. 定义混合指令@mixin(Defining a Mixin:@mixin)混合指令的用法是在@mixin后添加名称与样式,比如名为large-text...原创 2020-04-24 16:41:35 · 1025 阅读 · 1 评论 -
css系列—水平居中总结
本文有参考https://zhuanlan.zhihu.com/p/24419350水平居中子元素定宽margin法 满足以下三个条件1.子元素定宽2.子元素为块级元素(行内元素设置为display:block也算)3.子元素的margin-left和margin-right都必须为auto<!DOCT...原创 2019-06-02 18:15:46 · 244 阅读 · 0 评论 -
css系列—垂直居中总结
子元素不定高或者定高定位法水平居中:定位法1.子元素不定高或者不定高2.子元素为绝对定位,并设置top:50%3.子元素添加transform: translate(0,-50%);<!DOCTYPE html><html lang="en"><head> &l...原创 2019-06-02 20:45:49 · 102 阅读 · 0 评论 -
css系列—水平垂直左右居中
水平居中:定位法1.父元素上设置display:flex2.子元素元素上设置margin:auto。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" c...原创 2019-06-02 20:47:45 · 159 阅读 · 0 评论 -
css系列—sass,scss,less,stylus的比较
这三种的直观比较可以参考这两篇博文https://www.jianshu.com/p/b2174b800e40(CSS 预处理的区别的深度比较 - Stylus/Sass/Less)https://www.oschina.net/question/12_44255(为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus)1.CSS预处理器CSS预处...原创 2019-07-08 20:46:38 · 6974 阅读 · 2 评论 -
nth-child和nth-of-type两个选择器的区别
CSS3 :nth-child()规定属于其父元素的第二个子元素的每个 p 的背景色:p:nth-child(2){background:#ff0000;}<!DOCTYPE html><html><head><style> p:nth-child(2){background:#ff0000;}</...原创 2019-07-26 11:38:14 · 212 阅读 · 0 评论