【CSS3系列】第二章 · CSS3 新增盒模型和背景属性

最新推荐文章于 2023-06-28 13:05:45 发布
最新推荐文章于 2023-06-28 13:05:45 发布
阅读量484 收藏
点赞数 1
分类专栏： CSS3基础精讲 文章标签： css3 前端 css html vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34025246/article/details/131006253
版权

写在前面

        Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！谢谢大家！！！

        如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多点赞加关注呀！❤❤❤ 爱你们！！！

目录

写在前面

1. 新增盒模型相关属性

1.1 box-sizing 怪异盒模型

1.2 resize 调整盒子大小

1.3 box-shadow 盒子阴影

1.4 opacity 不透明度

 2. CSS3 新增背景属性

2.1 background-origin

2.2 background-clip

2.3 background-size

2.4 backgorund 复合属性

2.5 多背景图

结语

【往期回顾】

【CSS3系列】第一章 · CSS3新增的三种基本属性

【其他系列】

【HTML5系列】

【HTML4系列】

【CSS2系列】

【Java基础系列】

1. 新增盒模型相关属性

1.1 box-sizing 怪异盒模型

  • 使用 box-sizing 属性可以设置盒模型的两种类型 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_box-sizing</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: deepskyblue;
            padding: 5px;
            border: 5px solid black;
            margin-bottom: 20px;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: gray;
            padding: 5px;
            border: 5px solid black;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

1.2 resize 调整盒子大小

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_resize</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            background-color: orange;
            resize: both;
            overflow: hidden;
        }
        .box2 {
            width: 800px;
            height: 600px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">123</div>
    </div>
</body>
</html>

1.3 box-shadow 盒子阴影

  • 使用 box-shadow 属性为盒子添加阴影。

语法： 

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

各个值的含义：

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

示例： 

/* 写两个值，含义：水平位置、垂直位置 */
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;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03_box-shadow</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            background-color: orange;
            margin: 0 auto;
            margin-top: 100px;
            font-size: 40px;

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

            /* 写三个值，含义：水平位置 垂直位置 阴影的颜色 */
            /* box-shadow: 10px 10px blue; */

            /* 写三个值，含义：水平位置 垂直位置 模糊程度 */
            /* box-shadow: 10px 10px 20px; */

            /* 写四个值，含义：水平位置 垂直位置 模糊程度 阴影颜色 */
            /* box-shadow: 10px 10px 20px blue; */

            /* 写五个值，含义：水平位置 垂直位置 模糊程度 外延值 阴影颜色 */
            /* box-shadow: -10px -10px 20px 10px blue; */

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

            position: relative;
            top: 0;
            left: 0;
            transition: 0.4s linear all ;
        }
        .box1:hover {
            box-shadow: 0px 0px 20px 10px black;
            top: -1px;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="box1">你好啊</div>
</body>
</html>

1.4 opacity 不透明度

  • opacity 属性能为整个元素添加透明效果， 值是 0 到 1 之间的小数， 0 是完全透明， 1 表示完全不透明。
  • opacity 与 rgba 的区别？
    • opacity 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。
    • rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04_opacity</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: orange;
            font-size: 40px;
            opacity: 0.1;
            font-weight: bold;
        }
        .box2 {
            position: relative;
        }
        h1 {
            position: absolute;
            top: 100px;
            left: 0;
            background-color: black;
            color: white;
            width: 400px;
            line-height: 100px;
            text-align: center;
            font-size: 40px;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div class="box1">你好啊</div>
    <div class="box2">
        <img src="../images/你瞅啥.jpg" alt="">
        <h1>你瞅啥</h1>
    </div>
</body>
</html>

 2. CSS3 新增背景属性

2.1 background-origin

作用：设置背景图的原点。

语法

  • padding-box ：从 padding 区域开始显示背景图像。—— 默认值
  • border-box ：从 border 区域开始显示背景图像。
  • content-box ：从 content 区域开始显示背景图像。 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_background-origin</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            background-color: skyblue;
            margin: 0 auto;
            font-size: 40px;
            padding: 50px;
            border: 50px dashed rgba(255, 0, 0, 0.7);

            background-image: url('../images/bg01.jpg');
            background-repeat: no-repeat;
            background-origin: border-box;
        }
    </style>
</head>
<body>
    <div class="box1">你好啊</div>
</body>
</html>

2.2 background-clip

作用：设置背景图的向外裁剪的区域。

语法

  • border-box ：从 border 区域开始向外裁剪背景。 —— 默认值
  • padding-box ：从 padding 区域开始向外裁剪背景。
  • content-box ：从 content 区域开始向外裁剪背景。
  • text ：背景图只呈现在文字上。
  • 注意：若值为 text ，那么 backgroun-clip 要加上 -webkit- 前缀。 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_background-clip</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            background-color: skyblue;
            margin: 0 auto;
            font-size: 120px;
            font-weight: bold;
            padding: 50px;
            border: 50px dashed rgba(255, 0, 0, 0.7);
            color: transparent;

            background-image: url('../images/bg02.jpg');
            background-repeat: no-repeat;
            background-origin: border-box;
            -webkit-background-clip: text;
        }
    </style>
