乐趣区

关于前端:什么是CSS3css3的新特性有哪些

jiezi

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…

退出移动版