020-CSS3用户体验-CSDN博客

本文链接：https://blog.csdn.net/rulaixiong/article/details/109524910

本文详细介绍了CSS3的新特性，包括CSS3函数calc()的使用，多列布局的column-count、column-gap、column-rule属性，用户界面的resize、box-sizing、outline-offset属性，媒体查询的概念和常见属性，以及弹性盒子Flex布局的关键属性flex-direction、justify-content、align-items和flex-grow。此外，还提到了响应式布局的重要性和应用。

摘要由CSDN通过智能技术生成

一、CSS3 函数

（一）、calc()

**calc()**从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度

calc()语法

calc()语法非常简单，就像我们小时候学加（+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：

.elm {
   
  width: calc(expression);
}

其中**“expression”**是一个表达式，用来计算长度的表达式。需要注意的是，运算符前后都需要保留一个空格

calc()的运算规则

**calc()**使用通用的数学运算规则，但是也提供更智能的功能

使用“+”、“-”、“*” 和 “/”四则运算
可以使用百分比、px、em、rem等单位
可以混合使用各种单位进行计算
表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格

calc()的兼容性

浏览器对calc()的兼容性还算不错，在IE9.0+、FF4.0+、Chrome19+、Safari6+、Opera+、Android Chrome19.0+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符

案例

基本使用

<!-- html -->
div class="test">我的宽度为100% - 50px</div>

.test {
      width: calc(100% - 50px); }

左边固定右边自适应布局

<!-- html -->
<div class='box'>
  <div class='left'></div>
  <div class='right'></div>
</div>

.box .left {
      float:left; width: 300px; }
.box .right {
      float:right; width: calc(100% - 300px); }

二、CSS3 多列

通过 CSS3，您能够创建多个列来对文本进行布局

css3 提供的多列属性：column-count、column-gap、column-rule

（一）、column-count

column-count：属性规定元素应该被分隔的列数

语法：column-count: number|auto
参数
- {number}：元素内容将被划分的最佳列数
- auto：由其他属性决定列数，比如 “column-width”
实例