</head>
<body>
    <div class="box1">你好啊</div>
</body>
</html>

2.3 background-size

作用：设置背景图的尺寸。

语法：

  • 用长度值指定背景图片大小，不允许负值。 
background-size: 300px 200px;
  • 用百分比指定背景图片大小，不允许负值。 
background-size: 100% 100%;
  • auto ：背景图片的真实大小。 —— 默认值
  • contain ： 将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片。 
background-size: contain;
  • cover ：将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要注意：背景图片有可能显示不完整。—— 相对比较好的选择 
background-size: cover;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03_background-size</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            padding: 50px;
            border: 50px dashed rgba(255, 0, 0, 0.7);
            background-image: url('../images/bg03.jpg');
            background-repeat: no-repeat;

            /* background-size: 400px 400px; */
            /* background-size: 100% 100%; */
            /* background-size: contain; */
            background-size: cover;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2.4 backgorund 复合属性

语法：

background: color url repeat position / size origin clip

注意：

  • origin 和 clip 的值如果一样，如果只写一个值，则 origin 和 clip 都设置；如果设置了两个值，前面的是 origin ，后面的 clip 。
  • size 的值必须写在 position 值的后面，并且用 / 分开。 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04_background复合属性</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            margin: 0 auto;
            font-size: 40px;
            padding: 50px;
            border: 50px dashed rgba(255, 0, 0, 0.7);

            /* background: 背景颜色 背景url 是否重复 位置 / 大小 原点 裁剪方式; */
            background:skyblue url('../images/bg03.jpg') no-repeat 10px 10px / 500px 500px border-box content-box;
        }
    </style>
</head>
<body>
    <div class="box1">你好啊</div>
</body>
</html>

2.5 多背景图

  • CSS3 允许元素设置多个背景图片
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>05_多背景图</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            background: url('../images/bg-lt.png') no-repeat left top,
                        url('../images/bg-rt.png') no-repeat right top,
                        url('../images/bg-lb.png') no-repeat left bottom,
                        url('../images/bg-rb.png') no-repeat right bottom;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

结语

本人会持续更新文章的哦！希望大家一键三连，你们的鼓励就是作者不断更新的动力

