css3新增_css3新特性

原创已于 2025-09-12 18:41:45 修改 · 768 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

于 2022-09-28 17:58:08 首次发布

css 专栏收录该内容

23 篇文章

订阅专栏

[1]css3新增盒子模型

所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和内容。
注：padding和margin的百分比都是相对于父元素来说的！

1.默认盒子模型

默认盒子模型：盒子的content = width/height+padding+border ；
盒子的填充和边框都会撑大盒子。

2.css3新增了一种盒子模型

css3新增了一种盒子模型：盒子的content = width/height(width、height里面包含padding+border) ;
盒子的填充和边框不会撑大盒子(前提是盒子的padding+border<width)

设置

通过 box-sizing 来指定盒模型

box-sizing:content-box; 是默认盒子模型
box-sizing:border-box; 是新型盒子模型

举例说明

<body>
    <div class="box"></div>
    <div class="box2"></div>
</body>

  <style>
    .box,
    .box2 {
      width: 200px;
      height: 200px;
      padding: 20px;
      border: 2px solid red;
      margin: 5px;
    }
    .box2 {
      box-sizing: border-box;
    }
  </style>

上面两个设置除了盒子模型不同，其余样式相同的盒子
可以看到设置旧的盒子模型 content = width/height + padding + border;若是我们想设置200px的盒子，当设置padding或border时要在width将padding与border减去(手动计算)
而新盒子模型的 content = width 无论设置padding、border 都会在200里面(浏览器自动计算)

[2]弹性盒子布局

弹性盒子布局是css3新的盒子布局方式，具体请看->传送门

[3]Gird布局

Gird布局

[4]css3新增选择器

在了解css3新增的选择器之前先看一下css有哪些选择器。

css3新增的选择器 => 传送门

选择器的优先级 => 传送门

[5]单位

媒体查询

传送门

rem单位->传送门

案例展示 => 传送门
vh/vw ->传送门

[6] background（⭐️）

background-size

设置背景图片的大小是css3新增的属性，不能添加作为复合属性，具体请看传送门

总结： background-size被设计为必须单独声明的属性，但是background复合属性可以覆盖该属性该属性覆盖不了复合属性！

渐变色

英/ˈɡreɪdiənt / ~~ge rui di t不发音~~

background-image: linear-gradient(方向, start-color, ..., last-color);

[7]换行

white-space

定义：white-space这个css的样式，用来设置元素对内容中的空格的处理方式
属性值
- normal(默认)
  
  合并空格：多个相邻空格合并成一个空格；
  不识别源码换行遇到容器壁换行：在源码中的换行作为空格处理，只会根据容器的大小进行自动换行；
- nowrap
  
  合并空格，多个相邻空格合并成一个空格；
  不允许换行：在源码中的换行作为空格处理，容器边界不会换行；
  - 经常和overflow,text-overflow一起使用(作为多余文本显示省略号)
```
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
```
- pre
  
  不合并空格，有几个展示几个空格；
  只识别源码换行容器壁不换行 遇到 \n 会换行，遇到容器边界不会换行；
- pre-wrap
  
  不合并空格，有几个展示几个空格；
  换行 遇到 \n 会换行; 遇到容器边界会换行；
- pre-line
  
  合并空格，多个相邻空格合并成一个空格；
  换行 遇到 \n 会换行，遇到容器边界会换行；

overflow

visible—默认内容不会被修剪，会呈现在元素框之外
hidden—内容会被修剪，并且其余内容是不可见的
scroll—内容会被修剪，但是会在盒子外面显示滚动条以便查看(注：若是overflow的属性值为scroll,无论内容有没有溢出都会显示滚动条)
auto—如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。(只有内容超出才会显示滚动条)

text-overflow

text-overflow 属性指定当文本溢出包含它的元素时，应该如何显示。可以设置溢出后，文本被剪切、显示省略号 (…) 或显示自定义字符串（不是所有浏览器都支持）。
在这里插入图片描述

处理文字溢出

width:固定宽度；
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-ms-text-overflow:ellipsis; // 处理浏览器兼容问题

处理多行文本溢出

width:固定宽度；
display:-webkit-box;
-webkit-line-clamp:行数;
-webkit-box-orient:vertical;
overflow:hidden;

[8]transform转换

在这里插入图片描述

[9]动画

过渡动画

transition 是 css3 新增的⼀个功能，可以实现元素不同状态间的平滑过渡（当元素从⼀个状态进⼊到另⼀个状态时），经常⽤来制作⼀些动画效果。

语法

transition:过渡的属性 完成时间(s) 运动曲线 延迟时间

过渡的属性：想要变化的 css 属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以；
完成时间：单位是s，必须带单位。
- 如果想要0.5s内过渡完成就是 0.5s
运动曲线:过渡的曲线
- ease:(默认)慢速开始加速然后慢速结束的过程。
- linear:以相同的速度开始至结束。
- ease-in:以慢速开始的过渡效果
- ease-out:以慢速结束的过渡效果
- ease-in-out:以慢速开始、慢速结束
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值
延迟时间：多⻓时间后再执⾏这个过渡动画，单位为s

特点

transition过渡动画不能自动开始，动画次数固定一次(不能循环)

animation动画

在这里插入图片描述

[10]圆角边框

border-radius:50%;（宽高相同即为圆）

单位：
- px
- 百分比(相对于自身大小)

[11]阴影

盒子阴影

box-shadow: 水平位移 垂直位移 [模糊半径 阴影尺寸 阴影颜色 inset(内部阴影)]

文本阴影

text-shadow: h-shadow v-shadow blur color;

在这里插入图片描述

css3新增_css3新特性

目录

[1]css3新增盒子模型

1.默认盒子模型

2.css3新增了一种盒子模型

设置

举例说明

[2]弹性盒子布局

[3]Gird布局

[4]css3新增选择器

[5]单位

媒体查询

[6] background（⭐️）

background-size

渐变色

[7]换行

white-space

overflow

text-overflow

处理文字溢出

处理多行文本溢出

[8]transform转换

[9]动画

过渡动画

语法

特点

animation动画

[10]圆角边框

[11]阴影

盒子阴影

文本阴影