css
文章平均质量分 50
Marktubbu
你对所学东西理解深度,决定了你所站的高度
展开
-
移动端兼容性问题解决方案
原文地址:http://www.cnblogs.com/wangpenghui522/p/5398137.html 1. IOS移动端click事件300ms的延迟响应移动设备上的web网页是有300ms延迟的,玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的,2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上,使用了双击缩放(double tap to zoom)的方案,比如你...原创 2021-04-26 13:51:40 · 813 阅读 · 0 评论 -
IOS下图片不能显示问题的解决办法
有人提供给我一个解决办法,给img标签加一个父级元素,给父级元素设置宽高,然后给img标签设置宽高100%,如下:html: <div class="img-container"> <img src="xxx.png" /> //假定图片路径正常 </div> css: .img-container{ width:100px; height:100px; } ...原创 2021-01-12 11:29:12 · 1002 阅读 · 0 评论 -
box-shadow实现四周阴影
box-shadow实现四周阴影div{ width:250px; height:250px; background:greenyellow; box-shadow:black 0px 0px 10px;//将h-shadow,v-shadow设为0px,实现四周阴影}效果图原创 2020-12-23 09:47:16 · 6186 阅读 · 0 评论 -
设置固定最低部 css
遇到问题如图h5 在编辑时 底部按钮弹起解决方案 flex解决该问题的最好方法是采用 flexbox——CSS3提供的一种先进布局模型,旨在建立具有适应性的布局。如果你对 flexbox 还不怎么熟悉,文章最后有一些扩展阅读链接,可以帮助你了解 flexbox。我们的演示页面应该具备 Header、主体内容区域和 Footer,下面是该页面的 HTML 12345 <body> <header>.....原创 2020-11-28 21:48:17 · 351 阅读 · 0 评论 -
移动端适配-(postcss-pxtorem)
基于vue+vant的移动端适配(rem)1.下载lib-flexible --savenpm i lib-flexible --save2.在main.js中引入lib-flexiblemain.jsimport 'lib-flexible/flexible'3.设置meta标签<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-s原创 2023-11-21 13:39:06 · 251 阅读 · 0 评论 -
深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的。有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难。 position属性共有四种不同的定位方法,分别是static、fixed、relative、absolute,sticky。最后将会介绍和position属性密切相关的z-index属性。 第一部分:position...转载 2018-07-10 17:08:38 · 454 阅读 · 0 评论 -
CSS背景图片自适应、全屏、填充、拉伸
方法一、js控制:123<div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1"> <img src="pictures/background.jpg" height="100%" width="100%"/> </di原创 2018-01-08 11:55:17 · 27034 阅读 · 0 评论 -
html、css、js加载顺序
1.js放在head中会立即执行,阻塞后续的资源下载与执行。因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控。 正常的网页加载流程是这样的。浏览器一边下载HTML网页,一边开始解析解析过程中,发现标签暂停解析,网页渲染的控制权转交给JavaScript引擎如果标签引用了外部脚本,就下载该脚本,否则就直接执行执行完毕,控制权交还渲染引擎,恢复往下解析HTML原创 2017-11-16 13:51:36 · 705 阅读 · 0 评论 -
什么是css权重
什么是css的权重?1、要了解权重,必须先了解css样式的6种基础选择器 (1)id选择器 # (2)类选择器 .className (3)属性选择器 [attr] (4)伪类和伪元素 :hover :first-line (5)标签选择器 p (6)通配符选择器 *2其它的选择符均可由基本的组成,组合的方式分原创 2017-11-17 10:27:04 · 829 阅读 · 0 评论 -
话不多说, 以左上角为原点 -moz-transform-origin: 0 0; -webkit-transform-origin:0 0; -o-transform-origin:0
话不多说,以左上角为原点-moz-transform-origin: 0 0;-webkit-transform-origin:0 0;-o-transform-origin:0 0;以右上角给原点-moz-transform-origin: top right;-webkit-transform-origin:top right;-o-transfor转载 2017-05-09 16:07:29 · 4107 阅读 · 0 评论 -
CSS3:border-radius隐藏的威力
.round { border-radius: 5px; /* 所有角都使用半径为5px的圆角,此属性为CSS3标准属性 */ -moz-border-radius: 5px; /* Mozilla浏览器的私有属性 */ -webkit-border-radius: 5px; /* Webkit浏览器的私有属性 */ border-radius: 5px 4px 3px 2px; /*转载 2016-08-29 17:30:47 · 536 阅读 · 0 评论 -
预处器的对比——Sass、LESS和Stylus
本文根据Johnathan Croom的《Sass vs. LESS vs. Stylus: Preprocessor Shootout》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-sty转载 2016-06-14 17:25:35 · 511 阅读 · 0 评论