learnByWork

佚名 6年前 (2019-05-08) 随笔 1326人围观抢沙发百度已收录

2019.5.8

1、图片的适应

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

　　图片是网页不可缺少的组成部分，而同一个位置的图片大小不一定总相等，要保证整体布局整齐可：将img放入一个div中，该div设定好width、height，而图片的width或height设定100%，height或width则auto。如果各图片水平位置上width一样，则width为100%，而height：auto。如果只是高度一样，则height：100%，而width：auto。

2、关于文字段落

　　文字的长度不一定是固定好的，应该给文字段落设定好一个width和height，当p的长度超过是则省略，

当行数属性可以是width:300px; height: 20px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden。

多行属性：设定p所在容器的width、height、line-height、overflow:hidden。

3、关于水平排列元素问题

　　因为各个浏览器会存在1~2px像素的误差，对于水平分布，使用float: left属性可以很好排列，不同浏览器出现错乱的情况少，对于最右边不能完全靠边，可以使最右元素float: right。

4、对于水平排列上，容器是内行元素，如a标签、

　　添加display: inline-block，使元素变成可行内块元素可解决而坍塌问题。

5、关于背景图像取值问题

　　在服务器中，图片加载可能没那么快，对于多个图标背景，可以放在同一张背景图中，而相应图标的选择则可以使用background-position定位。