当前位置： 首页 > news >正文

CSS3新增盒子属性（三）

news 2026/5/20 9:27:50

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&#xff1a;设置内容区的大小&#xff1b;border-box&#xff1a;设置盒子的总大小。 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><t…...

编程日记 2024/11/2 4:58:08

Manus在虚拟现实仿真模拟中的应用案例分享

Manus虚拟现实手套作为一种高精度的人机交互设备&#xff0c;在仿真模拟领域展现出了巨大的应用潜力。通过提供实时、准确的手指动作捕捉数据&#xff0c;Manus手套为多个行业带来了前所未有的仿真体验&#xff0c;推动了技术发展和应用创新。 技术特点 1. 高精度手指跟踪 Ma…...

编程日记 2024/11/2 4:57:07

大数据-201 数据挖掘 机器学习理论 - 决策树 局部最优 剪枝 分裂 二叉分裂

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…...

编程日记 2024/11/2 4:56:05

Scala 的trait

在Scala中&#xff0c;trait是一种特殊概念。trait可以作为接口&#xff0c;同时也可以定义抽象方法。类使用extends继承trait&#xff0c;在Scala中&#xff0c;无论继承类还是继承trait都用extends关键字。在Scala中&#xff0c; 类继承trait后必须实现其中的抽象方法&#x…...

编程日记 2024/11/2 4:55:04

vue3官方示例-简单的 markdown 编辑器。

官方示例不能直接粘贴使用&#xff0c;故自己补了些代码。方便初学者学习&#xff0c;节省时间&#xff0c;提高学习效率。 1、html代码&#xff1a; <!doctype html> <html lang"en"> <head><meta charset"UTF-8"><meta nam…...

编程日记 2024/11/2 4:54:03

Linux标准I/O库汇总整理

Linux标准I/O库&#xff08;Standard I/O Library&#xff09;是C标准库的一部分&#xff0c;提供了一系列用于文件输入输出的高级接口。这些接口通常比低级别的系统调用更易于使用&#xff0c;但也可能带来额外的性能开销。下面是Linux标准I/O库的汇总整理&#xff0c;包括常见…...

编程日记 2024/11/2 4:52:01

BGP路由优选+EVPN

BGP 的路由优选规则是一套多步决策链&#xff0c;用来确定在多个可行路由中选择最优的路由。BGP 是一种路径向量协议&#xff0c;通过这些优选规则&#xff0c;网络管理员可以控制数据流量的流向&#xff0c;确保网络的稳定性和效率。下面以一个实例来详细说明 BGP 的优选规则及…...

编程日记 2024/11/2 4:51:00

牛客练习赛131（未补）

A-小H学语文 题意&#xff1a;木板数量为m&#xff0c;想让mmh&#xff08;min)最大&#xff0c;找出这几块木板 分析&#xff1a;让木板从大到小排序&#xff0c;找到最大的体积&#xff0c;将之前的木板按序列输出 代码&#xff1a; #include<bits/stdc.h> using n…...

编程日记 2024/11/2 4:49:59

功能更新丨AI黑科技助燃VR全景新势能

随着VR全景市场需求不断扩大&#xff0c; 为更好地赋能合作商业务发展&#xff0c; 酷雷曼积极推进产品技术迭代&#xff0c; 融合VR虚拟现实和AI人工智能&#xff0c; 重磅推出6大AI黑科技&#xff0c; 让VR全景内容更丰富、创作更加高效&#xff01; 新功能怎么用&#…...

编程日记 2024/11/2 4:46:56

JavaCV学习第一课

1、 JavaCV [1] 是一款基于JavaCPP [2]调用方式&#xff08;JNI的一层封装&#xff09;&#xff0c;由多种开源计算机视觉库组成的包装库&#xff0c;封装了包含FFmpeg、OpenCV、tensorflow、caffe、tesseract、libdc1394、OpenKinect、videoInput和ARToolKitPlus等在内的计算…...

编程日记 2024/11/2 4:44:52

Java第二阶段---16字符串---第一节 String

1.特性介绍 String 类位于 java.lang 包中&#xff0c;无需引入&#xff0c;直接使用即可。 String 类是由 final 修饰的&#xff0c;表示String 类是一个最终类&#xff0c;不能够被继承。 String 类构建的对象不可再被更改 示例 package com.cyx.string;public class Ex…...

