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

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

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-box width 和 height 设置的是盒子内容区的大小。(默认值)
border-box width 和 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 不透明度了

相关文章
|
13天前
|
前端开发
css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
14 1
|
7天前
|
前端开发 JavaScript C++
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
12 0
|
13天前
|
前端开发
设计--字体样式---斜体,CSS字体属性用法
设计--字体样式---斜体,CSS字体属性用法
|
13天前
|
前端开发
前端 CSS 经典:mix-blend-mode 属性
前端 CSS 经典:mix-blend-mode 属性
9 0
|
13天前
|
前端开发
前端 CSS 经典:backface-visibility 属性
前端 CSS 经典:backface-visibility 属性
11 0
|
7天前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
48 0
|
12天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
19天前
|
安全 JavaScript
旋转木马轮播图 html+css+js
旋转木马轮播图 html+css+js
|
19天前
|
移动开发 前端开发 JavaScript
HTML5+CSS3+JavaScript网页实战
HTML5+CSS3+JavaScript网页实战
|
24天前
|
前端开发
HTML+CSS练习小项目——百叶窗
HTML+CSS练习小项目——百叶窗