CSS笔记
前端小笔记
zhongbusi
这个作者很懒,什么都没留下…
展开
-
CSS架构
概述 在一个大型项目中,由于页面过多,导致CSS代码难以维护和开发。 所以CSS架构可以帮助我们解决文件管理与文件划分等问题。 首先要对CSS进行模块化处理,一个模块负责一类操作行为。可利用Sass或Less来实现。 文件夹 含义 base 一些初始的通过CSS,如重置默认样式,动画,工具,打印等。 components 用于构建页面的所有组件,比如按钮,表单,表格,弹窗等。 layout 用于布局页面的不同部分,如页眉,页脚,弹性布局,网格布局等。 pages 放置页面之间原创 2020-07-21 02:46:53 · 276 阅读 · 0 评论 -
Sass与Less笔记
概述 Sass和Less都属于CSS预处理器。 CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程特性。 如:变量、语句、函数、继承等概念。将CSS作为目标生成文件,然后开发者就只要使用何种语言进行CSS的编码编码工作 语法 1、注释 2、变量、插值、作用域 3、选择器嵌套,伪类嵌套、属性嵌套(Sass) 4、运算、单位、转义、颜色 5、函数 6、混入、命名空间(Less)、继承 7、合并、媒体查询 8、条件、循环 9、导入 注释 当在less文件中写,//原创 2020-07-20 02:40:14 · 162 阅读 · 0 评论 -
移动端CSS笔记
Viewport视口 在移动端viewport视口就是浏览器显示页面内容的屏幕区域。 在viewport中有两种视口。 分别表示为,visual viewport(可是视口)和layout viewport(布局视口) visual viewport固定大小跟屏幕大小相同,在上面。 而layout viewport可改变大小,在下面。 Layout viewport默认大小为980像素。 可通过document.documentElement.clientWidth获取。 现代网页需要将layout vi原创 2020-07-18 23:48:08 · 169 阅读 · 0 评论 -
CSS 笔记
是否占据空间的隐藏 display : none 不占空间的隐藏 visibility:hidden 占空间的隐藏 opacity:0; 将透明内容,占空间的隐藏 float属性的注意点 只会影响后面的元素 内容默认提升半层(文字也是半层) 默认宽度(也可以手动设置)根据内容决定 换行排序 主要给块元素添加,但也可以给内联元素添加 relative: 1、如果没有定位偏移量,对元素本身没有任何影响 2、不是元素脱离文档流 3、不影响其他元素布局 4、left、top、right、bottom时原创 2020-07-08 17:48:22 · 106 阅读 · 0 评论