编程日记 2024/11/2 4:41:50

＜十六＞Ceph mon 运维

Ceph 集群有故障了&#xff0c;你执行的第一个运维命令是什么&#xff1f; 我猜测是ceph -s 。无论执行的第一个命令是什么&#xff0c;都肯定是先检查Mon。 在开始之前我们有必要介绍下Paxos协议&#xff0c;毕竟Mon就是靠它来实现数据唯一性。 一&#xff1a; Paxos 协议 1…...

编程日记 2024/11/2 4:39:48

【网络安全初识】——互联网发展史

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【网络安全】 本专栏旨在分享学习网络安全的一些学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; ipconfig&#xff1a;显示当…...

编程日记 2024/11/2 4:37:45

Windows和Linux内存共享机制

Windows和Linux内存共享机制 引言1.Windows写操作读操作 2.Linux写操作读操作 3.Shell使用 tmux 运行 write 和 read说明 引言 在嵌入式开发领域&#xff0c;内存共享机制作为不同操作系统间实现高效数据交换的重要手段&#xff0c;尤其在对实时性和可靠性要求极高的环境中更为…...

编程日记 2024/11/2 4:36:45

windows@命令行中获取环境变量取值不展开取值(原值)

文章目录 命令行中获取环境变量取值获取不展开的值具体实现注解 封装为函数版本1版本2 命令行中获取环境变量取值 这里主要讨论获取未展开的值本来获取未展开的值应该作为默认选项,至少有合适的api方便直接调用,但是不知道微软怎么想的,让这个任务变得不直接 获取不展开的值 …...

编程日记 2024/11/2 4:35:44

如何找到多平台内容爆款进行批量复刻？

为了进一步扩大品牌社媒影响力&#xff0c;在消费者做决策的时候&#xff0c;能够第一时间出现在首选位置。持续在抖音、小红书、b站、公众号等各大社媒平台&#xff0c;产生连续的、正向的高质量品牌曝光&#xff0c;是非常重要的。如何进行这种多平台品牌影响力的提升呢&…...

编程日记 2024/11/2 4:34:43

【UML】- 用例图（结合银行案例解释其中的奥义）

目录 一、相关介绍 作用&#xff1a; 组成&#xff1a; 关系 二、使用具体银行案例解释各组成部分的含义 1、系统 2、参与者 3、用例 4、关联关系 5、扩展关系 6、泛化&#xff08;继承&#xff09;关系 三、成品 一、相关介绍 作用&#xff1a; 用例图可以描述一个…...

编程日记 2024/11/2 4:33:41

浅谈UI自动化

⭐️前言⭐️ 本篇文章围绕UI自动化来展开&#xff0c;主要内容包括什么是UI自动化&#xff0c;常用的UI自动化框架&#xff0c;UI自动化原理等。 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f349;博主将持续更新学习记录收获&#xff0c;友友们有任何问题…...

编程日记 2024/11/2 4:31:40

三、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…...

编程日记 2024/11/2 4:29:37

深度学习-BP算法详解

BP&#xff08;Back Propagation&#xff0c;反向传播&#xff09;是训练神经网络的重要算法之一。它通过计算误差并将误差反向传播&#xff0c;以更新神经网络中的权重和偏置&#xff0c;进而使模型更好地拟合数据。 1. BP算法的基本原理 反向传播的基本思想是&#xff1a; …...

编程日记 2024/11/2 4:28:36

Excel MCP Server 完全指南：无需安装Excel的自动化处理方案

Excel MCP Server 完全指南&#xff1a;无需安装Excel的自动化处理方案 【免费下载链接】excel-mcp-server A Model Context Protocol server for Excel file manipulation 项目地址: https://gitcode.com/gh_mirrors/ex/excel-mcp-server Excel MCP Server 是一个基于模…...

编程新知 2026/5/20 8:39:24

告别光流计算！用PyTorch复现MotionNet，5分钟搞定视频动作识别

5分钟实现视频动作识别&#xff1a;PyTorch版MotionNet实战指南 在咖啡还没凉透的间隙里&#xff0c;让AI看懂视频动作——这曾是计算机视觉领域最耗时的任务之一。传统双流网络需要预计算光流&#xff0c;像手工制作意大利面般繁琐&#xff1b;而2017年问世的MotionNet就像发…...

