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

CSS3新增盒子属性（三）

news 2025/9/20 4:57:04

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

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2025/9/19 5:15:11

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2025/9/18 9:42:12

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

编程新知 2025/9/19 12:51:08

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2025/8/30 19:47:38

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2025/9/3 23:20:22

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/9/13 11:37:54

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2025/9/12 23:22:17

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

编程新知 2025/9/9 10:09:41

MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

编程新知 2025/9/3 6:05:43

脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...

编程新知 2025/9/2 16:55:16