码迷,mamicode.com
首页 > Web开发 > 详细

HTML行盒

时间:2018-07-08 23:38:47      阅读:522      评论:0      收藏:0      [点我收藏+]

标签:orm   one   匿名   原则   缩放   换行   字母   keep   浮动   

行盒:页面的具体内容(文字、图片、多媒体)都会生成行盒

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

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

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

                                 行盒内尽量不放置块盒

行盒特征:行盒可被折断

                -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设置一行文字高度

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

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

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

HTML行盒

标签:orm   one   匿名   原则   缩放   换行   字母   keep   浮动   

原文地址:https://www.cnblogs.com/qdxiaochong/p/9281723.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!