css3设计模式,常用布局

html-css07

css3设计模式,常用布局,第1张

1.css3常用的布局有多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。

2.float浮动布局,absolute绝对定位,flex弹性盒子,table表格布局,grid网格布局 / 栅格化布局

3.移动端布局:流式布局(百分比布局)JD,flex弹性布局(强烈推荐)携程,less+rem+媒体查询布局 苏宁,

css设计模式

OOCSS——Object Oriented CSS

SMACSS——Scalable and Modular Architecture for CSS

垂直水平均分:

子元素纵向等距排列:

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

IE盒子模型width=width(margin+padding) 解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。

不知道是为了什么效果呢?keyframe本来就已经是关键帧了,如果想设置在某个位置显示某个角度,可以设置10%、20%等帧位,楼主想用js控制它的旋转角度不是和CSS3的动画相冲突吗?

目前场景是接到的项目中没有统一样式处理,例如不同模块,有的使用了 sass ,有的使用了less。

我们知道sass是成熟、稳定、强大的 CSS 预处理器,而 SCSS 是 Sass3 版本当中引入的新语法特性,完全兼容 CSS3 的同时继承了Sass强大的动态功能。

而Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

两者各有千秋,没有特殊洁癖个人觉得均可,但是因为项目中使用了 ant-desgin-vue, 而它本身是使用less的,于是决定项目中还是统一使用 less 吧。

1、首先移除 node-sass 和 sass-laoder

2、将所有的 lang="scss" 替换成 lang="less"

3 、变量控制定义: 将 $ 更改为 @

4、.scss 后缀文件改为 .less

例如 下面引入的 chart.scss 文件,应该改为 chart.less