HTML+CSS
HTML+CSS
前端杨小白
这个作者很懒,什么都没留下…
展开
-
CSS:父元素使用了Flex布局 导致子元素高度未撑开
在使用van-swipe时发现swipe的高度不能被图片撑开,排查发现给swipe父元素设置了#test { height: 100%; display: flex; flex-direction: column;}解决方法:给子元素swipe增加属性flex-shrink:0,确保父元素不够大时子元素也不会被压缩。#test { height: 100%; display: flex; flex-direction: column; .banner-box原创 2021-01-21 17:32:22 · 6176 阅读 · 0 评论 -
CSS实现行高是字号的1.5倍
.pt_20{ font-size: 20px; color: #2C3338; line-height: 1.5}原创 2020-12-10 14:25:02 · 5110 阅读 · 0 评论 -
移动端transform: translate(-50%, 0)的兼容写法
left: 50%;transform: translateX(-50%);-ms-transform: translateX(-50%);-moz-transform: translateX(-50%);-webkit-transform: translateX(-50%);-o-transform: translateX(-50%);安卓与IOS样式不兼容,position:absolute微信小程序 position: absolute位置错乱问题...原创 2020-11-13 15:42:39 · 2697 阅读 · 0 评论 -
HTML:img图片找不到时 什么都不显示
<img :src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2725771737,752701850&fm=26&gp=0.jpg" onerror="this.style.display='none'">原创 2020-08-03 18:18:39 · 1669 阅读 · 0 评论 -
css实现背景图片全屏
background:url(../assets/image/Login/bg.png) no-repeat 0 0;background-size: cover;-webkit-background-size: cover;-o-background-size: cover;background-position: center 0;转载 2020-08-03 18:16:41 · 270 阅读 · 0 评论 -
CSS实现在竖直方向排列 水平方向居中对齐
<div class="hand"> <i class="el-icon-coin"></i><p>测试数据1</p></div> <div class="hand"> <i class="el-icon-copy-document"></i><p>测试数据第2</p></div> <style scoped>.hand{ .原创 2020-05-22 14:17:15 · 1087 阅读 · 0 评论 -
css让文本 英文字符自动换行—word-break
<div class="journalnav"> <div class="m-0 align-left font-12" v-for="(activity, index) in activities" :key="index" > {{activity.content}} <span class="color font-12 align-right">{{activity.timestamp}}</span> .原创 2020-05-22 14:02:53 · 347 阅读 · 0 评论 -
ElementUI dialog弹出层样式优化
.el-dialog{ // 居中弹框 position:absolute; top:50%; left:50%; margin:0 !important; transform:translate(-50%, -50%); // 防止超出视窗 max-height:calc(100% - 30px); max-width:calc(100% - 30px);...原创 2020-04-26 18:12:59 · 2609 阅读 · 3 评论 -
css实现长度过长时省略号显示
.ellipsis{ width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}原创 2020-04-22 18:11:12 · 472 阅读 · 0 评论 -
css获取第一个子元素
p:first-child{ background-color:yellow;}原创 2020-01-22 11:21:03 · 19202 阅读 · 0 评论