CSS3 介绍
原文链接:https://note.noxussj.top/?source=cloudtencent
什么是 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 转换
- 动画 & 过度
- 弹性盒子
- 选择器
相关文章
- Css3 阴影详解
- CSS3实现毛玻璃效果
- CSS3 选择器
- CSS3选择器介绍及用法总结[通俗易懂]
- HTML5+CSS3常见布局方式
- CSS3中:nth-child和:nth-of-type的区别深入理解详解编程语言
- css3 pointer-events:auto;详解编程语言
- CSS3 滤镜Filter亮度动画详解编程语言
- css3 float排序问题详解编程语言
- CSS3 圆角样式
- CSS3 用户界面
- Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
- css3元素简单的闪烁效果实现(html5jquery)
- CSS3,HTML5和jQuery搜索框集锦
- 分享33个jQuery与CSS3实现的绚丽鼠标悬停效果