随笔分类 - CSS
摘要：一、sass环境的安装：https://blog.csdn.net/Ed7zgeE9X/article/details/123058868 重点：sass是分了3个版本的，都是用来将sass编译成css的工具。一个是node-sass，另一个是dart-sass。 Ruby Sass：是最初的Sas
阅读全文
摘要：CSS 布局就像搭积木一样，实现不难。但是写的注意一些结构，可以减少返工的可能。给UI页面分域，从大到小 可以分为：块、块里面 一、给UI图分区域：给UI图分区域，分的好，是非常利于CSS布局的。 从大到小可以分为，横块，子块，项。 横块：UI基本都是从上到下，分区域的内容。 子块：横块内部的区域，
阅读全文
摘要：CSS 变量 概念：自定义属性（有时候也被称作CSS变量或者级联变量）是由CSS作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由var() 函数来获取值（比如： color: var(--main-color);） 定义作
阅读全文
摘要：参考：https://www.w3cplus.com/css/css-architecture-1.html（推荐） 或 https://blog.csdn.net/eunice_sytin/article/details/83341381 (推荐) 或 https://zhuanlan.zhihu
阅读全文
摘要：一、前言介绍 重点：页面中 多行 多列的结构布局。最好使用布局系统【如 栅格布局，布局容器】，而不是自己 临时手写 css 样式。 1、虽然手写 也能快速实现，但是维护成本高。后期如果要对里面的某一块进行修改，则会直接影响到其他 行列 的布局。如 通过 3 行 3列结构的 布局，手动通过 flex
阅读全文
摘要：css预处理器有：sass/scss、less、stylus 说明： 预处理处理器常用的功能 ： 计算功能，变量（variables），代码混合（ mixins），继承 ，嵌套（nested rules）以及 模块化(Modules) 参考： https://www.jianshu.com/p/9f
阅读全文
摘要：参考：https://juejin.cn/post/7070001080960024583 或 https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout 文档流（流式布局）分为 普通流、定位流、浮动流，不同流内的块级元素和行内元素的布
阅读全文
摘要：图片 1、css3已经可以实现 img标签 和 img内图片分开处理的功能了。类似标签的背景图。 https://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/ 或 https://www.cnblogs.c
阅读全文
摘要：一、PC端 和 移动端适配分析： 1、PC端的适配，只是分辨率的不同引起的适配问题。这种适配好解决，这里就不讲了。 2、移动端的适配，移动端的适配主要是： 屏幕视口的分辨率和像素分辨率是不统一；不同手机的视口 分辨率也是不一样的。 二、（移动端）屏幕相关概念：（下面的概念只是按照个人的理解来写的，只
阅读全文
摘要：1、参考 ： https://www.cnblogs.com/JuFoFu/p/4597416.html 2、表格的margin和padding 无效问题 ： https://my.oschina.net/u/3618644/blog/1570921 可以对表格table设置margin，不能设置p
阅读全文
摘要：参考：https://juejin.cn/post/6999418363239727111 CSS属性值定义语法： 参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Value_definition_syntax （属性值语法有点类似正则的匹配规
阅读全文
摘要：一、flex相关属性含义：https://blog.csdn.net/dreamerzhang66/article/details/80200660 flex容器【设置display：flex】 flex-direction: row; /*决定主轴的方向，即子项目（子元素）横向排列还是纵向排列*/
阅读全文
摘要：css3 动画 实现原理 1、transition 过渡：https://www.runoob.com/cssref/css3-pr-transition.html 语法：（ transition的 属性也可以单独设置） transition: property duration timing-fu
阅读全文
摘要：1、Line-Height Method 适用： 单行文本垂直居中html： <div id="parent"> <div id="child">Text here</div> </div> css： #child { line-height: 200px; } 垂直居中一张图片HTML： <div
阅读全文
摘要：1、手机的响应式布局，所有的单位用rem来表示。 如：设计稿的宽度是750，则html标签的font-size=屏幕宽度/7.5。那么在网页中的尺寸 = 设计高上实际的尺寸/100. 把下面的代码作为一个单独的resize.js文件，手机的页面引用这个文件。 $("html").css({"font
阅读全文
摘要：1、定位元素的属性： top：定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 bottom：定义了定位元素下外边距边界与其包含块下边界之间的偏移。 left：定义了定位元素左外边距边界与其包含块左边界之间的偏移。 right：定义了定位元素右外边距边界与其包含块右边界之间的偏移。 总结
阅读全文
摘要：1、select:first-of-type 和 select:last-of-type：如果 select 是类名要注意 不一定是我们理解的那样，因为他们是基于元素去找的，而不是类名。 即 先查找 select 选择器对应的标签，在父元素下的第一个或最后一个该标签的元素，然后这个标签是不是同时满足
阅读全文
