逍湘子

css自定义属性

在实际的页面元素中，有很多时候，行内和块级元素是混存的，而又需要让他们在一行整齐排列，所以，需要行内和块级元素水平居中对齐。<section> <div>张三三</div> <div>20岁</div> <span>男</span> <span>201200101</span></section>/*第一种方案,思路：弹性盒子布局，水平，垂直居中*/section {

CSS 中的 box-sizing 属性定义了客户端应该如何计算一个元素的总宽度和总高度。(form MDN)// content-box.div-container { box-sizing: content-box; width: 100%;}// content-boxdiv-child-container1 { box-sizing: content-box; width: 100%; border: solid #5B6DCD 10px; padding: 5px;}

https://juejin.im/post/6844903838449664013https://juejin.im/post/6844903926110617613

继承：@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。这样就可以达到复用的目的，减少代码的重复量。比如：.container-a { width: 200px; height: 100px; margin-left: 10px;}container-b 和 contaienr-a 有几乎同样的样式属性，则可以这样来写：.container-b { @extend .con

有三个样式：container-a, container-b, container-c.container-a { .container-b { color: red; }}问题：.container-c 如何继承.container-b的样式？.container-c { @extend .container-a .container-b}这种写法貌似不行，怎么办？解决方案：将.container-b的 属性：color: red，样式改写成一个占位符：%占位符名%te

.div-container { **display: flex;** flex-direction: column; justify-content: center; width: 100%; .sub-div { **margin-left: auto; // 使子元素靠右按列排列** margin-right: 10px; // 控制子元素右外边距的距离 ...

https://github.com/dwqs/blog/issues/69

https://github.com/dwqs/blog/issues/31

最近项目中在做一些易用性的bug修复，涉及到样式，布局，之前一直用的是纯的CSS，而现在项目比较庞大，用到了Scss,所以自己在做的过程中也在从不断的了解，学习到熟悉，然后做一些简单的总结。首先附上Scss的官方学习网站：https://www.sass.hk/1.Scss和CSS，Sass的区别这里不再赘述，请移步：https://www.jianshu.com/p/35f49...

简介Sass 有两种语法规则(syntaxes),目前新的语法规则（从 Sass 3开始）被称为 “SCSS”( 时髦的css（Sassy CSS）),它是css3语法的的拓展级，就是说每一个语法正确的CSS3文件也是合法的SCSS文件，SCSS文件使用.scss作为拓展名。第二种语法别成为缩进语...

以下代码是基于scss格式的：.sass与.scss的区别 “.sass”只能使用 Sass 老语法规则（缩进规则），“.scss”使用的是 Sass 的新语法规则，也就是 SCSS 语法规则（类似 CSS 语法格式）。 .sass:$font-stack: Helvetica, sans-serif //定...