HTML CSS H5C3样式语句汇总20241105

样式语句汇总:

----------------------------------样式设置------------------------------------
盒子:
border: 1px solid #000;  设置边框粗细、实线、颜色;
margin: 0 auto;  盒子居中(顺时针)上0、右自适、下0、左自适;
border-top-left-radius: 50%; 设置圆角;
display: flex;弹性盒子;父盒子加该属性;align-items:center; 弹性盒子的垂直居中,给父盒子加该属性justify-content: center; 弹性盒子的水平居中,给父盒子加该属性justify-content: space-around; 均分布局,给父盒子加该属性,子盒子在一行显示,并两边留空,给父盒子加该属性justify-content: space-between; 两端贴边、均匀布局,第一个子项在容器的起始位置,最后一个子项在容器的结束位置,给父盒子加该属性。flex-wrap: wrap; 在一行显示的子盒子换行,常与justify-content: space-around; 均分布局搭配使用flex-direction: row; 现代浏览器的 Flexbox 水平排列子元素
/*让子盒子在父盒子中垂直居中:*/
1.
父盒子:
display: flex;/*Flexbox 布局*/justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 300px; /* 父盒子的高度 */
2.
父盒子:
display: grid; /*使用 Grid 布局*/place-items: center; /* 将子元素在网格中居中 */height: 300px; /* 父盒子的高度 */
3.
父盒子加:(实用:子盒子浮在父盒子上面的某个具体位置)
position: relative; /*使用定位(相对定位和绝对定位)*/height: 300px; /* 父盒子的高度 */
子盒子加:position: absolute;top: 50%;left: 50%;bottom: 0; /* 距离父盒子底部0 */right: 0; /* 距离父盒子右侧0 */transform: translate(-50%, -50%);背景图片:
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: transparent url(imges.jpg) repeat-y fixed top;
background-size: contain; 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小;
background-size:cover;  此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小;
color: #008B8B; 设置背景颜色; 
image: url(./timg.jpg); 设置背景图片;
size: 50px 50px;  设置背景图片的大小;
repeat: no-repeat; 设置背景图片是否重复;
position: center;  设置背景图片的位置;
position: fixed; 元素也会保持在相同的位置,不会随着页面的滚动而移动
position: fixed;left: 0;bottom: 0; 固定在浏览器左下角
background-attachment: fixed; 设置背景图片相对浏览器的定位位置;
fixed: 背景图像相对于视口(viewport)固定;scroll: 背景图像相对于元素固定; local: 背景图像相对于元素内容固定;
float: left; 解决图片间隙;父盒子使用display:flex;弹性盒子时,子盒子添加浮动文字:
color: red; 设置文字颜色
font-size: 15px; 字体大小
text-align: "center";  文本水平居中;
line-height: 50px;  文本垂直居中方式1;
display: flex; 文本垂直居中方式2;/* 创建 Flexbox 容器 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 200px; /* 设置容器高度 */border: 1px solid #ccc; /* 为了便于观察,添加边框 */
text-decoration: none;  去掉下划线;
list-style: none;  去掉列表前的小圆点;
display:inline-block; 让列表内容显示在同一行;
font-weight:bold;  字体加粗;
white-space: nowrap; 超出不换行;/* 超出一行显示省略号  normal允许换行*/overflow: hidden; 超出范围不显示(溢出隐藏);text-overflow: ellipsis; 超出的文本显示省略号;/*多行文本溢出时的处理,文本溢出容器时,显示一个省略号(...);
text-overflow 属性需要和 overflow 属性一起使用,一般用于单行文本或者内联元素。*/width: 200px; /* 容器的宽度 */white-space: nowrap; /* 禁止文本换行 normal允许换行*/overflow: hidden; /* 超出部分隐藏 */text-overflow: ellipsis; /* 文本溢出显示省略号 */
/*控制文本换行的方式主要通过 white-space 和 word-wrap 这两个属性来实现。这两个属性可以结合使用,以达到不同的文本换行效果。*/width: 300px; /* 容器宽度 */white-space: normal; /* 正常处理空白和换行 */word-wrap: break-word; /* 长单词或 URL 强制换行 */
/*word-break 属性用于控制单词如何在元素内部断开换行,主要用于处理非中文内容(如英文、数字)的换行规则;
这个属性在处理非英文内容的时候非常有用,例如在响应式设计中,或者在需要确保文本在小屏幕上显示正常时。*/normal:默认值。使用默认的换行规则,通常由浏览器决定如何处理。break-all:允许在单词内部任意位置换行,即使是在一个字符内也可以断开换行。长单词或者没有空格的文本(比如URL)时特别有用。keep-all:尽量不在单词内部断开换行,仅在必要的时候才允许断开换行,适合中文和日文等不使用空格分隔单词的语言。
/*结合 clamp() 函数和 line-height 的方式来实现多行文本截断,且设置行数&行高*/.text-container {display: flex; /* 使用 Flexbox 布局 */flex-direction: column; /* 垂直方向排列子元素 */max-height: calc(1.2em * 3); /* 显示大约三行文本 */overflow: hidden; /* 隐藏超出容器的内容 */}.text-container p {margin: 0; /* 去除段落的默认外边距 */line-height: 1.2em; /* 行高,根据需要调整 */}表单form:
placeholder="请输入手机号";  提示信息;点击账号,输入框也能获取焦点:for 属性指定了与该标签关联的表单元素的 id,这样用户点击标签时,对应的表单元素就会获得焦点或者选中。<label for="demo">账号:</label><input type="text" name="" id="demo">性别单选:男<input type="radio" name="gender">女<input type="radio" name="gender">爱好多选:吃饭<input type="checkbox">睡觉<input type="checkbox">打豆豆<input type="checkbox">下拉菜单:<select><option value="">所属校区</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="henan">河南</option></select>文本域:<textarea name="" id="" cols="30" rows="10"></textarea>阅读并接受《用户协议》:<input type="checkbox"> 阅读并接受<a href="http://www.baidu.com">《用户协议》</a>表格table:
td{ width="10px"}  设置单元格宽度;
border-collapse:collapse;  去掉单元格之间的间隙;使用在table标签上;
text-align: right;  单元格内文本右对齐;
cellspacing="0";  外间距;文本框input:
transition: all 2s;过渡效果--------------------------------效果设置------------------------------------
元素隐藏的三种方式:
display: none; 不显示,不占据位置;
visibility: hidden; 不显示,占据网页位置;
opacity: 0.5; 透明度,值为0时不显示,占据网页位置;
超出部分隐藏:
/*可以应用于包含块级元素或内联块级元素。这些属性可应用于任何具有限定高度或宽度的元素,以便控制元素内容溢出时的行为。*/
overflow:hidden;visible:默认值。内容不会被修剪,会呈现在元素框之外。hidden:内容会被修剪,并且不会显示溢出部分。scroll:如果内容溢出,则显示滚动条,允许用户滚动查看内容。auto:如果内容溢出,则显示滚动条,只在必要时显示滚动条。overlay:当内容溢出时,浏览器会显示一个滚动条,但内容不会移动,而是覆盖在元素上方。鼠标悬停:
a :hover{ }  鼠标悬停效果;
body:hover div{ display:none; }  使用body标签控制它的子元素div,只让div产生效果;
box-shadow: x轴偏移量 Y轴偏移量 阴影模糊程度 阴影扩展半径 阴影颜色 inset内阴影;
box-shadow: 3px 3px 9px 100px gray ; 盒子阴影;
text-shadow:  文字阴影;
opacity: 0.2; 透明效果;
background-color:rgba(x,x,x,x); 透明度在0~1之间;
浮动代码举例:

