-
css_css3新特性
css3新增盒子模型
所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 内容。
注：padding和margin的百分比都是相对于父元素来说的！1.默认盒子模型
默认盒子模型：盒子的content = width/height+padding+border ；
盒子的填充和边框都会撑大盒子。2.css3新增了一种盒子模型
css3新增了一种盒子模型： 盒子的content = width/height(width、height里面包含padding+border) ;
盒子的填充和边框不会撑大盒子(前提是盒子的padding+border设置
通过 box-sizing 来指定盒模型
- box-sizing:content-box; 是默认盒子模型
- box-sizing:border-box; 是新型盒子模型
举例说明
<body> <div class="box">div> <div class="box2">div> body>- 上面两个设置除了盒子模型不同，其余样式相同的盒子
- 可以看到 设置旧的盒子模型 content = width/height + padding + border;若是我们想设置200px的盒子，当设置padding或border时要在width将padding与border减去(手动计算)
- 而新盒子模型的 content = width 无论设置padding、border 都会在200里面(浏览器自动计算)
弹性盒子布局
弹性盒子布局是css3新的盒子布局方式，具体请看->传送门
css3新增选择器
background-size
设置背景图片的大小是css3新增的属性，不能添加作为复合属性，具体请看传送门
transform转换
动画
过渡动画
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动画
圆角边框
border-radius:50%;（宽高相同即为圆）
- 单位：
- px
- 百分比(相对于自身大小)
盒子阴影
box-shadow: 水平位移 垂直位移 [模糊半径 阴影尺寸 阴影颜色 inset(内部阴影)]渐变色
background: linear-gradient(方向, start-color, ..., last-color);换行
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 会换行；
- 遇到容器边界会换行；
- normal(默认)
text-overflow
text-overflow 属性指定当文本溢出包含它的元素时，应该如何显示。可以设置溢出后，文本被剪切、显示省略号 (…) 或显示自定义字符串（不是所有浏览器都支持）。
overflow-hidden
- visible—默认内容不会被修剪，会呈现在元素框之外
- hidden—内容会被修剪，并且其余内容是不可见的
- scroll—内容会被修剪，但是会在盒子外面显示滚动条以便查看(注：若是overflow的属性值为scroll,无论内容有没有溢出
都会显示滚动条) - auto—如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。(
只有内容超出才会显示滚动条)
处理文字溢出
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;单位
媒体查询
-
相关阅读:
操作系统——快速复习笔记01
710. 黑名单中的随机数
Alien Skin ExposureX7中文版RAW照片编辑器和组织器
9-4 查找星期 (15分)
Java数据结构——第十二节 - Map和Set
RabbitMq消息模型-队列消息
redis下载与安装（Linux环境下）
Redis 9 数据库
实验6 8255并行接口实验【微机原理】【实验】
寻找领域不变量：从生成模型到因果表征
- 原文地址：https://blog.csdn.net/qq_43260366/article/details/127085846