移动·web前端高效开发实战/Chapter4.CSS3必会实战技巧

1、认识CSS3

css技术升级版，css3是最新版本，css3被划分为多个模块

css3实用新特性：

• 选择器：选中特定的HTML元素

 

• 盒模型

  box-sizing属性来改变对元素宽高的计算方式

  • box-sizing:content-box; 标准盒模型，width和height只包括内容的宽和高

  • box-sizing:border-box; width和height包括内边距和边框，不包括外边距

• 个性化字体：

  引入@font-face，允许开发者使用网页在线字体

• 自适应布局：calc函数在渲染时动态计算属性值

• 圆角边框

• 字体阴影

• 响应式布局媒体查询、弹性布局Flexbox

• 过渡与动画效果

2、常见选择器

• 通用选择器：“*” 全部元素

• 标签选择器

• 相邻兄弟选择器：“header+#content”为紧接在标题元素后面的内容容器

• ID选择器：“#content”为内容容器

• 选择器分组：“input,button”为所有Input和Button元素

• 属性选择器：“input[type="text"],input[type="password"]”为包含属性“type”,并且属性type为“text”或“password”的Input元素

• 伪类：用来指定选择器的某种特定状态或者条件，伪类在DOM中并不存在，但对用户却是可见的。

• 伪元素：不存在于文档树中的抽象内容

3、响应式开发

• Flex弹性盒布局：基于盒模型，依赖于display、position、float

• 媒体查询

• rem

• 多列模式（如bootstrap栅格）