你真的了解的CSS3盒模型和CSS3特性知识吗

菜园前端
• 阅读 405

原文链接:https://note.noxussj.top/?source=helloworld


什么是 CSS3?

CSS3 是 CSS 一个新的标准,直接理解为是 CSS 的升级版,里面新增了很多样式(特性)。

CSS3 盒子模型

::: warning

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 标准进行解析,将 borderpadding 不计算在 widthheight 其中。

你真的了解的CSS3盒模型和CSS3特性知识吗

width = content height = content

怪异盒模型(IE 盒模型) border-box

当我们设置 box-sizing: content-box; 时,浏览器会按照旧版的 IE 标准进行解析,将 borderpadding 计算在 widthheight 其中。

你真的了解的CSS3盒模型和CSS3特性知识吗

width = content + padding + border height = content + padding + border

示例代码:

html

<body>
    <div class="content-box">content</div>
    <div class="border-box">border</div>
</body>

css

<style>
    .content-box {
        padding: 20px;
        width: 100px;
        height: 100px;
        background-color: #5cd8a2;
        box-sizing: content-box;
    }

    .border-box {
        padding: 20px;
        width: 100px;
        height: 100px;
        background-color: #ff8077;
        box-sizing: border-box;
    }
</style>

在演练场中尝试一下

CSS3 新特性

目前只大致列举 CSS3 新特性,后续的文章会详细介绍

  • 盒子模型
  • 盒子圆角
  • 盒阴影
  • 边框图片
  • 背景
  • 渐变
  • 文本效果
  • 字体
  • 2D 转换
  • 3D 转换
  • 动画 & 过度
  • 弹性盒子
  • 选择器

最全面的前端笔记来啦,包含了入门到入行的笔记,还支持实时效果预览。小伙伴们不需要再花时间去写笔记,或者是去网上找笔记了。面试高频提问和你想要的笔记都帮你写好了。支持移动端和 PC 端阅读,深色和浅色模式。 原文链接:https://note.noxussj.top/?source=helloworld

点赞
收藏
评论区
推荐文章
九路 九路
3年前
一篇文章带你了解CSS 渐变知识
CSS3渐变使您能够是你的背景颜色在两个或多个颜色之间平滑过渡。早些时候,你必须使用图像实现这些效果。然而,通过使用CSS3渐变可以减少下载时间和带宽的使用.此外,缩放的元素在缩放时看起来更好,因为渐变是由浏览器生成的。一、浏览器支持表中的数字指定完全支持该属性的第一个浏览器版本。(来源于百度)数字后面的w
徐小夕 徐小夕
3年前
轻松教你使用纯css实现水波动画
css3给我们前端开发带来了很便利,我们可以使用css3的新特新实现各种形状和动效,接下来笔者就来带大家介绍如何用css3实现H5Dooring编辑器(https://github.com/MrXujiang/h5Dooring)中的水波动画.(https://imghelloworld.osscnbeijing.aliy
徐小夕 徐小夕
3年前
轻松教你使用纯css实现H5-Doorin编辑器中的水波动画
css3给我们前端开发带来了很便利,我们可以使用css3的新特性实现各种形状和动效,接下来笔者就来带大家介绍如何用css3实现H5Dooring编辑器(https://github.com/MrXujiang/h5Dooring)中的水波动画.(https://imghelloworld.osscnbeijing.aliy
徐小夕 徐小夕
3年前
如何使用css3实现一个类在线直播的队列动画
之前在群里有个朋友问了这样一个问题,就是如何在小程序中实现类似直播平台的用户上线时的队列动画?作为一名前端工程师,解决方案无非以下2种:1.使用javascript根据条件来控制元素的样式实现队列动画2.用纯css3配合数据驱动模型来实现.大家都知道在现代的Web开发中,我们能使用Css实现的效果尽量不要用Js,所以我们应该优先考虑用C
徐小夕 徐小夕
3年前
css3实战汇总(附源码)
本文是继上一篇文章用css3实现惊艳面试官的背景即背景动画(高级附源码)(https://juejin.im/post/6844903950123188237)的续篇也是本人最后一篇介绍css3技巧的文章,因为css这块知识难点不是很多,更多的在于去熟悉css3的新特性和基础理论知识。所以写这篇文章的目的一方面是对自己工作中一些css高级技巧的总结,另一
Python进阶者 Python进阶者
3年前
手把手教你使用CSS3为文本和元素实现添加阴影效果
使用CSS3,你可以为文本和元素添加阴影。一、浏览器支持表中的数字指定完全支持该属性的第一个浏览器版本。数字后面的webkit或者moz使用时需要指定前缀。|属性|Chrome|Firefox|Safari|Opera|IE|||||||||text
Stella981 Stella981
3年前
CSS预编译器:Sass(入门),更快的前端开发
Sass扩展了CSS3,增加了规则、变量、混入、选择器、继承等等特性。Sass生成良好格式化的CSS代码,易于组织和维护。SASS是对CSS3(层叠样式表)的语法的一种扩充,它可以使用巢状、混入、选择子继承等功能,可以更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览可以使用,也就是说它本身的语法并不太容易让浏览
Stella981 Stella981
3年前
HTML前端开发之路——弹性盒模型
弹性盒模型(FlexibleBox)是一个CSS3新增布局模块,用于实现容器里项目的对齐、方向、排序;弹性盒模型最大的特效在于,能够动态的修改子元素的宽度和高度,以满足在不同尺寸屏幕下的恰当布局;下面是弹性盒模型的元素基本概念:!(http://static.oschina.net/uploads/space/2016/0212/210
Wesley13 Wesley13
3年前
CSS3 文本效果
CSS3文本效果CSS3中包含几个新的文本特征。在本章中您将了解以下文本属性:textshadowwordwrap浏览器支持!(http://static.oschina.net/uploads/space/2016/0123/124344_Ps
Stella981 Stella981
3年前
Css3系列——css3新特性学习笔记
1\.css3介绍学习网址:http://css.doyoe.com/(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fcss.doyoe.com%2F)1.1.原则渐进增强原则例如圆角和boxsha