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>
时间: 2024-12-17 15:15:09

H5 55-行高的相关文章

line-height行高与图片的隐匿文本间隙消除方法

1.块级元素中插入一个内联img元素后,产生多余间隙 代码 消除图片底部间隙几种方法 1.图片与底线对齐 2.图片元素块状化-无基线对齐 3.行高足够小,基线上移 4.消除隐匿文本字体大小 源码 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 &l

SQL Server 2012笔记分享-55:高可用知识总结

------------------------------------------------------------------------------------------------------------- 故障转移群集 虽然群集的共享存储是单点的,但是从存储层面来看,是配置了存储的冗余的,所以也一定程度上实现了冗余. 在群集模式下,一个SQL群集实例只在一个节点上是活跃的,即同一时刻每个SQL群集实例的服务只在群集中的一个节点上是处于运行的状态 ,所以如果有多个数据库,想把数据库放

Web打印连续的表格,自动根据行高分页

拿到这个需求,我已经蛋碎了一地,经过N天的攻克,终于是把它搞定了,只是不知道会不会在某种情况下出现BUG.表示我心虚没有敢做太多的测试.... ----------------------------------------------------------废话分割线----------------------------------------------------------- 注:我们的系统是基于ligerui这个一堆bug的插件的. 详细需求: 1.任意一个表格,行高不均匀且不相等:

[Flex] 组件Tree系列 —— 运用variableRowHeight和wordWrap设置可变行高

mxml: 1 <?xml version="1.0" encoding="utf-8"?> 2 <!--功能描述:运用variableRowHeight和wordWrap设置可变行高--> 3 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 4 xmlns:s="library://ns.adobe.com/flex/spark"

line-height 行高

line-height 行高指一行文字的高度,具体来说是指两行文子间基线间的距离      line-height 与 font-size 的计算值之差(行距)分为两半,分别加到一个文本行内容的顶部和底部.可以包含这些内容的最小框就是行框. 行高是指上下文本行的基线间的垂直距离,即图中两条红线间垂直距离. 行距是指一行底线到下一行顶线的垂直距离,即第一行粉线和第二行绿线间的垂直距离. 半行距是行距的一半,即区域3垂直距离/2,区域1,2,3,4的距离之和为行高,而区域1,2,4距离之和为字体si

tableView计算动态行高的总结

研究tableView怎么计算动态行高研究了两天一直还不太会,今天最终做出来了想要的效果. 首先.我在网上搜集了非常多资料,各种大神的总结,然后開始看.研究.试验,基本思路都是一样的. 1.一定要将label的numberOfLine设为0 2.获得文字信息所须要的size 3.将label的height设为titleSize.height 4.在- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIn

【转】css行高line-height的一些深入理解及应用

一.前言 前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”,是个不错的文章,学到了不少东西,建议您看看. 这里,我也要讲讲我对line-height的一些理解,所讲解的东西绝大多数与上面提到的“深入理解css 行高”是不重复的,可以说是补充或是另外一个角度的思考.另外,将结合实际,展示line-height的一些特性和一些常见应用,帮助您对css行高line-height的理解.所讲述的并不一定都是正确的,欢迎指正欢迎交流. 二.一些字面意思“行高”顾名思意指一行文字的高度

在固定宽度 下计算出实际的行高

//根据字符串内容的多少  在固定宽度 下计算出实际的行高 - (CGFloat)HelperTextHeightFromTextString:(NSString *)text width:(CGFloat)textWidth fontSize:(CGFloat)size { if ([self heperGetCurrentIOS] >= 7.0) { //iOS7之后 /* 第一个参数: 预设空间 宽度固定  高度预设 一个最大值 第二个参数: 行间距 如果超出范围是否截断 第三个参数: 属

[转]对tableView三种计算动态行高方法的分析

tableView是一个神奇的东西,可以这么说,就算是一个初学者如果能把tableView玩的很6,那编一般的iOS的需求都问题不大了.tableView是日常开发中用烂了的控件,但是关于tableView中的自定义cell的动态行高,还是有一些玄机的.笔者本次主要是因为预估行高的方法的问题作为了一个契机顺带写了此文对几种动态行高方法的分析. 旧方法 现在常规的动态行高的计算方法还是用 [str boundingRectWithSize:size options:NSStringDrawingU

DataGridView使用技巧五:自动设定列宽和行高

一.设定行高和列宽自动调整 设定包括Header和所有单元格的列宽自动调整 1 //设置包括Header和所有单元格的列宽自动调整 2 this.dgv_PropDemo.AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.AllCells; 设定包括Header和所有单元格的行高自动调整 1 //设置包括Header和所有单元格的行高自动调整 2 this.dgv_PropDemo.AutoSizeRowsMode = DataGridV