CSS里不为人知的秘密(02)之常见属性使用
CSS里不为人知的秘密(02)之常见属性使用
01) vertical-align垂直对齐
用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。
针对 inline-block 内联块元素的时候,需要一个参考对象(必须2个元素)
内联块元素水平垂直居中 vertical-align

<style> .container{ width: 600px; height: 600px; background-color: #c0c0c0; text-align: center; } .box{ width: 200px; height: 200px; background-color: #ff6b81; display: inline-block; /* 内联元素 */ vertical-align: middle; } .box2{ height: 100%; width: 40px; } </style> <div class="container"> <div class="box"></div> <!-- box2 主要是测试说明一下(vertical-align)垂直居中,需要参考对象--> <div class="box box2">让box1 垂直居中</div> </div>
02) 常见公用样式reset.css

/****** reset.css 常见公用样式 ******/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,hr,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; } body { color:#555;background:#FFF; font-size:16px; font-family: "microsoft yahei", sans-serif, arial; } a {text-decoration: none;color: #1a1b1c;} a:hover{text-decoration:none;} img {border: 0;vertical-align: middle;} ul,ol{list-style:none;} table{border-collapse:collapse;border-spacing:0;} p{word-wrap:break-word;} .clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;} .clearfix { *zoom:1; }
03)
-
-
将
li
写在同一行 -
将
ul
内的字符尺寸直接设为 0,即 font-size:0; 不足:ul
中的其他字符尺寸也被设 为 0,需要额外重新设定其他 字符尺寸,且在 Safari 浏览器依然会出现空白间隔 -
消除
ul
的字符间隔letter-spacing: -8px;,同时设置li的字符间隔letter-spacing: normal;

<style> ul { letter-spacing: -8px } ul li { list-style:none; display: inline-block; letter-spacing: normal; } </style> <ul> <li>001</li><li>002</li><!-- 解决 003 004 005 之间空白字符 --> <li>003</li> <li>004</li> <li>005</li> </ul>
04)
width:100%: 是子元素的 content 撑满父元素的content,如果子元素还有 padding、border 等属性,可能会造成子元素区域溢出显示;
width:auto: 是子元素的 content + padding + border + margin 等撑满父元素的 content 区域
如果是 height 的话,是相对于包含块的高度
如果是 padding 或者 margin 竖直方向的属性则是相对于包含块的宽度
W3-CSS属性查询___padding-properties
The percentage is calculated with respect to the width of the generated box’s containing block, even for ‘padding-top’ and ‘padding-bottom’. If the containing block’s width depends on this element, then the resulting layout is undefined in CSS 2.1
译文:
<百分比>
即使对于 ‘padding-top’和’padding-bottom’而言,百分比也是相对于所生成的盒子的包含块的宽度来计算的。如果包含块的宽度取决于此元素,则CSS 2.1中未定义结果布局。与边距属性不同,填充值的值不能为负。与边距属性一样,填充属性的百分比值是指生成的框的包含块的宽度

<style> .fei { width: 200px; height: 50px;/* warning: 这个高度没有作用 */ } .fei div { background: #ff6b81; padding-left: 50%; padding-right: 50%; padding-top: 50%; /* 基于 [ 父元素的宽度 ]的百分比的内边距 */ padding-bottom: 50%; /* 基于 [ 父元素的宽度 ]的百分比的内边距 */ } </style> <div class="fei"> <div>xxx</div> </div>
06) overflow 文本溢出省略号
单行文本溢出后省略

<style> div { width: 400px; height: 60px; border: 2px solid #ff6b81; } p { /* 核心代码 */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style> <div> <p> fei:WEB前端开发三剑客就是HTML、CSS、JavaScript fei:WEB前端开发三剑客就是HTML、CSS、JavaScript fei:WEB前端开发三剑客就是HTML、CSS、JavaScript </p> </div>
多行文本溢出后省略

<style> div { width: 400px; height: 60px; border: 2px solid #ff6b81; } p { /* 核心代码 */ max-height: 40px; overflow: hidden; line-height: 20px; } </style> <div> <p> fei:WEB前端开发三剑客就是HTML、CSS、JavaScript fei:WEB前端开发三剑客就是HTML、CSS、JavaScript fei:WEB前端开发三剑客就是HTML、CSS、JavaScript </p> </div>
多行文本溢出后省略(出现省略号)

<style> div { width: 400px; height: 60px; border: 2px solid #ff6b81; } p { /* 核心代码 */ max-height: 40px; overflow: hidden; line-height: 20px; position: relative; } p::after { /* 核心代码 */ position: absolute; content: '...'; right: 0; bottom: 0; background-color: #fff;/* 白色背景 */ padding: 0 20px 0 10px; } </style> <div> <p> fei:WEB前端开发三剑客就是HTML、CSS、JavaScript fei:WEB前端开发三剑客就是HTML、CSS、JavaScript fei:WEB前端开发三剑客就是HTML、CSS、JavaScript </p> </div>
07) 背景透明---显示下层
background: transparent;
background-color: transparent;
其他
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!