共计 999 个字符，预计需要花费 3 分钟才能阅读完成。
CSS3 介绍
原文链接：https://note.noxussj.top/?sou…
什么是 CSS3？
CSS3 是 CSS 一个新的规范，间接了解为是 CSS 的升级版，外面新增了很多款式（个性）。
CSS3 盒子模型
留神：CSS3 盒子模型必须要把握，否则你在理论开发中遇到款式错乱很难排查问题。
旧版的 IE 浏览器与其它浏览器解析盒子模型会呈现差别，例如 IE 会把 border 边框 和 padding 内边距计算在盒子的 width / height 宽度外面，而其它浏览器则是相同，不蕴含 border 边框和 padding 内边距的。然而在理论开发中，前者是绝对更加灵便的，然而 W3C 标准中规定了它们不能被蕴含在其中，为了解决这个问题，在新的 css3 规范中新增了 box-sizing 属性，用于切换两种盒子模型。
能够把所有 HTML 标签都了解成一个盒子，例如 div 标签。
盒子模型次要由 4 个局部组成：content padding border margin
规范盒模型（W3C 盒模型）content-box
当咱们设置 box-sizing: content-box; 时，浏览器会依照 W3C 规范进行解析，将 border 和 padding 不计算在 width 或 height 其中。
width = content
height = content
怪异盒模型（IE 盒模型）border-box
当咱们设置 box-sizing: content-box; 时，浏览器会依照旧版的 IE 规范进行解析，将 border 和 padding 计算在 width 或 height 其中。
width = content + padding + border
height = content + padding + border
<body>
<div class="content-box">content</div>
<div class="border-box">border</div>
</body>
CSS3 新个性
留神：目前只大抵列举 CSS3 新个性，后续的文章会具体介绍
- 盒子模型
- 盒子圆角
- 盒暗影
- 边框图片
- 背景
- 突变
- 文本成果
- 字体
- 2D 转换
- 3D 转换
- 动画 & 适度
- 弹性盒子
- 选择器
最全面的前端笔记来啦，蕴含了入门到入行的笔记，还反对实时成果预览。小伙伴们不须要在花工夫去写笔记，或者是去网上找笔记了。面试高频发问和你想要的笔记都帮你写好了。反对挪动端和 PC 端浏览，深色和浅色模式。
原文链接：https://note.noxussj.top/?sou…