H5 55-行高
Posted 甘林梦的开发之路
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5 55-行高相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>54-清空默认边距</title> <style> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin:0;padding:0 } p{ width: 610px; height: 110px; background-color: #cdcdcd; border: 1px solid #000000; } div{ box-sizing: border-box; width: 100px; height: 80px; border: 1px solid #000; line-height: 20px; /*line-height: 80px;*/ padding-top:20px; padding-bottom:20px; } </style> </head> <body> <!-- 1.什么是行高? 在CSS中所有的行都有自己的行高 注意点: 行高和盒子高不是同一个概念 行高指的是每行内容的高度 盒子高指的是元素的高度 规律: 1.文字在行高中默认是垂直居中的 2.在企业开发中我们经常将盒子的高度和行高设置为一样, 那么这样就可以保证一行文字在盒子的高度中是垂直居中的 简而言之就是: 要想一行文字在盒子中垂直居中, 那么只需要设置这行文字的"行高等于盒子的高"即可 3.在企业开发中如果一个盒子中有多行文字, 那么我们就不能使用设置行高等于盒子高来实现让文字垂直居中, 只能通过设置padding来让文字居中 --> <!--<p>葬爱:非主流文化的常用词，是当今网络流行术语.且流行于非主流杀马特之中。葬，即埋葬，爱，即爱情，翻译成外语就bury love</p>--> <!--<div>我是文字我是文字我是文字</div>--> <!--<div>我是文字</div>--> <div>我是文字我是文字我是文字</div> </body> </html>
以上是关于H5 55-行高的主要内容，如果未能解决你的问题，请参考以下文章