zoukankan      html  css  js  c++  java
  • 行盒与行块盒

    一.行盒

    什么是行盒:display属性为inline的元素。

    常见行盒:文字元素:span、abbr、em、i、strong、b 图片和多媒体:img、video、audio 
    含义:页面具体内容(文字、图片、多媒体)都会生成行盒,(注意:文字:必须放置到行盒内,否则会生成匿名行盒;图片和多媒体:默认会生成行盒,通常不要对它们的盒子类型进行改动)

    行盒显著特征

    1.行盒可被折断,因为内容可被折断换行(可通过word-break属性设置截断位置);

    2.同一个包含块中,连续的多个行盒水平依次排列 ;

    3.空白折叠的规则仅适用于行盒内部和行盒之间 ;

    4.行盒与行盒之间的距离可使用水平方向上的margin和padding进行设置。

      

    行盒的尺寸

    行盒可替换元素:图片和多媒体;

    a.与块盒完全一致;

    b.对于图片和视频,仅设置宽高中的一个时,另一个会自动按比例适应

    c.对于图片和视频,如果同时设置宽高,可通过object-fit属性设置适应方式

    行盒文字类元素:

    设置width与height无效;垂直方向上的margin、border、padding不占据布局空间;可使用line-height设置一行的文字高度。

    行盒的位置

    行盒在包含块中,会避开浮动和常规流,浮动和绝对定位的盒子自动变为块盒; 
    包含行盒的块盒,可使用text-align调整行盒在它内容的对齐方式; 
    行盒之间的对齐可以使用vertical-align调整

    二.行块盒

    什么是行块盒 : display 属性值为inline-block 元素生成的盒子 
    与行盒的区别 

    a.行块盒内部可以放块盒,行盒不行 ;

    b.行块盒的所有盒模型尺寸都是有效的,而行盒不行 ;

    c.行盒垂直方向上margin、border、padding的尺寸不占据空间 ;

    d.行高不能设置宽高 ;

    e.行块盒通常用于宽高自动的水平居中.

      

     

  • 相关阅读:
    php出现“syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM”错误的一种情况,及解决方法
    nginx配置:支持phpfastcgi,nginx和phpcgi通信,部分nginx常量解释
    一步步构建大型网站架构(转/收藏)
    PHP中$_REQUEST中包含的数据,数据被覆盖问题
    使用linux时碰到的两个问题
    小谈字节序
    备忘录(1)
    [c#]如何编写需要授权才能使用的WebService?
    [XML]XPath小记
    [Misc]如何得知系统存在哪几个COM口?
  • 原文地址:https://www.cnblogs.com/youwei716/p/10993413.html
Copyright © 2011-2022 走看看