发表于: 2019-10-25 18:15:22

1 907


今天完成的事情:今天看师兄做项目对于Angular的使用有了进一步的了解学习

明天计划的事情:把自己的angular任务写完

遇到的问题:

收获:

一、

css控制图片显示的尺寸

1、直接设置图片的width,height,或者直接改变图片的长宽比例

虽然简单方便,但是会引起图像显示效果问题。因为浏览器不能像ps那样对图像以相对尺寸进行缩放运算,实际显示虽然简单方便,但是会引起图像显示效果问题。因为浏览器不能像ps那样对图像以相对尺寸进行缩放运算,实际显示时图像会出现像素位移的状况。

2、使用clip剪切

CSS对许多对象提供专门用于对象剪切的样式属性——clip,可用clip属性来处理对象最终的显示内容。

clip 设置对象的可视区域。只对绝对定位的对象有效,应用此属性时,对象必须使用position:absolute

可用值:auto, rect(number,number,number,number)

使用clip属性进行对象剪切时,必须给的4个数值。使用方法如下

clip:rect(number1,number2,number3,number4);

number1~number4分别代表上、右、下、左4个边,相对与左上角坐标(0,0)的偏移值。

(这点与margin四个数值代表边的顺序相同,不同的margin的四个值都是相对于自身内容的四边的偏移)

3、使用div强制剪切

使用overflow:hidden;的对象将强制不显示对象中超过对象范围的部分内容

二、

css图片剪裁显示问题用object-fit:cover

object-fit:CSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

object-fit:fill 被替换的内容大小可以填充元素的内容框,整个对象将完全填充此框,如果对象的宽高比不匹配其框的宽高比,你们对象会被拉伸。

object-fit:contain 被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比,整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加

object-fit:cover 被替换的内容大小保持其宽高比,同事填充元素的整个内容框,如果对象的宽高比与盒子的宽高比不匹配,改对象将被裁剪以适应。

object-fit:none 被替换的内容尺寸不会被改变

object-fit:scale-down 内容的尺寸就像是指定了none或contain,取决于哪一个将导致更小的对象尺寸。

三、pre标签

可定义预格式化的文本。在pre元素中的文本会保留空格和换行符。文本显现为等宽字体。

可以把文本中的tab,空格,换行都完整的保留下来。html中的标签之类的也会保留下来


四、ng-zorro的栅格化系统也非常好用

单独引入组件

import { NzGridModule } from 'ng-zorro-antd/grid';

但是是基于flex的,所以使用需要注意浏览器版本是否支持flex



返回列表 返回列表
评论

    分享到