CSS3新增盒子属性（三）
1、CSS3新增盒子属性
1.1 box-sizing
设置盒子的大小。
- content-box：设置内容区的大小；
- border-box：设置盒子的总大小。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>box-sizing</title><style>.d1 {height: 200px;width: 200px;padding: 5px;margin: 5px;border: 1px solid black;background-color: aqua;text-align: center;line-height: 200px;box-sizing: content-box;}.d2 {height: 200px;width: 200px;padding: 5px;margin: 5px;border: 1px solid black;background-color: blanchedalmond;text-align: center;line-height: 200px;box-sizing: border-box;}</style>
</head><body><div class="d1">设置内容区大小</div><div class="d2">设置盒子大小</div>
</body></html>
1.2 resize
使得盒子的大小用户可调，需要给overflow属性。
- none：不允许用户调节大小；
- both：可以调节高度和宽度；
- horizontal：可以调节宽度；
- vertical：可以调节高度。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>resize</title><style>.inner {height: 300px;width: 300px;background-color: antiquewhite;border: 1px solid skyblue;}.d1 {height: 200px;width: 200px;background-color: aqua;overflow: hidden;resize: both;border: 1px solid black;}.d2 {height: 200px;width: 200px;background-color: rgb(68, 151, 112);overflow: hidden;resize: horizontal;border: 1px solid black;margin-top: 10px;}.d3 {height: 200px;width: 200px;background-color: rgb(46, 153, 153);overflow: hidden;resize: vertical;border: 1px solid black;margin-top: 10px;}</style>
</head><body><div class="d1"><div class="inner"></div></div><div class="d2"></div><div class="d3"></div>
</body></html>
1.3 box-shadow
- box-shadow: 5px 5px 20px 10px yellow inset;
- 分别代表：水平位置 垂直位置 模糊程度 外延值 阴影颜色 内阴影 必须有水平和垂直位置，其它属性可选
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>box-shadow</title><style>div {height: 200px;width: 200px;text-align: center;line-height: 200px;background-color: red;font-size: 20px;margin: 0 auto;box-shadow: 0px 0px 80px 10px black inset;}</style>
</head><body><div>阴影</div>
</body></html>
1.4 opacity
调整元素不透明度，范围为0-1，0为完全透明，1为完全不透明。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>opacity</title><style>div {width: 200px;height: 200px;margin: auto;background-color: aqua;border: 1px solid black;position: relative;text-align: center;}h2 {position: relative;opacity: 0.3;top: 30px;}</style>
</head><body><div><h2>不透明度</h2></div></body></html>
相关文章：
CSS3新增盒子属性（三）
1、CSS3新增盒子属性 1.1 box-sizing 设置盒子的大小。 content-box：设置内容区的大小；border-box：设置盒子的总大小。 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><t…...
Manus在虚拟现实仿真模拟中的应用案例分享
Manus虚拟现实手套作为一种高精度的人机交互设备，在仿真模拟领域展现出了巨大的应用潜力。通过提供实时、准确的手指动作捕捉数据，Manus手套为多个行业带来了前所未有的仿真体验，推动了技术发展和应用创新。 技术特点 1. 高精度手指跟踪 Ma…...
大数据-201 数据挖掘 机器学习理论 - 决策树 局部最优 剪枝 分裂 二叉分裂
点一下关注吧！！！非常感谢！！持续更新！！！ 目前已经更新到了： Hadoop（已更完）HDFS（已更完）MapReduce（已更完&am…...
Scala 的trait
在Scala中，trait是一种特殊概念。trait可以作为接口，同时也可以定义抽象方法。类使用extends继承trait，在Scala中，无论继承类还是继承trait都用extends关键字。在Scala中， 类继承trait后必须实现其中的抽象方法&#x…...
vue3官方示例-简单的 markdown 编辑器。
官方示例不能直接粘贴使用，故自己补了些代码。方便初学者学习，节省时间，提高学习效率。 1、html代码： <!doctype html> <html lang"en"> <head><meta charset"UTF-8"><meta nam…...
Linux标准I/O库汇总整理
Linux标准I/O库（Standard I/O Library）是C标准库的一部分，提供了一系列用于文件输入输出的高级接口。这些接口通常比低级别的系统调用更易于使用，但也可能带来额外的性能开销。下面是Linux标准I/O库的汇总整理，包括常见…...
BGP路由优选+EVPN
BGP 的路由优选规则是一套多步决策链，用来确定在多个可行路由中选择最优的路由。BGP 是一种路径向量协议，通过这些优选规则，网络管理员可以控制数据流量的流向，确保网络的稳定性和效率。下面以一个实例来详细说明 BGP 的优选规则及…...
牛客练习赛131（未补）
A-小H学语文 题意：木板数量为m，想让mmh（min)最大，找出这几块木板 分析：让木板从大到小排序，找到最大的体积，将之前的木板按序列输出 代码： #include<bits/stdc.h> using n…...
功能更新丨AI黑科技助燃VR全景新势能
随着VR全景市场需求不断扩大， 为更好地赋能合作商业务发展， 酷雷曼积极推进产品技术迭代， 融合VR虚拟现实和AI人工智能， 重磅推出6大AI黑科技， 让VR全景内容更丰富、创作更加高效！ 新功能怎么用&#…...
JavaCV学习第一课
1、 JavaCV [1] 是一款基于JavaCPP [2]调用方式（JNI的一层封装），由多种开源计算机视觉库组成的包装库，封装了包含FFmpeg、OpenCV、tensorflow、caffe、tesseract、libdc1394、OpenKinect、videoInput和ARToolKitPlus等在内的计算…...
Java第二阶段---16字符串---第一节 String
1.特性介绍 String 类位于 java.lang 包中，无需引入，直接使用即可。 String 类是由 final 修饰的，表示String 类是一个最终类，不能够被继承。 String 类构建的对象不可再被更改 示例 package com.cyx.string;public class Ex…...
＜十六＞Ceph mon 运维
Ceph 集群有故障了，你执行的第一个运维命令是什么？ 我猜测是ceph -s 。无论执行的第一个命令是什么，都肯定是先检查Mon。 在开始之前我们有必要介绍下Paxos协议，毕竟Mon就是靠它来实现数据唯一性。 一： Paxos 协议 1…...
【网络安全初识】——互联网发展史
个人主页：兜里有颗棉花糖 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 兜里有颗棉花糖 原创 收录于专栏【网络安全】 本专栏旨在分享学习网络安全的一些学习笔记，欢迎大家在评论区交流讨论💌 ipconfig：显示当…...
Windows和Linux内存共享机制
Windows和Linux内存共享机制 引言1.Windows写操作读操作 2.Linux写操作读操作 3.Shell使用 tmux 运行 write 和 read说明 引言 在嵌入式开发领域，内存共享机制作为不同操作系统间实现高效数据交换的重要手段，尤其在对实时性和可靠性要求极高的环境中更为…...
)
windows@命令行中获取环境变量取值不展开取值(原值)
文章目录 命令行中获取环境变量取值获取不展开的值具体实现注解 封装为函数版本1版本2 命令行中获取环境变量取值 这里主要讨论获取未展开的值本来获取未展开的值应该作为默认选项,至少有合适的api方便直接调用,但是不知道微软怎么想的,让这个任务变得不直接 获取不展开的值 …...
如何找到多平台内容爆款进行批量复刻？
为了进一步扩大品牌社媒影响力，在消费者做决策的时候，能够第一时间出现在首选位置。持续在抖音、小红书、b站、公众号等各大社媒平台，产生连续的、正向的高质量品牌曝光，是非常重要的。如何进行这种多平台品牌影响力的提升呢&…...
【UML】- 用例图（结合银行案例解释其中的奥义）
目录 一、相关介绍 作用： 组成： 关系 二、使用具体银行案例解释各组成部分的含义 1、系统 2、参与者 3、用例 4、关联关系 5、扩展关系 6、泛化（继承）关系 三、成品 一、相关介绍 作用： 用例图可以描述一个…...
浅谈UI自动化
⭐️前言⭐️ 本篇文章围绕UI自动化来展开，主要内容包括什么是UI自动化，常用的UI自动化框架，UI自动化原理等。 🍉欢迎点赞 👍 收藏 ⭐留言评论 🍉博主将持续更新学习记录收获，友友们有任何问题…...
三、k8s快速入门之Kubectl 命令基础操作
⭐️创建Pod [rootmaster ~]# kubectl run nginx --imageharbor.tanc.com/library/ngix:latest kubectl run --generatordeployment/apps.v1 is DEPRECATED and will be rmoved in a future version. Use kubectl run --generatorrun-pod/v1 or kbectl create instead. deplo…...
深度学习-BP算法详解
BP（Back Propagation，反向传播）是训练神经网络的重要算法之一。它通过计算误差并将误差反向传播，以更新神经网络中的权重和偏置，进而使模型更好地拟合数据。 1. BP算法的基本原理 反向传播的基本思想是： …...
漫画脸描述生成保姆级教程：如何调试生成结果提升SD绘图匹配度
漫画脸描述生成保姆级教程：如何调试生成结果提升SD绘图匹配度 你是不是也遇到过这样的情况：脑子里有个超棒的二次元角色形象，但用AI绘图工具画出来总是差那么点意思？要么发型不对，要么表情奇怪，要么服装细…...
突破限制与全版本支持：MediaCreationTool.bat重新定义Windows安装介质制作
突破限制与全版本支持：MediaCreationTool.bat重新定义Windows安装介质制作 【免费下载链接】MediaCreationTool.bat Universal MCT wrapper script for all Windows 10/11 versions from 1507 to 21H2! 项目地址: https://gitcode.com/gh_mirrors/me/MediaCreatio…...
SEO优化文章标题需要注意的重点有什么
SEO优化文章标题需要注意的重点有什么 在当前数字营销的环境中，SEO优化文章标题是吸引目标用户点击的重要因素之一。拥有一个高效的标题不仅可以提升文章的曝光率，还能提高用户的参与度和转化率。SEO优化文章标题需要注意的重点有哪些呢？本文…...
CameraLink三种模式（Base/Medium/Full）信号传输差异对比与选型建议
CameraLink三种工作模式深度解析与工业选型实战指南 在工业视觉检测线上，一台高速运行的贴片机正以每分钟800次的速度捕捉元件位置。当工程师将相机从200万像素升级到800万像素时，原本稳定的图像突然出现随机噪点——这往往是CameraLink模式选择不当导致…...
CVE-2016-2183漏洞自查与修复指南：你的Nginx/Apache还在用有问题的SSL/TLS协议吗？
CVE-2016-2183漏洞深度解析与实战修复：从检测到防护的全链路方案 凌晨三点，运维团队的告警系统突然响起——安全扫描报告显示生产环境存在SSL/TLS协议信息泄露风险。这不是普通的漏洞警报，而是可能直接导致加密通信被破解的CVE-2016-2183。作…...
Whisky终极指南：在macOS上免费运行Windows程序的完整教程
Whisky终极指南：在macOS上免费运行Windows程序的完整教程 【免费下载链接】Whisky A modern Wine wrapper for macOS built with SwiftUI 项目地址: https://gitcode.com/gh_mirrors/wh/Whisky 想在macOS上运行Windows软件和游戏？Whisky为你提供了…...
Wan2.2-I2V-A14B私有部署实战教程：RTX 4090D一键生成1080P视频
Wan2.2-I2V-A14B私有部署实战教程：RTX 4090D一键生成1080P视频 1. 开篇：为什么选择私有部署 当你需要频繁生成高质量视频内容时，公有云服务往往面临三个痛点：生成排队时间长、隐私数据风险、调用成本高。Wan2.2-I2V-A14B私有部署…...
3步让旧款iOS设备重获新生：Legacy-iOS-Kit性能拯救全指南
3步让旧款iOS设备重获新生：Legacy-iOS-Kit性能拯救全指南 【免费下载链接】Legacy-iOS-Kit An all-in-one tool to restore/downgrade, save SHSH blobs, jailbreak legacy iOS devices, and more 项目地址: https://gitcode.com/gh_mirrors/le/Legacy-iOS-Kit …...
中国四大高考工厂是哪四所
根据当前（2026年4月）可查的权威公开资料，“中国四大高考工厂”通常指以下四所中学： 1、河北衡水中学 2、安徽毛坦厂中学 3、河南郸城一高（即郸城县第一高级中学） 4、湖北黄冈中学 背…...
GPEN老照片修复案例：增强前后对比，效果直观展示
GPEN老照片修复案例：增强前后对比，效果直观展示 1. 引言：老照片修复的痛点与解决方案 翻开泛黄的相册，那些承载着珍贵记忆的老照片往往因为年代久远而变得模糊、褪色甚至破损。传统的手工修复不仅耗时耗力，还需要专业…...