【响应式Web设计】读书笔记
来源:互联网 发布:开淘宝店铺步骤图片 编辑:程序博客网 时间:2024/05/14 19:19
【简介】Flexbox 的主要优点可以概括为:方便地垂直居中内容;改变元素的视觉次序,在盒子里自动插入空白以及对齐元素,自动对齐元素间的空白。
1. Flexbox 概述
1.1 浏览器对 Flexbox 的支持
浏览器对于这些新特性的支持需要加前缀,因为近几年来浏览器不断以实验性特性推出新功能,而这些实验性特性都要加「厂商前缀」。每家厂商都有自己的前缀,比如 -ms 是 Microsoft, -webkit- 是 WebKit, -moz- 是 Mozilla。
.flex{ display: flex; flex: 1; justify-content: space-between;}.flex{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
为了做兼容,就不得不写这些额外的代码,显得十分繁琐,而且很难记忆,因此,需要找一个自动加前缀的方法。一款比较方便的插件 Autoprefixer (https://github.com/postcss/autoprefixer),就能很好地解决前缀的问题,下面主要以 Sublime Text 为例,讲解一下 Autoprefixer 的安装过程中的几个重要的步骤:
确保安装Nodejs,且环境变量配置在全局环境中。
nodejs 的安装过程在这里不做讲解,主要检查一下nodejs是否安装:通过 cmd 命令行中输入node -v
,若能输出版本号,说明已经安装且配置在全局环境中。sublime 中输入
ctrl+shift+k
,调出安装工具,输入install
,选择「Install Package」:在跳出来的输入框中输入
Autoprefixer
,选择安装;- 在(Preferences → Key Bindings - User)中配置快捷键:
完成安装后,我们只需要输入:
.flex{ display: flex; flex: 1; justify-content: space-between;}
再按 autoprefixer 的快捷键即可完成自动添加:
.flex{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
欢迎大家关注我的新浪微博 - 一点编程,了解最新动态 。
阅读全文
0 0
- 【响应式Web设计】读书笔记
- 【响应式Web设计】读书笔记
- 【响应式Web设计】读书笔记
- 【响应式Web设计】读书笔记
- 【响应式Web设计】读书笔记
- 【响应式Web设计】读书笔记
- 【响应式Web设计】读书笔记
- 【响应式Web设计】读书笔记
- 【响应式Web设计】读书笔记
- 【响应式Web设计】读书笔记
- 【响应式Web设计】读书笔记
- 【响应式Web设计】读书笔记
- 响应式Web设计读书笔记与实践
- 响应式web设计——读书笔记
- 《响应式web设计》读书笔记(一)入门
- 《响应式web设计》读书笔记(一)入门
- 响应式Web设计:HTML5和CSS3实战(读书笔记)
- 响应式Web设计
- bzoj4589 FWT
- 【计算机视觉】EmguCV学习笔记(4)分离颜色通道以及多通道图像混合
- R语言学习心得(1)—RGUI与Rstudio
- 随机获取机器人列表
- 硬件访问服务2之让Android应用程序访问C库
- 【响应式Web设计】读书笔记
- angularJs中ng-if,ng-show,ng-disabled,ng-init使用案例
- expat源码安装
- 可搜索加密1
- Magento 2中文手册教程
- Linux安装搜狗输入法
- maven命令
- angular 中使用md5
- Retrofit http客户端