雪碧图的概念及优缺点,以及行盒的简述

您所在的位置:网站首页 雪碧图优缺点 雪碧图的概念及优缺点,以及行盒的简述

雪碧图的概念及优缺点,以及行盒的简述

2023-08-10 05:25| 来源: 网络整理| 查看: 265

什么是雪碧图?它的优缺点是什么?

1.雪碧图的概念:实际是指CSS中的图片拼合技术,将多个背景图拼合在同一张图片上,在使用时按照需求对图片位置进行改动。 优点:当多个图片合成一张图片时,减少了加载网页时对图片的加载次数,减轻了服务器的压力,提高了页面加载的速度。 缺点:使用时需要注意设置的数据的准确性,避免在某些板块出现不相关的背景图,还有就是必须使用高分辨率的图片,避免图片放大后出现瑕疵;当某一板块修改时,尽量只修改相关的部分,或者直接引入新的布局文件,避免出现错误。

行盒的简述

1.行盒的概念: display属性为inline的元素。 1.常见行盒:文字元素:span、abbr、em、i、strong、b 图片和多媒体:img、video、audio 。 2.含义:页面具体内容(文字、图片、多媒体)都会生成行盒,(注意:文字:必须放置到行盒内,否则会生成匿名行盒;图片和多媒体:默认会生成行盒,通常不要对它们的盒子类型进行改动)。 2.行盒显著特征: 1.行盒可被折断,因为内容可被折断换行(可通过word-break属性设置截断位置)。 2.同一个包含块中,连续的多个行盒水平依次排列 。 3.空白折叠的规则仅适用于行盒内部和行盒之间 。 4.行盒与行盒之间的距离可使用水平方向上的margin和padding进行设置。 3.行盒的尺寸: 行盒可替换元素:图片和多媒体。 1.与块盒完全一致。 2.对于图片和视频,仅设置宽高中的一个时,另一个会自动按比例适应。 3.对于图片和视频,如果同时设置宽高,可通过object-fit属性设置适应方式。 4.行盒的定位: 1.行盒在包含块中,会避开浮动和常规流,浮动和绝对定位的盒子自动变为块 盒。 2.包含行盒的块盒,可使用text-align调整行盒在它内容的对齐方式。 3.行盒之间的对齐可以使用vertical-align调整。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3