编程新知 2026/5/20 6:26:34

别再被假密码骗了！手把手教你用010 Editor识别并破解ZIP/RAR伪加密压缩包

010 Editor实战&#xff1a;揭秘ZIP/RAR伪加密压缩包的技术真相 当你从某个CTF比赛下载到一个加密压缩包&#xff0c;输入密码却提示错误时&#xff0c;是否想过这可能是个精心设计的陷阱&#xff1f;网络安全领域存在一种特殊的"伪加密"技术&#xff0c;它让压缩包看…...

编程新知 2026/5/20 4:59:33

别再手动拖拽了！用Java POI + XSSFDrawing，5行代码搞定Excel单元格图片批量插入（附完整源码）

5行代码实现Excel图片批量插入&#xff1a;Java POI XSSFDrawing高效开发指南 1. 为什么需要自动化Excel图片插入&#xff1f; 在日常报表开发中&#xff0c;我们经常遇到需要将大量图片&#xff08;如用户头像、产品图&#xff09;嵌入Excel单元格的场景。传统手动操作存在三…...

编程新知 2026/5/20 4:14:11

堆叠集成方法

原文&#xff1a;towardsdatascience.com/the-stacking-ensemble-method-984f5134463a 发现堆叠在机器学习中的力量——一种将多个模型组合成一个单一强大预测器的技术。本文从基础知识到高级技术探讨了堆叠&#xff0c;揭示了它是如何结合不同模型的优势以提高准确性的。无论你…...

编程新知 2026/5/20 4:09:34

Vivado FPGA设计：基于IP核的系统级集成与高效开发实践

1. 引言&#xff1a;从“造轮子”到“搭积木”的设计范式转变如果你在数字电路设计领域摸爬滚打超过五年&#xff0c;大概率经历过从ISE到Vivado的迁移阵痛。2012年&#xff0c;当Xilinx推出Vivado时&#xff0c;很多习惯了ISE“代码驱动”工作流的老工程师都感到不适应——这个…...

编程新知 2026/5/20 2:14:55

IT6520：USB‑C 转 MIPI 芯片方案 4K@120Hz 高清显示

一、前言平板、便携屏、AR/VR 头显、车载中控、会议终端等设备&#xff0c;对USB‑C 一线通视频输出的需求越来越强。 传统方案必须用&#xff1a;PD 控制器 DP 接收芯片 MIPI 桥接芯片 外置 MCU Flash&#xff0c;多芯片拼凑导致电路复杂、成本高、兼容性差、开发周期长。…...

编程新知 2026/5/20 1:14:32

桌面Z箍缩实验：从等离子体原理到聚变中子探测的DIY实践

1. 项目概述&#xff1a;从“人造太阳”到桌面实验的能源狂想“如何通过聚变制造能源及如何实现”&#xff0c;这个标题背后&#xff0c;是无数工程师和科学家为之奋斗终身的终极能源梦想。它听起来宏大得像是国家实验室的专属课题&#xff0c;但今天我想从一个更接地气的、带有…...

编程新知 2026/5/20 0:48:41

告别打包失败！Matlab开发者必看：Runtime版本精准匹配与离线部署全攻略

MATLAB Runtime精准匹配与离线部署实战指南 当MATLAB开发者遭遇Runtime版本陷阱 深夜的办公室里&#xff0c;王工程师盯着屏幕上第7次打包失败的红色错误提示&#xff0c;揉了揉酸胀的眼睛。这个场景对许多MATLAB开发者来说并不陌生——明明在自己的R2022b Update 3环境中完美运…...

编程新知 2026/5/20 0:44:36

光谱分析避坑指南：为什么你的多项式拟合基线校正总是不准？

光谱分析避坑指南&#xff1a;为什么你的多项式拟合基线校正总是不准&#xff1f; 拉曼光谱和红外光谱分析中&#xff0c;基线漂移是困扰研究人员的常见问题。就像摄影师需要先调平三脚架才能拍出清晰照片一样&#xff0c;准确的光谱基线校正是后续定量分析的基石。然而在实际操…...

编程新知 2026/5/20 0:27:45