如果子盒子的子盒子也需要浮动在子盒子的某个位置(例如右下角),你可以继续使用 position 属性来实现这个布局。

<div class="parent-box"><div class="child-box"><div class="grandchild-box">浮动子盒子的子盒子</div></div>
</div>
.parent-box {position: relative; /* 使父盒子成为定位的参考点 */width: 300px; /* 父盒子的宽度 */height: 200px; /* 父盒子的高度 */background-color: #f0f0f0; /* 背景色,仅用于视觉效果 */border: 1px solid #ccc; /* 边框,仅用于视觉效果 */
}.child-box {position: absolute; /* 相对于父盒子定位 */bottom: 0; /* 距离父盒子底部0 */right: 0; /* 距离父盒子右侧0 */background-color: #ff5722; /* 背景色,仅用于视觉效果 */color: white; /* 文字颜色 */padding: 10px; /* 内边距 */position: relative; /* 子盒子的相对定位,使其子盒子可以以其为参考进行绝对定位 */
}.grandchild-box {position: absolute; /* 相对于子盒子定位 */bottom: 0; /* 距离子盒子底部0 */right: 0; /* 距离子盒子右侧0 */background-color: #4caf50; /* 背景色,仅用于视觉效果 */color: white; /* 文字颜色 */padding: 5px; /* 内边距 */
}
网上学习途径

