首页 前端知识 CSS3私有前缀 新增盒模型相关属性 新增背景属性(如果想知道CSS3私有前缀、新增盒模型相关属性的知识点,那么只看这一篇就足够了!)

CSS3私有前缀 新增盒模型相关属性 新增背景属性(如果想知道CSS3私有前缀、新增盒模型相关属性的知识点,那么只看这一篇就足够了!)

2024-05-14 22:05:13 前端知识 前端哥 287 300 我要收藏

        前言:CSS3 是CSS2 的升级版本,它在CSS2 的基础上,新增了很多强大的新功能,从而解决一些实际面临的问题。


✨✨✨这里是秋刀鱼不做梦的BLOG

✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客

先让我们看一下本篇文章的大致内容:

目录

1.CSS3 概述

2.CSS3私有前缀

        (1)什么是私有前缀

        (2)常见浏览器私有前缀

        (3)为什么要有私有前缀

3.CSS3 新增盒模型相关属性

        (1)box-sizing 怪异盒模型

        (2)resize 调整盒子大小

        (3)box-shadow 盒子阴影

        (4)opacity 不透明度


1.CSS3 概述

        学习完CSS2之后,我们就需要学习CSS3,在前言中我们知道了,CSS3 是CSS2 的升级版本,它在CSS2 的基础上,新增了很多强大的新功能,那么其新增的特性有哪些呢?

CSS3 的新特性如下:

1. 新增了更加实用的选择器,例如:动态伪类选择器、目标伪类选择器、伪元素选择器等等。
2. 新增了更好的视觉效果,例如:圆角、阴影、渐变等。
3. 新增了丰富的背景效果,例如:支持多个背景图片,同时新增了若干个背景相关的属性。
4. 新增了全新的布局方案 —— 弹性盒子。
5. 新增了Web 字体,可以显示用户电脑上没有安装的字体。
6. 增强了颜色,例如: HSL 、HSLA 、RGBA 几种新的颜色模式,新增 opacity 属性来控制透明度。
7. 增加了2D 和3D 变换,例如:旋转、扭曲、缩放、位移等。
8. 增加动画与过渡效果,让效果的变换更具流线性、平滑性。

不过读者无需担心,在之后的学习中,我们将会对其进行一一讲解,这里只需要先进行了解即可!

2.CSS3私有前缀

        在学习CSS3新增的功能之前,我们需要先了解一下什么是CSS3私有前缀,它对我们之后的学习有帮助。

        (1)什么是私有前缀

如下代码中的-webkit- 就是私有前缀:

div {
    width:400px;
    height:400px;
    -webkit-border-radius: 20px;
}

这里我们设置了div元素的宽度和高度,但是第三个功能我们不太清除是干什么的,但是我们会发现在其功能之前出现了一个-webkit-修饰,这就是CSS3中的私有前缀。

        (2)常见浏览器私有前缀

以下举出了常见浏览器私有前缀:(不同浏览器使用的私有前缀不同):

        Chrome 浏览器: -webkit-
        Safari 浏览器: -webkit-
        Firefox 浏览器: -moz-
        Edge 浏览器: -webkit-
        旧 Opera 浏览器: -o-(已过时)
        旧 IE 浏览器: -ms-(已过时)

了解完了有哪些常见浏览器私有前缀和什么是私有前缀之后,细心的读者就会有疑问,私有前缀到底为什么会被设计出来,私有前缀到底有什么用呢?

        (3)为什么要有私有前缀

        我们要知道:W3C 标准所提出的某个CSS 特性,在被浏览器正式支持之前,浏览器厂商会根据浏览器的内核,使用私有前缀来测试该CSS 特性,在浏览器正式支持该CSS 特性后,就不需要私有前缀了。

所以简而言之,私有前缀就是用来表明该功能还在试用期中,至于之后是否会采用,那么不得而知了。

注意:

我们在编码时,不用过于关注浏览器私有前缀,不用绞尽脑汁的去记忆,也不用每个都去查询,因为常用的CSS3 新特性,主流浏览器都是支持的,即便是为了老浏览器而加前缀,我们也可以借助现代的构建工具,去帮我们添加私有前缀。

查询CSS3新增特性的兼容性的网站:https://caniuse.com/

点开网页输入想要查询的特性名称

如果可以使用,则为绿色,不能则为红色,对于黄色的就是部分支持(需要使用私有前缀):

这样我们就大致了解了什么是私有前缀了!

