zoukankan      html  css  js  c++  java
  • css笔记

    一、line-height

    line-height: 指两行文字基线之间的距离。

    行高200px表示两行文字基线之间的距离是200px;

    二、基线:baseline

    字母x下边缘的位置

    基线是任意线定义的根本(底线,中线,顶线,文本上边缘线,文本下边缘线等)

    不同语言体系,基线位置不一样。

    相同语言的不同字体,基线位置也不一样

    三、行高让单行文本垂直居中

    并不是真的垂直居中!!只有字体大小为0的时候,才能真正的垂直居中。

    四、行内框盒子模型

    1. 内容区域(content area)

    围绕文字看不见的盒子,其大小跟字体大小有关。范围大概就是选中单行文本后,你选中的区域了。

    2. 内联盒子(inline boxes)

    • a) 内联盒子

    就像span、a、em、图片按钮等这些inline水平的标签一样,内联盒子会排成一样显示。区域大小是文字内容的范围。

    • b) 匿名内联盒子

    内联盒子的一种,当纯文本没有内联标签环绕的时候,就是匿名内联盒子。

    3. 行框盒子(line boxes)

    文字每一行就是一个行框盒子。
    每个行框盒子又是由一个一个的内联盒子组成。

    4. 包含盒子(containint box)

    每个包含盒子由一行一行的包含盒子组成。
    就像一个block水平的元素

    5. 总结:

    包含盒子
        行框盒子
            内联盒子+内容区域
    

    五、内联元素的高度是由行高决定的

    内容区域(单行文字)高度【即字体大小】 + 行间距 = 行高;
    即高度的表现准确来说不是行高,而是内容区域和行间距。

    行高决定内联盒子高度。

    行间距可大可小,甚至可为负值。

    多行文本的高度由单行文本高度累加

    六、line-height的各类属性值

    1. normal 默认属性值

    跟着用户的浏览器走。与元素字体关联
    以上原因,不推荐使用。因为在不同人的电脑上会有不同的高度差距表现。
    input框等元素默认行高是normal

    2. 数值。比如1.5。

    根据当前元素文字的font-size大小计算

    假设当前元素文字大小设置为20px,那么当前元素或者继承的父元素的行高是1.5,则当前元素实际行高值为1.5*20 = 30px;

    3. 带长度单位的数值。

    比如1.5em、1.5rem、20px、20pt等

    4. 百分比单位的数值。比如150%

    注意:使用百分比值作为行高值,相对于设置了该line-height属性的元素的font-size大小计算。

    也就是说,line-height百分比值在哪个元素身上,那么最终值就是这个元素的字体大小*这个元素的行高值。其他元素继承了这个元素的行高时,不管你的字体多大都没用。

    假设当前元素文字大小设置为20px,那么当前元素或者继承的父元素的行高是150,当前元素父元素的字体大小是14,则当前元素实际行高值为150% * 14 = 自己算,结果不重要,注意理解他的计算方式。

    与line-height: 1.5;的区别就是:150%计算行高值时,任何元素中,都是乘与固定的父元素文字大小值。

    5. inherit 继承

    ie8+以上浏览器支持。
    特殊点的,input框等元素默认行高是normal,使用inherit可以让文本框样式可控性更强。尽量别用normal,因为normal也是根据不同浏览器不同元素不同字体大小实现的。非常不可控。

    八、语言苍白无力,line-height数值和百分比值区别如下:

    比较行高设置为1.5倍数值或150%/1.5em时的具体区别:

    对于我们理论计算出来的行高值,支撑的事实如下图:

    第一张图的:

    第二张图的:

    150%和1.5em的一致,这里只实验了150%。事实证明,直接将150%改成1.5em。原有效果也灭有变化。

    九、line-height与图片的表现

    1. 行高不会影响图片的实际占用高度。而改变的是与行高在同一个元素中的文字的行高(也就是文字占据的内容高度)。如果没有文字那就有一个匿名内联幽灵元素存在(比如换行就会有看不见的空格元素)

    另外,图片属于内联块元素,在不做设置的情况下,其对齐方式是baseline基线对齐,也就是和文字x的下边缘对齐。

    2. 消除图片底部和父元素的间距方法:

    a). 图片设置display: block; //因为基线对齐的原则只适用于内联元素及内联块元素。

    b). 图片设置vertical-align: bottom;

    c). 父元素设置line-height: 0;

    十、利用line-height实现垂直居中效果

    1. 大小不固定的图片 垂直居中效果

    做法:

    <div class="box">
        <img src="https://img3.mukewang.com/57a6f85b00013c7202090209-100-100.jpg" alt="">
    </div>
    
    /*核心代码*/
    .box{
        line-height: 300px;
        text-align: center;
    }
    .box>img{
        vertical-align: middle;
    }
    

    缺点描述:这种代码实现的居中效果,middle并不是绝对居中的。而是**基线往上1/2x高度的位置。

    经过试验我发现,将after伪类的行高/高度设置为91px,其上边线就能和图片下边线重合了,也就是说,图片虽然看上去垂直居中了,但其实稍稍往下偏移了 4像素

    所以,要想绝对的垂直居中,有了上边的核心代码设置外,还要加一个margin-top: -4px;就可以啦!

    并且,这个-4值是通过我本案例中计算出来的,仅适用于本案例,body是默认字体16px的情况下。其他情况估计还要具体测量计算。但是总之margin-top:负值;这个思路是没错的了。

    根本的解决方法是父元素字体大小设为0,让基线、中心线、行高线浑然一条即可。

    另外,这种写法只兼容到ie8+

    2. 多行文本水平垂直居中

    多行文本水平垂直居中的原理跟上一页图片的实现是一样的,区别在于要把多行文本所在的容器的display水平转换成和图片一样的,也就是inline-block,以及重置外部继承的text-align和line-height属性值。

    <div class="content-box">
        <div class="content">
          我是多行文本。多行文本水平垂直居中的原理跟上一页图片的实现是一样的,区别在于要把多行文本所在的容器的display水平转换成和图片一样的,也就是inline-block,以及重置外部继承的text-align和line-height属性值。
        </div>
    </div>
    
    .content-box{
          /* 核心: */
          line-height: 300px;
          text-align: center;
    }
    .content{
          /* 核心: */
          display: inline-block;
          vertical-align: middle;
          /* 覆盖:继承自父元素、用于布局的代码 */
          line-height: 21px;
          text-align: left;
          /* 具体情况具体分析,本案例字体是16px,差距就是4像素。 */
          margin-top: -4px;
        }
    

    完整代码:

    总结:要想绝对的垂直居中,有了上边的核心代码设置外,还要加一个margin-top: -4px;就可以啦!不过具体情况具体分析,换个页面,字体大小不一样,对行高的影响也不一样,自然偏差也不一定是4像素,新的负数值再重新计算即可。

    十一、line-height代替height,避免ie6/7下触发haslayout

    即在ie6/7下,设置元素的高度属性会触发haslayout。
    但是行高设置值不会触发。

    元素一旦触发haslayout,子元素会冲破父元素的宽度限制,全屏100%宽度展示。父元素包裹性收到破坏。

    这个我就偷懒不自己写代码了,直接截图:

    其实设置了line-height后,height就不用设置了!

  • 相关阅读:
    Java的静态块与实例块(转)
    Programming Ability Test学习 1031. Hello World for U (20)
    Programming Ability Test学习 1011. World Cup Betting (20)
    Programming Ability Test学习 1027. Colors in Mars (20)
    Programming Ability Test学习 1064. Complete Binary Search Tree (30)
    Programming Ability Test学习 1008. Elevator (20)
    【maven详解-生命周期】Maven的生命周期和插件
    【maven详解-插件】maven插件学习之源码插件Source Xref
    $(document).ready(){}、$(fucntion(){})、(function(){})(jQuery)onload()的区别
    你还没真的努力过,就轻易输给了懒惰
  • 原文地址:https://www.cnblogs.com/padding1015/p/9588890.html
Copyright © 2011-2022 走看看