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

CSS3新增盒子属性（三）

news 2026/4/2 15:11:47

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

突破Windows与Android壁垒：APK-Installer重构跨平台应用安装体验

突破Windows与Android壁垒&#xff1a;APK-Installer重构跨平台应用安装体验 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 在数字化生活中&#xff0c;两个场景常常困…...

编程新知 2026/4/2 10:38:12

从单核到16核：用程序员思维图解CPU参数（附性能测试代码）

从单核到16核&#xff1a;用程序员思维图解CPU参数&#xff08;附性能测试代码&#xff09; 在开发高性能应用时&#xff0c;CPU的选择往往直接决定了程序的执行效率。但面对琳琅满目的参数——主频、核心数、线程数、缓存大小、架构代际——开发者该如何做出明智决策&#xff…...

编程新知 2026/4/2 9:20:58

手把手教你用V4L2框架开发USB摄像头驱动（附UVC协议解析）

深入解析V4L2框架下的USB摄像头驱动开发与UVC协议实战 在嵌入式Linux开发领域&#xff0c;视频采集设备的驱动开发一直是工程师们需要掌握的核心技能之一。随着物联网和边缘计算的快速发展&#xff0c;USB摄像头在各种智能设备中的应用越来越广泛&#xff0c;从工业检测到智能家…...

编程新知 2026/4/2 9:18:57

如何快速搭建抖音批量下载工具：面向初学者的完整指南

如何快速搭建抖音批量下载工具&#xff1a;面向初学者的完整指南 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback suppor…...

编程新知 2026/4/2 8:11:56

LaTeX2Word-Equation：学术公式无缝迁移的终极解决方案

LaTeX2Word-Equation&#xff1a;学术公式无缝迁移的终极解决方案 【免费下载链接】LaTeX2Word-Equation Copy LaTeX Equations as Word Equations, a Chrome Extension 项目地址: https://gitcode.com/gh_mirrors/la/LaTeX2Word-Equation 在学术写作与科研工作中&#…...

编程新知 2026/4/2 7:45:23

CasRel在企业搜索中的应用：构建结构化语义索引提升召回质量

CasRel在企业搜索中的应用&#xff1a;构建结构化语义索引提升召回质量 1. 引言&#xff1a;当搜索遇到瓶颈 你有没有遇到过这种情况&#xff1a;在公司内部的知识库里搜索“2024年第三季度华东区的销售数据”&#xff0c;结果返回了一堆包含“销售”、“数据”、“华东”等关…...

编程新知 2026/4/2 5:50:01

Phi-4-mini-reasoning效果展示：中文长文本多跳推理与隐含前提挖掘

Phi-4-mini-reasoning效果展示&#xff1a;中文长文本多跳推理与隐含前提挖掘 1. 模型核心能力概览 Phi-4-mini-reasoning是一款专注于推理任务的文本生成模型&#xff0c;在数学推导、逻辑分析和多步推理等场景下展现出独特优势。与通用聊天模型不同&#xff0c;它专为"…...

编程新知 2026/4/2 5:37:50

Ubuntu系统中Miniconda的安装与配置指南

1. 为什么选择Miniconda&#xff1f; 在开始之前&#xff0c;我们先聊聊为什么要在Ubuntu上安装Miniconda。作为一个长期使用Python进行数据分析和机器学习开发的工程师&#xff0c;我尝试过各种Python环境管理工具&#xff0c;最终发现Miniconda是最适合个人开发者的选择。它比…...

编程新知 2026/4/2 4:43:28

CPython AOT编译器模块全图谱，从_pycompile.c到aot_codegen.cc的17个关键函数逐行注释与性能拐点分析

第一章&#xff1a;CPython AOT编译器模块全图谱概览与演进脉络CPython 的 Ahead-of-Time&#xff08;AOT&#xff09;编译能力并非原生内建&#xff0c;而是近年来通过社区驱动的实验性项目逐步构建起模块化支撑体系。其核心演进路径始于 PEP 698 提出的字节码预编译增强机制&…...

编程新知 2026/4/2 3:38:16

Buzz：离线环境下音频转录与翻译的完整解决方案

Buzz&#xff1a;离线环境下音频转录与翻译的完整解决方案 【免费下载链接】buzz Buzz transcribes and translates audio offline on your personal computer. Powered by OpenAIs Whisper. 项目地址: https://gitcode.com/GitHub_Trending/buz/buzz 在当今信息驱动的工…...

编程新知 2026/4/2 3:32:03