3.CSS3 新增盒模型相关属性

        为了更好的从CSS2到CSS3进行过渡,本篇文章只讲解一个新增模块的特性(盒模型相关属性),先来看一下有哪些CSS3新增盒模型相关属性(如图):

        (1)box-sizing 怪异盒模型

box-sizing属性的作用:用于设置宽高作用的对象。

其常见的属性值为:

属性值含义
content-boxwidth 和 height 设置的是盒子内容区的大小。(默认值)
border-boxwidth 和 height 设置的是盒子总大小。(怪异盒模型)

使用更加通俗易懂的话语来说,就是如果将box-sizing设置为content-box,那么你设置的宽高就是盒子内容区的宽高,如果想要计算盒子的总宽高,就需要自己在加上其padding区和border区。

但是如果将box-sizing设置为border-box,那么设置的宽高则为盒子的总的宽高(content+padding+border)

这样我们就了解了box-sizing 怪异盒模型了。

        (2)resize 调整盒子大小

resize属性的作用:可以控制是否允许用户调节元素尺寸。

其常见的属性值有:

属性值含义
none不允许用户调整元素大小。 (默认)
both用户可以调节元素的宽度和高度。
horizontal用户可以调节元素的宽度 。
vertical用户可以调节元素的高度。

我们这里使用属性值vertical进行举例:

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./test.css">
</head>
<body>
    <div>这是一个可以改变大小的方块</div>
</body>
</html>

CSS代码:

div {
    width: 300px;
    height: 200px;
    background-color: orange;
    overflow: hidden;
    resize: vertical;
}

注意:如果想要使元素可以改变大小,那么必须加上overflow: hidden;属性。

我们会发现其出现了一个可以拉动的图标,这样这个元素就可以调节其高度了。

这样我们就了解了resize 调整盒子大小了。

        (3)box-shadow 盒子阴影

box-shadow属性的作用:为盒子添加阴影。

语法:

box-shadow: h-shadow v-shadow blur spread color inset;

各个值的含义:

属性值含义
h-shadow水平阴影的位置,必须填写,可以为负值
v-shadow垂直阴影的位置,必须填写,可以为负值
blur可选,模糊距离
spread可选,阴影的外延值
color可选,阴影的颜色
inset可选,将外部阴影改为内部阴影

默认值: box-shadow:none 表示没有阴影。

我们可以看一下阴影的效果:

当然我们也可以写2、3、4、5、6个值:

例如:

/* 写两个值,含义:水平位置、垂直位置 */
box-shadow: 10px 10px;

/* 写三个值,含义:水平位置、垂直位置、颜色 */
box-shadow: 10px 10px red;

/* 写三个值,含义:水平位置、垂直位置、模糊值 */
box-shadow: 10px 10px 10px;

/* 写四个值,含义:水平位置、垂直位置、模糊值、颜色 */
box-shadow: 10px 10px 10px red;

/* 写五个值,含义:水平位置、垂直位置、模糊值、外延值、颜色 */
box-shadow: 10px 10px 10px 10px blue;

/* 写六个值,含义:水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */
box-shadow: 10px 10px 20px 3px blue inset;

这里效果就不一一演示了,读者可以将代码复制到编译器中自行运行查看。

这样我们就了解了box-shadow 盒子阴影了。

        (4)opacity 不透明度

opacity属性的作用:为整个元素添加透明效果, 值是 0 到 1 之间的小数, 0 是完全透明, 1 表示完全不透明。

我们直接使用一个案例来看一下:

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./test.css">
</head>
<body>
    <div>盒子整体的不透明度</div>
</body>
</html>

CSS代码:

div {
    width: 300px;
    height: 200px;
    background-color: orange;
    font-size: 20px;
    opacity: 0.5;
    box-shadow: 10px 10px 10px black;
}

我们会发现元素整体的不透明度发生了改变。

注意:opacity 与 rgba 的区别?

opacity 是一个属性,设置的是整个元素(包括元素里的内容)的不透明度。
rgba 是颜色的设置方式,用于设置颜色,它的透明度,仅仅是调整颜色的透明度。

这样我们就了解了opacity 不透明度了。

想要了解更多的CSS知识------------------->CSS_秋刀鱼不做梦的博客-CSDN博客


以上就是本篇文章的全部内容了~~~

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8614.html
评论
发布的文章

1、SpringBoot简介及返回json

2024-05-25 09:05:17

mysql 的jsonTable使用

2024-05-25 09:05:41

MySQL中的JSON

2024-05-25 09:05:32

JSON简介(1)

2024-05-25 09:05:22

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!