前段样式的一些积累(一)

最新推荐文章于 2025-03-04 09:07:47 发布

原创最新推荐文章于 2025-03-04 09:07:47 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #es6

前端专栏收录该内容

16 篇文章

订阅专栏

本文探讨了前端开发中常见的样式问题解决方案，包括区域图片加载时的抖动处理、使用overflow和text-overflow属性优化文本显示、解决vue中router-link标签引起的页面混乱、宽度控制与box-sizing属性的应用、浮动基础知识、浏览器内置弹框使用、背景颜色渐变实现及元素垂直居中的多种方法。

关于区域图片未加载时下方区域内容占位导致的抖动感。

 overflow: hidden;
 height: 0;

超出内容用…表示。

  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

vue中使用router-link标签时，如果没有使用to属性，会造成页面样式混乱。
当使用width：100%时，若加入padding，需使用box-sizing border-box；以避免宽度撑出页面。
一些常用样式
关于浮动的小知识
浏览器自带三种弹框

// 第一种
alert();
//第二种，
//【返回值】   点击确定   true；点击取消   false
confirm("点我看看");
//第三种，弹出带有输入框的提示框
//【参数】 第一个：要在提示框上显示的内容；第二个：输入框中默认值
//【返回值】点击确定   输入的内容；点击取消   null
prompt('请输入你想要的数字','9');

背景颜色渐变

background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7))

元素垂直居中的几种方法

// 一
display: flex;
margin: auto;
//二
display: grid;
margin: auto;
//三
position: absolute;
left: 0; 
right: 0; 
top: 0; 
bottom: 0; 
margin: auto;
//四
position: absolute;
left: 50%; 
top: 50%; 
transform: translate(-50%, -50%);