![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 61
陆康永
是时候开始明确自己写博客是为了什么,以前搞不懂,感觉挺浪费时间的,而且自己的水平写出了的博客可参考价值也不大,权当给以后的自己一个了解过去自己的机会,避免继续踩坑。
展开
-
css rem之2024
为了避免使用js计算,我看到有些网站时用媒体查询给html设置fontSize的,这个方式也不失为一种解决方式,但是需要维护好几个设备宽度,并且并不全面,虽然问题不大,但是并不够完善。这个html fontsize的大小是通过js动态计算的,而这个js的运行时晚于html渲染的,所以会导致一个问题,进入页面时候会看到页面整体缩放一下。我们同一家公司里面的设计稿肯定必须得统一一个标准的,目前主流就是750,如果出现不同尺寸饿设计稿,这时候就应该是工作流程活着标准上面出现了什么问题了,原创 2024-08-10 19:08:48 · 479 阅读 · 0 评论 -
移动网页缩放。 meta name=“viewport maximum-scale知多少
这个viewport熟悉有哪些,我们直接从文档可以查阅的到,也可以很清晰的明白它所表达的内容文档控制页面允许放大的倍数。设置一个低于3的值将不具备无障碍访问性。最小值是0.1。最大值是10。默认值为1。负值会被忽略。文档说最小值是0.1,其实我们可以设置0的。原创 2024-08-10 18:45:37 · 299 阅读 · 0 评论 -
css flex:1;详解,配合demo效果解答
给设置了display:flex的子组件设置了flex:1;就能让他填满整个容器,如果有多个就平均flex:1;是另外三个样式属性的简写,等同我们就针对上面3个属性结合代码来进行讲解。原创 2023-09-07 11:45:16 · 4163 阅读 · 0 评论 -
解决flex布局内容超出盒子宽度问题
方案1:子项目设置flex:1;overflow:hidden; 子项目内容 设置超出省略号,可以完整显示三个省略号 子项目内容宽度等于子项目在线预览#main { width: 350px; height: 100px; border: 1px solid #c3c3c3; display: flex;}#main div:nth-of-type(1) {flex:1;overflow:hidden;}#main div:nth-of-type(2) {flex-g原创 2021-12-08 11:02:53 · 7458 阅读 · 0 评论 -
Css变量之局部作用域
之前在横屏适配那篇文章用到了css变量,通过给root添加变量然后通过js修改这个变量来着适配。今天,我要记录的是css变量的另外一个特性:作用域(或者命名空间)demo预览:https://jsbin.com/natunuzavu/edit?html,css,js,output使用calc来动态读取—n变量,然后赋值给—diameter变量,再把—diameter变量赋值给div的宽高这样div的宽高就可以动态根据—n变量来设置了```css.eye div...原创 2021-08-10 09:06:14 · 472 阅读 · 0 评论 -
getBoundingClientRect.left的奇思妙想,移动端获取摁下位置距离窗口的绝对位置
有样式如下,求#box距离浏览器左边的距离 *{ margin:0; padding:0; } #box{ position: absolute; left:10px; top:30px; width:40px; height:40px; background: pink; transform:rotate(33deg); border-left:1px sol原创 2021-06-21 15:00:56 · 825 阅读 · 0 评论 -
移动端浏览器沉浸式导航
H5浏览器沉浸式导航学习安卓时候,了解沉浸式状态栏,也就是状态栏悬浮在app上面,不占用app的空间,这会导致app的内容会被遮盖。没想到手机浏览器上面也会出现类似的情况。安卓手机上面目前还没有发现,目前发现的是iphone6plus ios12上面。这里主要对js的几个个api做比较:window.innerWidth:窗口内部宽度 window.innerHeight:窗口内部高度 document.documentElement.clientWidth:文档可视区域宽度 do原创 2021-03-19 11:45:53 · 1065 阅读 · 0 评论 -
wap 横屏适配和竖屏适配的通用方案
这个话题应该能聊的东西挺多的,从16年做手机端开始就研究,也写了两篇博客来记录过(但是受限于但是的经验和认知,现在看起来不是特别清晰)。为什么今天会继续这个话题呢,在做了reactnative和之前小游戏横屏页面后,我觉得有必要总结一下。本篇博客,最终针对wap横屏和竖屏给出两个通用的适配方案,rn上面可能实现方式和web的不大一样,但是思路逻辑是一样的。从生产流程来考虑,适配这个东西,产品经理和设计都是需要考虑的,相对传统pc设计,移动端能展示的区域比较小。这个就要求设计出来的产品(.原创 2021-03-18 20:07:00 · 1962 阅读 · 2 评论 -
css 痛点 没有对应table的colspan rowspan的样式
对这个问题已经纠结了好久,每次以为有新的idea的时候,最终都是以失望而终搞不懂啊,为啥几乎所有tablede attribute都有对应的css实现方式,就是这两个这么重要的属性没有在css上面得到实现目前不管使用display:flex还是display:table去模拟都会存在2个弊端1.列和列之间的行无法高度适应(最小高度的无法等同最高高度的那个td)2.跨行和跨列无...原创 2020-02-16 19:09:58 · 1176 阅读 · 0 评论 -
tween.js和css3变形的使用
Tween中的方法接受4个参数t,b,c,d 。返回值为计算后的当前位置.t => time(初始记步次数) b => begin(初始位置) c => change(变化量) d => duration(持续次数)Tween详解:http://www.zhangxinxu.com/wordpress/2016/12/how-use-tween-js-animation原创 2017-03-22 23:22:03 · 1863 阅读 · 0 评论 -
设置or获取 css3旋转 变形 缩放 操作
一开始我们会这样使用,但发现然并卵,获取到的值是一个矩阵方程函数 matrix3d(0.866025403784439, 0, -0.5, 0, 0, 1, 0, 0, 0.5, 0, 0.866025403784439, 0, 0, 0, 0, 1)虽然我们css可以操作scale translate 这些封装好的函数,但实际底层操作的还是矩阵方程,当前js并没有提供相应的函数原创 2017-03-22 23:00:23 · 796 阅读 · 0 评论 -
line-height 多行文字相对父级居中
目前我知道有四种可以实现多行文字居中的方法:1.flex布局2.box布局3.绝对定位布局4.line-heightflex是2012年之后出的css语法,PC端支持力度还是不行,移动的上IOS支持也有问题box是2009年初的css语法,移动的上支持还可以,以后的趋势会被flex替代绝对定位布局,所有浏览器都支持,但是需要知道子级的高度line-h原创 2017-03-18 11:29:21 · 2389 阅读 · 0 评论 -
移动端布局浅谈
最近做了几个移动端的项目,虽然以前也为写移动网页做过了一些准备,但第一次接触移动端的布局,所以踩了几个坑,趁着放假查阅下相关资料,顺道做个总结,也好给以后的自己做个交代在移动端页面上最害怕遇到一件尴尬的事就是我们所开发出来的页面跟设计师所给的页面差别很大 再加上移动设备屏幕的大小不一出来的效果更是参差不齐,特别是小屏幕【出现错位是常见的事情】,当然这个不仅仅是前端的问题,和设计也是原创 2015-09-05 17:52:51 · 4766 阅读 · 0 评论 -
移动端开发 根据html的字体大小来设置布局
链接:http://dhc.0lx.net/jfxt/index.htmlhtml: lang='zh-cn' id='HfontSize'> charset="utf-8" /> name="viewport" content="width=device-width,ini原创 2015-06-04 21:23:32 · 2112 阅读 · 0 评论 -
sin cos tan在前端的应用
/*正N边形外角和 = 360正N边形外角 = 360/n正N边形内角 = 180 - 360/n正弦 Math.sin() 直角三角形中 对边和斜边的比值余弦 Math.cos() 直角三角形中 临边和斜边的比值 正切 Math.tan() 直角三角形中 对边和临边的比值 已知角度,和临边 求对边Math.tan(弧度)*临边 = 对边原创 2017-03-24 11:13:54 · 2020 阅读 · 0 评论 -
css3 background-clip和background-origin
浏览器支持:这里的支持是指:允许开发人员修改该属性, background-clip和和background-origin 属性特征从css2规范开始就已经存在(IE6+支持特性,但是不支持开发者修改,IE8开始支持)css2规范: background-clip为padding-box即从内补白开始css2.1~css3规范:background-clip为border原创 2017-05-06 21:54:01 · 580 阅读 · 0 评论 -
纯css3实现斑马线repeating-linear-gradient和linear-gradient的妙用
今天睡得太早,结果晚上12:45的时候就醒过来了。现在想起小时候,实在是羡慕,那时候9点钟睡了,到早上上学的时候还是迷迷糊糊的要睡觉的感觉,现在特羡慕那时候那么能睡。 今天是周一了,两天的休息日已经过去了,想想挺浪费的,这两天就纯呆家里玩LOL,上周周五下班的时候还给自己定了很多目标结果就执行了一个,而且效果差池人意。 实在是睡不着,趁这个时间,把上周六晚上学到的一个css原创 2016-03-14 03:34:06 · 8629 阅读 · 1 评论 -
只用css解决跳动滚动条问题
当我们使用样式“margin:0 auto”来实现网页内容居中的时候,回遇到这样的一个问题:当页面在多内容和多内容切换的时候会出现主体内容抖动;因为网页内容高度小于浏览器高度的时候滚动条是隐藏的,当网页内容高度大于浏览器高度的时候滚动条又出来了,这导致页面在水平方向会有小范围的位移;经典解决样式如下:Html:{ overflow-y:scroll;}这种处理方法会让滚动条总是保留在网页上面,不管...翻译 2018-06-21 16:49:13 · 2292 阅读 · 0 评论 -
css3笔记
rotate 旋转 degrotateX/rotateY/rotateZskew 斜切 degskewX/skewY 正值 拉 左上角 和 右下角负值 拉 右上角 和 左下角scale 缩放 (原始大小的多少倍)scaleX/scaleYrotate、skew、scale默认都是围绕着元素的中心点进行变化的trans原创 2017-03-21 11:48:25 · 343 阅读 · 0 评论 -
CSS 1px
习惯开发PC网页的我在2016年初踏入移动开发领域 遇到各种“奇奇怪怪”的坑,例如1PX问题。一下列举一些常用的不常用的“解决”方法1.通过修改meta现代手机大多数都是1/2的像素比,可以直接修改meta为:例如淘宝首页:https://m.taobao.com/?sprefer=sypc00#index但是如果你的页面文字很多的话你会发现一个问题,文字会比平常的字体细很多,甚至原创 2017-03-03 23:40:42 · 2667 阅读 · 0 评论 -
margin-top/top 百分比的是相对谁
Document *{ margin: 0; padding: 0; } .wrap{ width: 600px; height: 800px; background: gray; position: relative; margin: 300px auto; } .box{ width: 300px; height:原创 2016-09-27 10:36:37 · 8650 阅读 · 0 评论 -
IE8~实现未知节点高度实现垂直居中
.article{ width:600px; height:200px; border:1px orange solid; display: table-cell;; /*最外面层display:table-cell*/ vertical-ali原创 2015-05-30 10:14:36 · 1495 阅读 · 0 评论 -
CSS定位规则之BFC 你竟然一直不知道的东西!!!!!
相关文档:http://blog.sina.com.cn/s/blog_877284510101jo5d.htmlhttp://www.cnblogs.com/dojo-lzz/p/3999013.htmlhttp://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.htmlBFC(Block Forma原创 2015-06-26 00:04:03 · 6038 阅读 · 5 评论 -
如何清除图片下方出现几像素的空白间隙?
这个是浏览器的一个设计问题。img本来是行内元素,却可以用width 和height,当父元素没有设置高度的时候,用子元素们的高度计算出的高度给父元素的时候就会出现3px空隙这类的问题。可以参考这个链接老外说的http://www.dynamicdrive.com/forums/showthread.php?24880-White-space-between-lt-li-gt-items解决这原创 2015-06-13 08:57:59 · 5897 阅读 · 2 评论 -
流式布局之2009年语法-------------------CSS3盒模型display:box
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari(-w转载 2016-03-30 21:27:37 · 398 阅读 · 0 评论 -
流式布局之2012年语法-------------------CSS3盒模型display:flex
display:flex为display:box的增强版box:主要是控制父容器里面子元素的排列方式、排列顺序、垂直(水平)对齐方式box-flex:增强功能----------主要让子容器可修改自身的排列方式、排列顺序、垂直(水平)对齐方式来覆盖父级的属性、添加了多行对齐方式主要API对比:display:flex父级:flex-direction:原创 2016-03-31 01:18:39 · 1579 阅读 · 0 评论 -
css不定宽度居中
1.我们都知道 “margin:0 auto”;这个样式可以让块元素水平居中,前提是在添加了“width:xxPX”,只有添加了宽度的块元素才能让“margin:0 auto”生效2.我们也知道给父级添加“text-aligin:center;”,可以让“行内元素”的子级可以实现水平居中,但这仅限于“行内元素”2.我们更清楚给父级添加“diplay:talbe;”,然后给他设置“text-原创 2015-11-15 10:37:46 · 1749 阅读 · 2 评论 -
CSS实现不定高度垂直居中 兼容IE7
xmlns="http://www.w3.org/1999/xhtml"> ��������ʵ�ִ�ֱ���� http-equiv="Content-Type" content="text/html; charset=utf-8" /> type="text/css"> body {原创 2015-10-20 22:13:33 · 15861 阅读 · 0 评论 -
less之css3动画大方溢彩
.keyframes(@fx,@fy,@tx,@ty,@name){ //声明一个动画函数,只需要写一个函数就可以到处调用了 @keyframes @name { from { transform:translate(@fx,@fy); opacity:0; filter:alpha(opacity=0); } to {原创 2015-08-17 11:19:59 · 2844 阅读 · 0 评论 -
两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高
代码:效果图:路人甲:OK?等高了??路人丙:不是吧?路人乙:你这是在逗我? xiaomogg:效果有点惨,不过这的确是已经做了等高处理的为什么“等高”,看起来却不等高请留意代码处红框处 padding-bottom:99px; margin-bottom:-99px; 路人甲:这说明不了什么问题!!路人乙:快进入主题吧路人丙:....原创 2015-08-02 08:57:01 · 3666 阅读 · 2 评论 -
小漠的css重置
@charset "utf-8";/* CSS Document *//* There are css reset */body, div, dl, dt, dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquoteth,td{margin:0;padding:0;}table{border原创 2015-01-21 17:27:52 · 701 阅读 · 0 评论 -
滚轮滚动 Webkit IE Moz的兼容
#div1{width:100px;height:100px;background:red;} window.onload=function() { var oDiv=document.getElementById("div1"); oDiv.onmousewheel=fn;原创 2014-10-29 23:12:22 · 917 阅读 · 0 评论 -
css3 skew变形
css3的文档说明很清晰“skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。” 但是感觉很难把握这个数值的控制 特别是和rotate配合的时候更加难想象所以先贴下x方向和y方向被修改时候的图片,这样方便想象skewX(45deg):skewY(45deg):skew(45deg,45deg):原创 2016-02-24 23:18:03 · 2493 阅读 · 0 评论 -
css3之3D盒子 以及css3样式兼容判断
思路:1.做css兼容判断,首先是获取document.documentElement.style,也就是当前浏览器所支持的样式名数组,2.把自己需要做兼容判断的样式和document.documentElement.style数组进行匹配,如果找到你所需要判断的样式名,那就说明当前浏览器支持当前样式,3.因为不同的浏览器支持特定的前缀,所以在进行匹配前,我们需要给我们需要做兼容判断样式名添加前缀并并push到数组原创 2015-09-20 01:58:15 · 1023 阅读 · 0 评论 -
IE 6 7 8的样式兼容 包括对fixed的兼容
padding:10px;padding:9px\9; /* all ie */padding:8px\0; /* ie8-9 */*padding:5px; /* ie6-7 */+padding:7px; /* ie7 */_padding:6px; /* ie6 */转载 2014-11-01 13:56:26 · 912 阅读 · 0 评论 -
关于调整input里面的输入光标大小
以前在项目里碰到过一个问题input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中,在FF下出现的情况是:点击input时,输入光标其实上跟input的height一样高,但当开始输入文字时,光标又变得跟文字一样高,chrome下光标跟input的height一样高,而IE下光标跟文字的大小一致。一直没弄明白为什么这样子,今转载 2016-04-26 11:25:57 · 2126 阅读 · 0 评论 -
拒绝javascript 模拟 只用CSS美化选择框
当我需要用下拉列表拼凑自定义表单时,我常常不得不使用下拉框(select),由于某些部分是浏览器特定的,如下拉箭头,我花了一段时间去搞清楚如何只使用css轻松地美化下拉框。下面是一个默认样式的下拉框的长相: Here is the first option The second optionHTML code:select> option>H转载 2016-04-16 19:47:34 · 671 阅读 · 0 评论 -
CSS中不为人知Zoom属性的使用介绍(IE浏览器不得不说的坑)
标准浏览器有个属性 scale可以缩放节点 并且可以设置缩放的中心点,我为什么要说这个呢,因为这个是促使我找回IE css属性ZOOM的一个助力。ZOOM现在主要用来解决IE清除浮动,其最初的作用是用来缩放节点,后来也成为标准浏览器的一个属性,但是标准浏览器下的zoom效果与原来IE的zoom有很大的区别,这也是“误导”我使用ZOOM来做IE8缩放的原由先看下标准浏览器下的zoom原创 2016-06-17 15:39:13 · 18859 阅读 · 2 评论 -
css3 display:box box-flex 实现未知高度节点相对父级垂直居中
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari(-w转载 2015-05-30 09:25:57 · 3751 阅读 · 0 评论