1、calc()函数
-
用于动态计算长度值,值灵活
-
css3新增功能
-
任何长度值都可以使用calc()函数进行计算;
-
calc()函数支持 "+", "-", "*", "/" 运算;
-
calc()函数使用标准的数学运算优先级规则;
-
运算符前后都需要保留一个空格
-
语法: calc(表达式)
运算符前后都需要保留一个空格 width: calc(100% - 200px); 减号的前后添加空格 .box { width: calc(100% - (10px + 20px) * 2); height: 300px; background-color: pink; }
-
浏览器支持 在IE9+、Firefox、chrome、safari可以正常呈现
-
利用calc()实现三栏自适应布局
2、css3过渡动画——transition属性
-
语法
transition: transition-proterty transition-duration transition-timing-function transition-delay; transition: css样式 动画的执行时间 速度类型 动画的延迟时间; 多个css属性用逗号隔开 transition: transform 2s, background-color 2s; 注意:谁发生了属性的改变 就加在谁身上
-
属性
1、transition-proterty
-
css样式:参与过渡的css属性名称|all表示所有属性
2、transition-duration
-
动画执行时间:默认0s,s|ms(毫秒) 1s=1000ms
3、transition-timing-function
-
速度类型
1.linear 相同的速度从开始到结束,也就是匀速 2.ease 默认值 慢速度开始--速度变快--慢速度结束 3.ease-in 慢速度开始的过渡效果,也就是以低速度开始 4.ease-out 慢速度结束的过渡效果,也就是以低速结束 5.ease-in-out 以慢速度开始和结束的过渡效果
4、transition-delay
-
延迟时间:默认0s,单位s|ms
-
3、viewport
1、什么是视口?
-
视口简单来说就是浏览器显示页面内容的区域。
-
视口:浏览器显示内容的屏幕区域,相当于PC端浏览器可视区 (白板区域)
-
在PC端,正常的视口宽度就是整个浏览器的窗口可视区的宽度,会随着浏览器窗口大小的重置而缩放;
2、视觉视口
视觉视口是指用户当前看到区域,即设备宽度
视觉视口是用户正在看到的网页的区域,即屏幕宽度。
3、布局视口
移动端设备默认的viewport,css布局写的大小, 一般是980px(不写viewpoint代码演示)
移动设备的浏览器都默认设置 了一个viewport元标签,定义了一个虚拟的布局视口,布局视口使视口与移动端浏览器屏幕宽度完全独立开。CSS 布局将会根据它来进行计算,并被它约束。
大部分移动设备默认的 viewport 为 980px,不同设备上的浏览器的默认的宽度并不一样。
所以PC上的网页基本能在手机上呈现,只不过看上去很小,一般默认允许用户通过手动缩放、平移来查看网页。
布局视口的宽度/高度可以通过 document.documentElement.clientWidth / Height来获取
如果要显式设置布局视口,可以使用 HTML 中的 meta 标签
3、布局视口
布局视口对用户不友好,基于理想视口设计的网站,不需要用户手动缩放,也不需要出现横向滚动条,网站的所有内容都可以正常的呈现给用户。
为了网站的移动端能有更好的浏览器和阅读而设置 (苹果公司引入的理想视口的概念)
理想视口可以使用 HTML 中的 meta 标签显式设置布局视口等于设备宽度