1.width,height宽度高度。
<!DOCTYPE html>
<html><head><title>Width Height</title><style type="text/css">body {font-family: Arial, Verdana, sans-serif;color: #111111;}div {width: 400px;height: 300px;background-color: #ee3e80;}p {height: 75%;width: 75%;background-color: #e1ddda;}</style></head><body><div><p>The Moog company pioneered the commercial manufacture of modular voltage-controlled analog synthesizer systems in the early 1950s.</p></div></body>
</html>
使用百分数时，盒子的大小与浏览器窗口的大小有关。如果是盒子套盒子，百分数就是相当于外部盒子而言。比如P就是300*75%=225
em值盒子大小以盒子中的文本为基准
2.宽度限制min-width,max-width
保证在不同的设备上显示的效果不会太窄，宽。
<html><head><title>Min Width Max Width</title><style type="text/css">body {font-family: Arial, Verdana, sans-serif;color: #111111;}th {border-bottom: 1px solid #0088dd; text-align: left; color: #0088dd;font-weight: normal;}td {min-width: 150px;min-height: 200px;vertical-align: top;line-height: 1.4em;}td.description {min-width: 450px;max-width: 650px;text-align: left;padding: 5px;margin: 0px;}</style></head><body><table><tr><th>Photo</th><th>Description</th><th>Price</th></tr><tr><td><img src="images/rhodes.jpg" width="200" height="150" alt="Fender Rhodes" /></td><td class="description">The Rhodes piano is an electro-mechanical piano, invented by Harold Rhodes during the fifties and later manufactured in a number of models, first in collaboration with Fender and after 1965 by CBS. It employs a piano-like keyboard with hammers that hit small metal tines, amplified by electromagnetic pickups.</td><td>$1400</td></tr><tr><td><img src="images/wurlitzer.jpg" width="200" height="150" alt="Wurlitzer EP200" /></td><td class="description">The Wurlitzer electric piano is an electro-mechanical piano, created by the Rudolph Wurlitzer Company of Mississippi. The Wurlitzer company itself never called the instrument an "electric piano", instead inventing the phrase "Electronic Piano" and using this as a trademark throughout the production of the instrument. It employs a piano-like keyboard with hammers that hit small metal tines, amplified by electromagnetic pickups.</td><td>$1600</td></tr><tr><td><img src="images/clavinet.jpg" width="200" height="150" alt="Hohner Clavinet D6" /></td><td class="description">A Clavinet is an electronically amplified clavichord manufactured by the Hohner company. Each key uses a rubber tip to perform a hammer on a string. Its distinctive bright staccato sound is often compared to that of an electric guitar. Various models were produced over the years, including the models I, II, L, C, D6, and E7.</td><td>$1200</td></tr></table></body>
</html>
3.高度限制 min-height,max-height
<!DOCTYPE html>
<html><head><title>Min Height Max Height</title><style type="text/css">body {font-family: Arial, Verdana, sans-serif;color: #111111;}h2, p {width: 400px;font-size: 90%;line-height: 1.2em;}h2 {color: #0088dd;border-bottom: 1px solid #0088dd;}p {min-height: 10px;max-height: 30px;}</style></head><body><h2>Fender Mustang</h2><p>The Fender Mustang was introduced in 1964 as the basis of a major redesign of Fender's student models then consisting of the Musicmaster and Duo-Sonic. It was originally popular in sixties surf music and attained cult status in the 1990s largely as a result of its use by a number of alternative rock bands.</p><h2>Fender Stratocaster</h2><p>The Fender Stratocaster or "Strat" is one of the most popular electric guitars of all time, and its design has been copied by many guitar makers. It was designed by Leo Fender, George Fullerton and Fredie Tavares in 1954.</p><h2>Gibson Les Paul</h2><p>The Gibson Les Paul is a solid body electric guitar that was first sold in 1952. The Les Paul was designed by Ted McCarty in collaboration with popular guitarist Les Paul, whom Gibson enlisted to endorse the new model. It is one of the most well-known electric guitar types in the world.</p></body>
</html>
4.内容溢出overflow
告诉浏览器当盒子的内容超过盒子本身时如何显示，它有像个属性值可供选择。
hidden溢出部分隐藏
scroll添加滚动条
<!DOCTYPE html>
<html><head><title>Overflow</title><style type="text/css">body {font-family: Arial, Verdana, sans-serif;color: #111111;font-size: 90%;line-height: 1.2em;width: 200px;}h2 {color: #0088dd;border-bottom: 1px solid #0088dd;}p {min-height: 30px;max-height: 85px;}p.one {overflow: hidden;}p.two {overflow: scroll;}</style></head><body><h2>Fender Stratocaster</h2><p class="one">The Fender Stratocaster or "Strat" is one of the most popular electric guitars of all time, and its design has been copied by many guitar makers. It was designed by Leo Fender, George Fullerton and Fredie Tavares in 1954.</p><h2>Gibson Les Paul</h2><p class="two">The Gibson Les Paul is a solid body electric guitar that was first sold in 1952. The Les Paul was designed by Ted McCarty in collaboration with popular guitarist Les Paul, whom Gibson enlisted to endorse the new model. It is one of the most well-known electric guitar types in the world.</p></body>
</html>
5.边框，外边距和内边距
（1）每个盒子都有边框，边框将一个盒子的边缘和另一个盒子隔开。
（2）外边距位于边框的边缘之外。你可以通过设置外边距的宽度在两个相邻盒子的边缘之间创建空隙
（3）内边距是指盒子边框与盒子所包含内容之间的空隙。增加内边距可以提高内容的可读性。
5.边框宽度border-width
该属性可以是像素值也可以是以下值之一thin,medium,thick。不能是百分数
也可以通过border-top-width,border-right-width,border-bottom-width,border-left-width控制
border-width:2px 1px 1px 2px；顺时针上右下左
<!DOCTYPE html>
<html><head><title>Border Width</title><style type="text/css">body {font-family: Arial, Verdana, sans-serif;color: #111111;}p {width: 200px;border-style: solid;}p.one {border-width: 2px;}p.two {border-width: thick;}p.three {border-width: 1px 4px 12px 4px;}</style></head><body><p class="one">Hohner's "Clavinet" is essentially an electric clavichord.</p><p class="two">Hohner's "Clavinet" is essentially an electric clavichord.</p><p class="three">Hohner's "Clavinet" is essentially an electric clavichord.</p></body>
</html>
6.边框样式border-style
solid,实线。dotted方形点，dashed 虚线。double 双实线 groove雕入页面效果。ridge，凸起。inset嵌入，outset凸出屏幕。hidden/none不显示
同样可以用border-top-style,border-right-style,border-bottom-style,border-left-style;
<!DOCTYPE html>
<html><head><title>Border Style</title><style type="text/css">body {font-family: Arial, Verdana, sans-serif;color: #111111;}p {width: 250px;border-width: 3px;}p.one {border-style: solid;}p.two {border-style: dotted;}p.three {border-style: dashed;}p.four {border-style: double;}p.five {border-style: groove;}p.six {border-style: ridge;}p.seven {border-style: inset;}p.eight {border-style: outset;}</style></head><body><p class="one">Wurlitzer Electric Piano</p><p class="two">Wurlitzer Electric Piano</p><p class="three">Wurlitzer Electric Piano</p><p class="four">Wurlitzer Electric Piano</p><p class="five">Wurlitzer Electric Piano</p><p class="six">Wurlitzer Electric Piano</p><p class="seven">Wurlitzer Electric Piano</p><p class="eight">Wurlitzer Electric Piano</p></body>
</html>
7.边框颜色。rgb,十六进制，颜色名
border-top-color,border-right-color,border-bottom-color,border-left-color。
<!DOCTYPE html>
<html><head><title>Border Color</title><style type="text/css">body {font-family: Arial, Verdana, sans-serif;color: #111111;}p {border-style: solid; border-width: 3px;width: 200px;}p.one {border-color: #0088dd;}p.two {border-color: #bbbbaa #111111 #ee3e80 #0088dd;}</style></head><body><p class="one">The ARP Odyssey was introduced in 1972.</p><p class="two">The ARP Odyssey was introduced in 1972.</p></body>
</html>
8.快捷方式写在一起
body {font-family: Arial, Verdana, sans-serif;color: #111111;}p {width: 250px;border: 3px dotted #0088dd;}
CSS盒子
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/809415.html
如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！相关文章
【Shiro】4.Springboot集成Shiro
https://blog.csdn.net/sco5282/article/details/134016549
前面已经学习了Shiro快速入门和缓存 。现在假定实际业务中需要完成以下功能：
1. 包含页面登录和首页。
2. 登录时需要连接数据库，完成登录认证和授权。
3. 登录时，密码需要加密。
4. 登录和授权信息能够缓存。
5. …
基于3peak 17串AFE芯片TPB76016-QP3R的电池BMS控制板方案
随着电动汽车、可再生能源存储设备以及便携式电子产品的普及，对高效、安全的电池管理系统（BMS）需求日益增加。17通道高精度电池管理产品—TPB76016，内置高精度基准，工作温度支持-40C to +125C，可广泛应用于动力电池、储能电池、以及其他消费类电池的BMS控制板。TPB76016-…
mysql登录遇到ERROR 1045问题解决方法
遇到 MySQL 登录时出现 ERROR 1045（访问被拒绝，用户名或密码错误），可以通过以下步骤来解决：
1. 确认用户名和密码检查用户名和密码：确认在连接数据库时输入的用户名和密码是否正确。
尝试在命令行中连接数据库，确认是否能成功登录：bashmysql -u your_username -p2. 重置…
网站提示连接数据库错误怎么解决
解决网站连接数据库错误通常需要检查以下几个方面：检查数据库连接参数确认数据库地址（hostname）、端口号、用户名和密码是否正确。
检查数据库名称是否正确。检查网络连接确保服务器与数据库之间的网络连通性正常。
如果是在云环境中，检查安全组设置或防火墙规则是否允许从…
react 知识点汇总（非常全面）
React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并维护。它的核心理念是“组件化”，即将用户界面拆分为可重用的组件。
React 的组件通常使用 JSX（JavaScript XML）。JSX 是一种 JavaScript 语法扩展，允许开发者在 JavaScript 代码中编写类似 HTML 的结构。…
2024高校网络安全管理运维赛 wp
0x00 前言本文是关于“2024高校网络安全管理运维赛”的详细题解，主要针对Web、Pwn、Re、Misc以及Algorithm等多方向题目的解题过程，包含但不限于钓鱼邮件识别、流量分析、SQLite文件解析、ssrf、xxe等等。如有错误，欢迎指正。0x01 Misc签到给了一个gif，直接在线分帧得到syn…
张量矩阵乘法分块乘法概述
张量矩阵乘法分块乘法概述
介绍一下矩阵计算相关的内容, 从最基本的算法，到Cutlass这些线性代数模版库, 特别是Layout代数相关的内容,再逐渐细化到一些硬件实现访存优化和一些算子融合。
6.3.1 GEMM概述
1. GEMM定义
对于一个矩阵乘法, 定义如下： （6-1）一个矩阵乘法定义，如…