w3school 菜鸟教程

MDN:https://developer.mozilla.org/zh-CN/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/60047.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

量化交易系统开发-实时行情自动化交易-Okex行情交易数据

19年创业做过一年的量化交易但没有成功&#xff0c;作为交易系统的开发人员积累了一些经验&#xff0c;最近想重新研究交易系统&#xff0c;一边整理一边写出来一些思考供大家参考&#xff0c;也希望跟做量化的朋友有更多的交流和合作。 接下来聊聊基于Okex交易所API获取行情数…

MyBatis项目的创建和增删查改操作详解

MyBatis项目的创建和增删查改操作详解 MyBatis是一款优秀的持久层框架&#xff0c;它支持自定义SQL、存储过程以及高级映射。MyBatis是基于JDBC实现的&#xff0c;但是比JDBC的操作更加方便&#xff0c;可以通过接口和XML来操作数据库。本文将详细介绍MyBatis项目的创建以及增…

OpenGL 进阶系列06 - OpenGL变换反馈(TransformFeedback)

一:概述 变换反馈(Transform Feedback)是 OpenGL 中的一项技术,允许你将顶点着色器的输出(例如变换后的顶点数据)直接传输到缓冲区,而不是将结果渲染到屏幕上。它在图形计算中非常有用,尤其在粒子系统、模拟、几何处理等场景中,可以用来获取顶点处理的中间结果,并将其…

测度论原创(三)

Morden Prob 文章目录 Morden ProbWeek3多维扩展和随机向量定理3.1推论&#xff1a;random variable的变换定理3.2 连续函数的可测性定理3.3 可测函数的线性组合关于拓展实数集的延伸定理3.4 可测函数的极限依旧为可测性随机变量的概率律&#xff08;Law of X X X&#xff09;…

macOS 应用公证指南:使用 fastlane 实现自动化公证流程

背景介绍 在 macOS 系统上,为了保护用户安全,Apple 要求开发者对未通过 Mac App Store 分发的应用程序进行公证(Notarization)。如果应用程序没有经过公证,用户在运行时会看到警告弹窗,这会影响用户体验。虽然开启沙箱模式的应用可以直接通过 App Store 分发来避免这个问题…

数学建模(基于Python实现)--灰色关联分析法讲解,含案例

前言 这是去年底学数学建模老哥的建模课程笔记&#xff1b; 未来本人将陆陆续续的更新数学建模相关的一些基础算法&#xff0c;大家可以持续关注一下&#xff0c;主要在于运用&#xff1b; 提示&#xff1a;数学建模只有实战才能提升&#x1f525;​&#x1f525;​&#x1f…

C++虚继承演示

在继承中如果出现&#xff1a; 这种情况&#xff0c;B和C都继承了A&#xff0c;D继承了B、C 在D中访问A的成员会出现&#xff1a; 这样的警告 是因为在继承时A出现两条分支&#xff1a;ABD、ACD 编译器不知道访问的A中的元素是经过B继承还是C继承 所以B、C在继承A时要用到…

硬件---1电路设计安全要点以及欧姆定律

前言&#xff1a; 一直搞的东西都偏软件&#xff0c;硬件也一直在学&#xff0c;元器件、基础电路知识、PCB设计、模电运放都学的马马虎虎&#xff0c;因此决定进行系统性学习&#xff0c;内容基本来源于手里的视频和书本以及自己的感悟。 一电路安全 1电路安全 在初期基础…

pytest简单使用

一&#xff1a;Mark 1.注册标记 在项目根目录下创建固定名为 pytest.ini 的配置文件&#xff0c;文件格式需要加上 [pytest] &#xff0c;然后通过 markers 注册自定义标记 2.贴上标记 通过pytest加上装饰器&#xff0c;然后pytest.mark.XX配置自定义的标记&#xff0c;一个…

[Meachines] [Medium] MonitorsThree SQLI+Cacti-CMS-RCE+Duplicati权限提升

信息收集 IP AddressOpening Ports10.10.11.30TCP:22&#xff0c;80 $ nmap -p- 10.10.11.30 --min-rate 1000 -sC -sV -Pn PORT STATE SERVICE VERSION 22/tcp open ssh OpenSSH 8.9p1 Ubuntu 3ubuntu0.10 (Ubuntu Linux; protocol 2.0) | …

