cherry_zhang18的博客

//滚动条css::-webkit-scrollbar { /*滚动条整体样式*/ width: 2px; /*高宽分别对应横竖滚动条的尺寸*/ height: 6px;}::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; // box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); background: #007cff;}::-webkit-sc.

/*placeholder*/input::-webkit-input-placeholder,input::-ms-input-placeholder{ font-family: SourceHanSansCN-Regular, SourceHanSansCN; font-weight: 400; font-size: 14px!important; color: rgba(255, 255, 255, 0.4)!important;}/*不能合并*/textarea::-we.

需求：1. 全屏， 设计图 1920 x 1080 ; min: 1200 x 7682. 响应式&自适应方法：元素 单位html font-size： 单位 vw页面宽度、字体 单位 rem页面高度 单位 % + rem, (不直接使用 vh, 因为无法直接实现 min-height 限制）一、 scss 编译，函数 rem($px) 可实现 1920 设计图上的宽度和字体, 不用计算,1920 分辨率下 即 100 px 即 rem(100)...

主角是谁在今天这篇文章中，我并不会在这里讲一些移动端视口的概念，包括物理像素和逻辑像素，理想视口，dpr等等等等，我只介绍这样一种非常不错的移动端适配方案：post-css-to-viewport痛点在哪里在之前有一种流行已久的移动端适配方案，那就是rem，我想下面这两句代码，有不少老移动端都不会陌生：const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth; docu

LED字体在前端中如何实现应项目需要，需要在页面中展示一种LED类似电子表中的字体，经过查阅相关资料以实现，下面放成果图下面我来说下具体做法：1.首先到dafont: https://www.dafont.com/theme.php?cat=302下载你需要的字体，它提供的字体很多不止有LED字体一种2.下载后解压，找到后缀名为TTF的文件3.打开fontsquirrel https://www.fontsquirrel.com/tools/webfont-generator如图：4

需要添加代码 #d2:before{        content:"";/*生成空元素*/        display:table;/*表现形式为 table*/      }即：

需要添加 .clear:after{        content:"";/*生成空内容(元素)*/        display:block;/*变为块级*/        clear:both;/*清除浮动影响*/      }即： 

margin可以用position代替<meta http-equiv="X-UA-Compatible"content="IE=9; IE=8; IE=7; IE=EDGE">boc-shadow.content{ background:#F5F7FA;width:790px;height:380px;filter:progid:DXImageTransform.M...

-webkit-background-size:30px 30px;-moz-background-size:30px 30px;background-size: 30px 30px; /* 控制条纹的大小 */background-color: #314ECB !important;background-image: -webkit-gradient(linear, 0 0, 100%

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar{ width: 10px; height: 10px; background-color: transparent;}/*定义滚动条轨道 内阴影+圆角*/::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6p

当我们的内容超出了我们的div，往往会出现滚动条，影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。  我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。这里介绍一个简单的方法。   大体思路是在div外面再套一个div。这个div设置overflow:hidden。  而内容div设置 overflow-y:

造成边框变粗的原因其实这个原因很简单，因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。devicePixelRatio的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。解决

首先给用于放文本的标签元素设置一个宽度值，并设置溢出属性overflow为溢出隐藏,设置文本缩略的样式为"..."width: 245px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;

淘宝初始化代码body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }  body, button, input, select

（一）利用绝对定位与transform　        　　　　　　　　　　　　将父元素定位，子元素如下　　.children{　　　　position: absolute;　　　　top: 50%;　　　　left: 50%;　　　　-webkit-transform:translate(-50%,-50%);　　　　background: black;

1.最简单的flex布局,外层容器加上如下样式即可display: flex;justify-content: center;align-items: center;2.利用table-cell外层容器display:table-cell;text-align:center;vertical-align:middle;内部元素vertical-align:middl