阿毛Alex - 2021年2月27日
type: channel
link: https://alexmao.com/index.php/2021/02/27/
description: 生命不息，折腾不止
items: CSS的一些小技巧
items: uni-app如何导入字体

CSS的一些小技巧
type: item
date: 2021-02-27T01:52:00+00:00
description: 要做一个导航，有4个view，如何让他们排在一排？.nav { display: flex; } 如何让每个view平均分布呢？.nav { display: flex; .nav_item { width: 25%; } } 如何让一个元素垂直居中：line-height: 120rpx 120rpx为父组件的高 父元素和子元素背景不一样，如何让父元素的背景显示出来。overflow: hidder

uni-app如何导入字体
type: item
date: 2021-02-27T01:42:58+00:00
description: 第一步：把.css文件和字体文件一起放进static的font文件夹里，如果没有自行创建。内容大致如下：@font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1576844226174'); /* IE9 */ src: url('iconfont.eot?t=1576844226174#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff?t=1576844226174') format('woff'), url('iconfont.ttf?t=1576844226174') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('iconfont.svg?t=1576844226174#iconfont') format('svg'); /* iOS 4.1- */ } 第二步：如果是全局字体，在app.vue中引入.css文件@import url("./static/font/iconfont.css"); 第三步：在每个字体路径前面添加以 ~@ 开头的目录路径，否则无法引入。@font-face {font-family: "iconfont"; src: url('~@/static/font/iconfont.eot?t=1576844226174'); /* IE9 */ src: url('~@/static/font/iconfont.eot?t=1576844226174#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('~@/static/font/iconfont.woff?t=1576844226174') format('woff'), url('~@/static/font/iconfont.ttf?t=1576844226174') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('~@/static/font/iconfont.svg?t=1576844226174#iconfont') format('svg'); /* iOS 4.1- */ }