HTML行盒

行盒：页面的具体内容（文字、图片、多媒体）都会生成行盒

        文字：必须放在在行盒中，否则会生成匿名行盒

        图片、多媒体默认会生成行盒

        块盒包含行盒：块盒内放置行盒

                                 行盒内尽量不放置块盒

行盒特征：行盒可被折断

                -word-brdak属性

                                    normal:英文单词换行，中文单字换行原则

                                    keep-all：空白，标点，换行原则

                                    break-all：英文字母换行，中文单字换行原则

空白折叠仅适用于行盒之间

可使用水平方向上的margin、border、padding设置内容之间的距离

行盒尺寸：1.可替换元素：图片、多媒体

                 通过：object-fit:缩放规则

                             值：fill：无视宽高比理缩放，充满设置的尺寸

                                   contain：保持宽高比例缩放，保证不超出内容盒

                                   cover：保持宽高比例缩放，充满尺寸，某些部分被隐藏掉

                                   none：不进行缩放

2.非可替换元素：文本元素

                   1.垂直方向上 margin、border、padding不占页面尺寸

                   2.width、height 必须设为自动，数值设定无效

                  3.可使用line-height设置一行文字高度

    行盒的定位体系必定为常规流

      浮动和绝对定位的行盒会自动变为块盒

      行盒在包含块中，避开浮动和常规流盒子

转载于:https://www.cnblogs.com/qdxiaochong/p/9281723.html