zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    [NOI2003][bzoj1507] 文本编辑器 editor [splay]
    GDKOI 游记
    [填坑完毕] 寒假作业计划
    省选算法学习-数据结构-splay
    NOIP2017游记
    真·总结
    赛前
    十一黄(xun)金(lian)周感想
    9.17 模拟赛
    9.14 模拟赛
  • 原文地址:https://www.cnblogs.com/ljcgood66/p/6580061.html
Copyright © 2011-2022 走看看