麟-小白
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css盒子模型（框模型）属性
猿码互联
10-05 1500
盒模型又叫框模型，包含了五个用来描述盒子位置、尺寸的属性，分别是宽度 width、高度 height、内边距padding、 边框 border、外边距 margin。这五个属性可以通过 CSS 来设置，用来控制 HTML 元素的位置和尺寸。盒模型是 Web 开发中非常重要的概念，可以帮助开发者创建一致、可预测的布局效果。在盒模型中，元素的实际大小由内容大小、内边距、边框和外边距共同组成。
盒模型新增属性
dgf5765的博客
02-27 89
1.盒子投影box-shadow <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ ...
CSS 盒子模型及相关属性、元素类型转换及CSS3新增盒子属性
YuLong的博客
04-19 2224
文章目录盒子模型认识盒子模型盒子模型的相关属性边框属性外边距属性内边距属性背景属性CSS3新增盒子模型属性元素类型转换块级元素行内元素div和span标签元素类型转换 盒子模型 认识盒子模型 盒子模型：网页布局的基础 一个盒子可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。 margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。 盒子的大小： 盒子的总
CSS3新特性（新增盒子模型、新增背景属性、新增边框、新增文本)
m0_60376759的博客
04-11 586
新增盒子模型 box-sizing box-sizing: content-box;默认值 box-sizing: border-box; 盒子的计算方式被修改，包含了边框与re 盒子尺寸：resize 值： none： 不允许用户调整元素大小。 (默认) both： 用户可以调节元素的宽度和高度。 horizontal： 用户可以调节元素的宽度 。 vertical： 用户可以调节元素的高度。 盒子阴影：box-shadow: h-shadow v-sha
CSS3怪异盒模型
weixin_52629158的博客
04-16 434
box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等。例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这样就可以让浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。这是一个怪异盒模型box-sizing: border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。border-box 为元素设定的宽度和高度决定了元素的边框盒。
使用HTML语言和CSS开发商业站点第3章.zip
04-20
在本压缩包“使用HTML语言和CSS开发商业站点第3章.zip”中，重点涵盖了HTML5和CSS3这两个核心技术在构建现代商业网站时的应用。原创作者田超凡为我们提供了深入浅出的讲解，旨在帮助读者掌握这两门语言的精髓，以便...
HTML5+CSS3网站设计基础教程_动手实践源代码
11-09
5. **CSS3布局**：Flexbox（弹性盒模型）和Grid（网格布局）为复杂网页布局提供了强大的解决方案，使得元素对齐、间距调整和响应式设计变得简单。 6. **CSS3过渡与动画**：通过transition和animation属性可以实现...
HTML5与CSS3基础教程
06-09
6. **Flexbox和Grid布局**：Flexbox（弹性盒模型）用于一维布局，如行或列；Grid布局则提供二维布局解决方案，让复杂网页布局更加灵活和可控。 本教程《HTML5与CSS3基础教程（第8版）中文高清版》将详细讲解这些...
《HTML5+CSS3从入门到精通》源码14-16章
09-12
本章还会深入讨论Flexbox（弹性盒模型），它是CSS3中用于创建响应式和动态布局的强大工具，允许在不同屏幕尺寸下调整元素的位置和大小。另外，Grid布局也是重点，它提供了二维网格系统，可以更高效地控制网页元素的...
html5+css3课件打包
05-31
例如，第一章可能介绍了基本的HTML5元素和文档结构，第二章可能涉及CSS3的选择器和基本样式，后续章节可能涵盖更复杂的技术，如多媒体处理、响应式设计、动画和交互等。通过这个课件，学习者可以系统地学习这两门...
css设置复合属性背景（同时包括背景图片和背景颜色
Cheryl的加工厂
03-30 1869
background: #f5f6fa url() 0 0 no-repeat ;
CSS3学习笔记三---怪异盒模型 | 弹性盒*
Flora_hsx的博客
10-23 1394
CSS3学习笔记三---怪异盒模型 | 弹性盒*，怪异盒内容比较重要，常用，需要多练习。
css3移动端布局——怪异盒模型和弹性盒模型
weixin_46579411的博客
04-14 383
一、怪异盒模型： 1、box-sizing: 属性值： box-sizing:content-box; 常规盒模型 box-sizing:border-box: 怪异盒模型（IE盒模型） 2、触发怪异盒模型： box-sizing:border-box; 3、 怪异盒模型特点：padding和border都会在元素的宽高的内部，不会把盒子撑大。 *{ 移动端项目css可以这样写 box-si...
CSS 盒模型和怪异盒模型
liuqiao0327的专栏
08-15 907
CSS 盒模型和怪异盒模型 一.概念 盒模型是CSS布局的基石,它规定了网页元素如何显示以及元素间相互关系,CSS定义所有元素都可以拥有像盒子一样的外形和平面空间,即都包含内容区,补白(填充,内边距),边框,边界(外边距) 下面图片说明了盒子模型: Margin(外边距):在元素外边的空白区域,被称为外边距 Border(边框): 元素的边框 Padding(内边距) 元素内容到元素的边框之间的距离,也称补白. Content 盒子的内容 二.标准盒模型和IE盒模型 盒模型又分为标准盒模型(W3
CSS基础十四（CSS3属性/怪异盒子模型/flex布局）
weixin_41452476的博客
10-19 178
怪异盒模型 标准盒模型：box-sizing:content-box 盒子宽度 = 内容区的width+padding的左右+border的左右+margin的左右 怪异盒模型：box-sizing:border-box ie8以下不支持 盒子宽度 = 内容区的width + margin的左右 弹性盒布局(flex) 父元素 形成弹性盒 display:flex; 主轴对齐方式 justify-content flex-start 默认值 主轴起点 flex-end 主轴终点 ce
css3 标准盒模型 怪异盒模型
qq_37639762的博客
02-15 341
盒模型组成：margin + border + padding + content 标准盒模型 默认(box-sizing:content-box) width = content 怪异盒模型(box-sizing:border-box) width = content + padding + border
盒子模型解析
shao_xuan_的博客
10-11 1404
盒子模型盒子模型盒子的特性1、外边距属性2、内边距属性3、边框属性4、背景属性 盒子模型 进行网页布局的重要的属性，一个页面由多个盒子组成，每个盒子的内容都不相同 盒子的特性 (1)外边距(margin)：盒子与其他元素之间的额距离 (2)内边距(padding)：也称为填充距离,内容和边框之间的距离 (3)边框(border) 1、外边距属性 外边距属性 作用 margin-top 上外边距 margin-right 右外边距 margin-bottom 下外边距 margin
CSS基础笔记七，怪异盒子和弹性盒子（弹性盒子的属性，子容器镜像（flex-direction），水平（justify-content），垂直（align-itmes），子容器的权重（flex-数））
最新发布
qq_55006020的博客
06-28 2853
标准盒子模型，外边距（margin），内边距（padding），线宽（border），内容。内边距和线框会撑开容器怪异盒子模型，外边距（margin），内边距（padding），线框（border），内容。内边距和相框会压缩容器怪异盒子的开启，box-siziing：bober-box 把标准盒子变成怪异盒子content-box 把怪异盒子变成标准盒子弹性盒子模型。通过设置弹性盒子模型，可以更改子容器在父级容器的平均摆放距离开启：display-flex子容器会自动横向摆放。
CSS3盒模型，W3C标准盒模型，怪异盒模型
weixin_47974251的博客
05-03 140
/* 定义为标准盒模型 */指定为怪异盒模型用：box-sizing: content-box;/* 定义为IE盒模型 */
"CSS3新增背景属性与值，解密背景盒模型
为了更好地控制和操作背景图片，CSS3添加了3个新的background相关属性，以及一系列的相关属性值，以便更好地满足开发人员对于背景样式的需求。 然而，在熟悉这些新属性之前，我们需要了解3个重要的盒子。 首先是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

麟-小白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值