概述
- 整个css世界围绕“流”来展开,映射现实世界的流
- 现实世界,水流(div)放到一个容器里面,一定是平铺展开,如果放一个木头(span),它会漂在水流上面,再放一个,还是会跟前一个一样
- 水流的特性就是“自适应特性”,div是典型的有“流”特性的元素,所以,“div+css布局”实际上就是“流体布局”
- table也可以做到自适应布局,但是,表格并不属于“流体布局”,它属于另一个世界,比css出现的还要老
- 对css2.1全面支持从IE8开始,如今的css3有很多优秀的特点
- 布局更丰富
- 移动端的崛起,催生css3媒介查询和更多响应式布局特性;如:
- 图片的srcset属性
- css的object-fit属性
效果:
- 图片的srcset属性
- 弹性盒布局flexble
- 格栅布局grid
- 移动端的崛起,催生css3媒介查询和更多响应式布局特性;如:
- 视觉表现
- 圆角(border-radius)、阴影(box-shadow)、渐变
- transform、transition和animation元素变换和动画
- filter滤镜和混合模式
- 布局更丰富
css术语概念
- 基本概念
- 规则集、声明块、声明、属性、值
// 整段被称为“规则或规则集”,由选择器和声明块组成 // 声明块是{} 包裹的系列声明 .vocabulary { // 声明就是 属性名:属性值 组成 height: 99px;color: transparent;}
- 关键字和泛关键字
- transparent、solid等是关键字
- inherit是泛关键字,所有css属性都可以使用
- 功能符
- 被括号括起来的那种,比如rgba和rgb、url、元素属性值、calc、过渡效果(scale())等
- 规则集、声明块、声明、属性、值
- 未定义行为
- 我们同样的代码,在chrome可以正常,在firefox或者ie里面,样式就会走形,俗称样式bug,这种表现差异并不是浏览器的bug,用计算机领域专业术语应该是“未定义行为”
- 比如:active伪类,我们有一个a标签模拟的按钮,样式是
a:active {background-color: red;}
,假设我们给它绑定mousedown事件,回调函数里面阻止按钮的默认行为- 在除了firefox之外的所有浏览器都可以正常表现
- 因为规范并没有对这种场景的描述,所以firefox可以自己发挥,像这种情况,就称为“未定义行为”
流、元素与基本尺寸
- 块级元素
- 普遍认为display:block的元素都是块级元素,这是错误的。
- li的默认display值是list-item
- table的默认display值是table,它们都是块级元素,因为都符合块级的特征,独占一行
- 块级具有换行特性,理论上可以配合clear清除浮动
.clear:after { content: ''; display: table; // 也可以是block,或者是list-item clear: both; } // IE 浏览器不支持display 值为list-item
- 普遍认为display:block的元素都是块级元素,这是错误的。
- 为什么list-item元素会出现项目符号
- 所有的块级元素都有一个“主块级盒子”,list-item还有一个“附加盒子”,学名“标记盒子”
- “标记盒子”专门用来放远点、数字等这些项目符号
- display:inline-block导致的容器盒子
- 每个块级元素都有两个盒子,外在的块级盒子负责元素是否换行显示,内在盒子又叫块级容器盒子,负责宽高、内容呈现。
- 值为inline的内联元素内外都是“内联盒子”