css的程序性
- BEM
Block: weui-cell 我的项目名字
例如:小鹏: xp-
装置了stylus,css预编译器 应用命令:npm i -g stylus
装置插件 language-stylus
-stylus
css有太多规定
stylus是css的超集,能够编译成css
-省去了{:;},高速编辑
应用 stylus cell.styl命令能够生成相应的css文件
应用 stylus -w cell.styl -o cell.css 命令意思:将cell.styl和cell.css绑定,只有编辑cell.styl保留就能同步变动cell.css文件。
写的是styl文件,HTML是无奈显示应用的,
所以 -o 编译一下 cell.css
-w 边编译边执行
- 弹性布局 flex
1.如何启用弹性布局呢?
display:flex|inline|block|inline-block 布局相干的都是display
弹性布局设置在父元素上,启动了新的空间
原有的盒子属性被突破了,
.weui-cell(display:flex)>新的空间,原有块级能力被代替.weui-cell_bd(flex:1主元素)+.weui-cell_hd(辅元素) - 伪元素
css高级应用技巧,惟一一个能够在css中申明的html元素,箭头,边框等高级个性。
content属性是必须的。
定位pos:r(position:relative)
pos:a(position:absolute)
手动挪动页面元素到指定地位;