二叉树-哈夫曼树的构造和应用

重点:哈夫曼树的构造和应用(编码) 选取完最小权值的两个节点后新结点的权值是二者之和,新节点可以和选取剩余的结点结合,也可以在剩余的里面选出最小两个结合后形成的新结点与第一个新结点结合(前提他们是最小的两个结点) 哈夫曼编码 哈夫曼编码优化 130为最小的带权路径长度 …

【Docker】自定义网络:实现容器之间通过域名相互通讯

文章目录 一. 默认网络&#xff1a;docker0网络的问题二. 自定义网络三. nginx容器指之间通过主机名进行内部通讯四. redis集群容器&#xff08;跳过宿主机&#xff09;内部网络通讯1. 集群描述2. 基于bitnami镜像的环境变量快速构建redis集群 一. 默认网络&#xff1a;docker0…

鸿蒙开发:ArkUI Toggle 组件

ArkUI提供了一套完整的UI开发工具集&#xff0c;帮助开发者高效完成页面的开发。它融合了语言、编译器、图形构建等关键的应用UI开发底座&#xff0c;为应用的UI开发提供了完整的基础设施&#xff0c;包括简洁的UI语法、丰富的UI功能以及实时界面预览工具等&#xff0c;可以支持…

CTF —— 网络安全大赛

前言 &#x1f4bb;随着大数据、人工智能的发展&#xff0c;人们步入了新的时代&#xff0c;逐渐走上科技的巅峰。 ⚔科技是一把双刃剑&#xff0c;网络安全不容忽视&#xff0c;人们的隐私在大数据面前暴露无遗&#xff0c;账户被盗、资金损失、网络诈骗、隐私泄露&#xff…

数据分析-43-时间序列预测之深度学习方法GRU

文章目录 1 时间序列1.1 时间序列特点1.1.1 原始信号1.1.2 趋势1.1.3 季节性和周期性1.1.4 噪声1.2 时间序列预测方法1.2.1 统计方法1.2.2 机器学习方法1.2.3 深度学习方法2 GRU2.1 模拟数据2.2 数据归一化2.3 生成滞后特征2.4 切分训练集和测试集2.5 模型训练2.6 模型预测3 参…

aosp15系统窗口闪屏原生bug-dim图层相关-你会修改吗?

背景 近期各个大厂已经开始准备aosp15的系统rom适配工作了&#xff0c;应该是想2025年初开发发布相关的新机型&#xff0c;所以慢慢的我们也要开始适应aosp15版本的相关问题的修改和研究哈。 近期就有相关学员朋友在做android15相关的dialog开发时候&#xff0c;发现了一个严…

[论文阅读]Enhanced Membership Inference Attacks against Machine Learning Models

Enhanced Membership Inference Attacks against Machine Learning Models 针对机器学习模型的增强型成员推理攻击 Enhanced Membership Inference Attacks against Machine Learning Models | Proceedings of the 2022 ACM SIGSAC Conference on Computer and Communication…

【架构论文-2】架构设计中存在的问题和改进方向

一、性能优化相关 当前情况 在高负载情况下&#xff0c;系统的响应时间出现了一定程度的延迟。特别是在业务高峰期&#xff0c;大量并发请求导致部分关键业务模块的处理效率降低&#xff0c;影响了用户体验。改进方向 计划引入性能分析工具对系统进行全面的性能剖析&#xff0…

嵌入式硬件电子电路设计(三)电源电路之负电源

引言&#xff1a;在对信号线性度放大要求非常高的应用需要使用双电源运放&#xff0c;比如高精度测量仪器、仪表等;那么就需要给双电源运放提供正负电源。 目录 负电源电路原理 负电源的作用 如何产生负电源 负电源能作功吗&#xff1f; 地的理解 负电压产生电路 BUCK电…

GB/T 28046.4-2011 道路车辆 电气及电子设备的环境条件和试验 第4部分:气候负荷(6)

写在前面 本系列文章主要讲解道路车辆电气及电子设备的环境条件和试验GB/T 28046标准的相关知识,希望能帮助更多的同学认识和了解GB/T 28046标准。 若有相关问题,欢迎评论沟通,共同进步。(*^▽^*) 第4部分:气候负荷 5. 试验和要求 5.8 流动混合气体腐蚀试验 5.8.1 目的…