<body> <div>hello</div> <span>world</span> <img src="./imgs/路飞.jpg" alt="路飞"></body>div,span,img事业单位专业知识{ width:100px; height:100px; background-color:lightskyblue; margin:10px;} 块级元素可以设置width、height；
有的内联元素设置width、height后，无效，如span；
有的内联元素设置width、height后，有效，如img。img 是替换元素。
浏览器会根据 替换元素 的属性来显示内容，且通常都拥中国人民大学在哪有自己的宽高或宽高比。
img是替换元素，浏mgo是什么化学元素览器会根据img的src属性显示图片；
input是替换元素，浏览器会根据input的type属性来显示控件；
canvas是替换元素，它的默认尺寸是300*150。
div、p、span等大部分html标签是 非替换元素，它们把要显示的内容交给浏览器，浏览器则直接显示出来。
body{ margin:0; } .container{ width:160px; float:left; margin-right:10px; } .content{ background-color:lightgoldenrodyellow; } .higher{ line-height:50px; }<body> <div class="container"> <span class="content">这个世界随时都要崩塌</span> <span class="content">从前我太适应悲伤</span> </div> <div class="container"> <span class="content higher">这个世界随时都要崩塌</span> <span class="content higher">从前我太适应悲伤</span> </div></body><body> <div><span></span></div></body> 将空span的display设置为 inline-block后，形成了一个 行框盒子，每个行框盒子前面都有一个幽灵空白节点，line-height:100px实际作用在幽灵空白节点上，因此撑高了div。
所以，由于幽灵空白节点的存在，块级元素的可视高度也受行高影响。
div{ line-height:100px; width:100px; border:1px solid lightskyblue; }<body> <div><span style="display:inline-block"></span></div></body> body{ margin:0; } .container{ width:160px; float:left; margin-right:10px; } .content{ background-color:lightgoldenrodyellow; line-height:50px; }<body> <div class="container"> <span class="content">这个世界随时都要崩塌</span> <span class="content">从前我太适应悲伤</span> </div> <div class="container"> <span class="content" style="height:50px;display:block">这个世界随时都要崩塌</span> <span class="content" style="height:50px;display:block">从前我太适应悲伤</span> </div> <div class="container"> <span class="content" style="height:50px;display:block">这个世界随时都要崩塌</span> </div></body> 行距 = 行高 – 字体大小。
半行距 = 行距 / 2。
借助 行距的上下等分机制，可以使用 行高 实现 单行文本的垂直居中。
div{ width:200px; line-height:100px; border:1px solid lightskyblue; text-align:center; }<body> <div>这个世界随时都要崩塌</div></body>先看个例子。
<body> <div class="box"> <p>这个世界随时都要崩塌 从前我太适应悲伤</p> </div> <div class="box"> <p>这个世界随时都要崩塌 从前我太适应悲伤</p> </div> <div class="box"> <p>这个世界随时都要崩塌 从前我太适应悲伤</p> </div> <div class="box"> <p>这个世界随时都要崩塌 从前我太适应悲伤</p小学语文教师年度考核个人总结> </div></body> div{ width:200px; line-height:100px; border:1px solid lightskyblue; text-align:center; } .box{ float:left; margin-rig心灵控制术ht:10px; } 用下面这个图来一步步理解。
“这个世界随时都要崩塌 从前我太适应悲伤”，这一行文本形成一个行框盒子。
line-height:20px作用在行框盒子前面的幽灵空白节点上， p 因此有了 (20px)*2=40px 的高度。
display:inline-block使p成为一个行框盒子，line-height:100px作用在行框盒子前的幽灵空白节点上，div因此有了 100px的高度。
如果没有p的vertical-align:middle，此时 多行文本并不是垂直居中，而是 偏上。
此时肉眼也可辨识出来，如果你更愿意相信数据的话，给你。
所以，要实现多行文本垂直居中，其css样式如下：
div{ width:200px; line-height:100px; border:1px solid lightskyblue; text-align:center; } p{ line-height:20px; display:inline-block; vertical-align: middle; text-align:left; }<body> <div> <p>这个世界随时都要崩塌 从前我太适应悲伤</p> </div></body>本文地址：https://blog.csdn.net/qzw752890913/article/details/107518476
本文发布于:2023-04-03 19:01:26，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/d2d184a28bdb66c2fbc4d9c2b6c016f2.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：【css】利用line.doc
本文 PDF 下载地址：【css】利用line.pdf
| 留言与评论（共有 0 条评论） |
div