12月4日

青空鸢约

于 2019-12-09 09:43:25 发布

阅读量89

点赞数

分类专栏：工作手记

本文链接：https://blog.youkuaiyun.com/weixin_44496230/article/details/103423648

版权

工作手记专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用CSS的page-break属性控制打印时的换页行为，避免在不适当的位置换页，以及如何在Vue.js中实现路由跳转到新标签页的方法。同时还涵盖了object-fit属性的使用，确保图片在不同尺寸的容器中正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

控制文件打印时的换页

不会修改网页在屏幕上的显示，不一定要写在@media print{}中
不能再绝对定位的元素上使用以下属性
page-break-before：
auto (默认值)
always（在指定该属性的元素前换页）
left （使指定该属性的元素出现在一个左边的空白页上）
right（使指定该属性的元素出现在一个右边的空白页上）
avoid（避免在该元素前换页）
inherit (继承父元素)
< Firefox,Chrome和Safari不支持left/right/avoid属性值>
page-break-after：
auto (默认值)
always（在该元素后换页）
left （在元素之后足够的分页符，一直到一张空白的左页为止）
right（在元素之后足够的分页符，一直到一张空白的右页为止）
avoid（避免在该元素后换页）
inherit (继承父元素)
< Firefox,Chrome和Safari不支持left/right/avoid属性值>
page-break-inside：
auto（默认如果必要则在元素内部插入分页符）
avoid （避免在元素内部插入分页符）
inherit (继承父元素)
< Firefox和Safari不支持avoid属性值> ???

object-fit

指定元素内容该如何适应其所在的高度和宽度确定的框

	<img class="example" src="example.png">
   .example{
   		width:160px;
   		height:90px;
   		object-fit:cover;
   }

fill （整个对象将完全填充此框。如果对象的高宽比不匹配其框的宽高比，那么该对象将被拉伸以适应）
contain（在填充元素的内容框时保持其宽高比。因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”）
cover （被替换的内容大小保持其宽高比，同时填充元素的整个内容框。如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应）
none（被替换的内容尺寸不会被改变）
scale-down（内容的尺寸就像是指定了none或contain，取决于哪一个将导致更小的对象尺寸）

vue路由跳转时打开新的标签页



1、<router-link target="_blank" :to="{path:'/home',
										query:{id:'1'}, 
										params:{num:'lalala'}}"
   >
		新页面打开home页
   </router-link>

2、使用函数实现页面跳转（编程式导航）
此方法无法实现在新标签页打开页面，可用window对象的open方法实现

let router_url = this.$router.resolve({
    name: "router_name",
    query: {
        param1: variable1,
        param2: variable2
    },
    params:{
		id:'12314wde23'
	}
});
window.open(router_url.href, "_blank");