css踩坑
OBKoro1
博客、前端算法、开箱即用代码块:http://obkoro1.com/web_accumulate/
展开
-
sass变量详解——你所不知道的sass
写在前面:现在一直使用sass写css,当初入门的时候,看的很多教程,当时看的云里雾里的,现在看来还是蛮详细的,就是一点,不够小白。本人文章类型一直比较偏小白的,想要更好的为不会用sass提供一点学习的资料,相信本文对想要学习sass的人,还是有极大的参考价值的。里面有些细节,也许对已经学会使用sass的大手子也有一定的参考价值。变量是什么?w3c关于JavaScript 变量的介绍:上面一大堆巴拉原创 2017-04-22 14:18:16 · 6400 阅读 · 0 评论 -
[布局概念]关于CSS-BFC的深入理解
写在前面好记性不如烂笔头,研究了一下BFC,发现里面比较细的东西也是很多的!关于BFC,很多人可能都听说过BFC这个东西,大概知道这是个啥东西,相信很多人对此并没有一个非常细致的了解,本文预计篇幅较长,认真,耐着性子看,应该都能够比较深入的理解BFC这个概念的规则、作用以及用法。希望喜欢的朋友可以点个赞,或者关注一波本人,谢谢。BFC是什么鬼?BFC概括:可以在心中记住这么原创 2017-05-04 12:53:23 · 2542 阅读 · 4 评论 -
input type=“range”滑块自定义样式,实现步骤详解及实际应用
写在前面:本文的主要内容包括:type="range"属性介绍,修改range默认css样式以及在js中的实际应用。本文面向前端小白,写的不好之处,请多多见谅。文末有demo链接,可以自行复制到本地进行试验。相关:自定义 range radio select的样式滑轮,按钮,选择框最终要实现的效果:其中包括一部分js代码步骤:1.rang原创 2017-04-16 19:54:35 · 12790 阅读 · 0 评论 -
(干货)自定义 type="range" type="radio" select的样式
写在前面:之前踩坑css的时候,遇到滑轮,按钮,选择框这类型的东西,为了页面效果,总是需要自定义他们的样式,而不使用他们的默认样式。当时写的时候,我也是蛮头疼的,弄了个demo,链接在下面。对此做个总结。本文是面向前端小白的,大手子可以跳过,写的不好之处多多见谅。额,今天就先大概的将代码贴上来,考虑到篇幅的问题,就先写一下三个的实现方式,一般也都看得懂,代码注释的非常详细。因为细分原创 2017-04-16 00:54:36 · 746 阅读 · 0 评论 -
单词太长导致自动换行,出现空白区域。——word-wrap和word-break(英文单词换行)
写在前面:在写页面的时候,偶尔有时会遇到下图这两种情况,一种是单词过长时会溢出div,一种是直接换行,导致出现空白区域。这两个情景就需要word-wrap、word-break这两个属性出场来解决了。闲话不扯了,本文主要内容有:word-wrap和word-break**属性介绍,使用方法,他们之间的区别,浏览器兼容性,demo链接**。需要的朋友可以过来参考下,喜欢的可以点个赞,希望能对大家有所帮原创 2017-04-18 20:11:44 · 8928 阅读 · 0 评论 -
关于css的零碎知识点
写在前面:这篇文章是本人学习过程中遇到css的零碎知识点2(就是以前自己不知道的),我都记下来了,需要的朋友可以过来参考下,喜欢的可以点个赞,希望对大家有所帮助。本文的受众是前端小白,大手子可以跳过。1.scss编译css文件使用中文注释出现乱码:在文件开头部分加上:@charset “UTF-8”;注意:这里必须要加在文件开头部分,加在文件中部和结尾部分是无效的。2.HTML input标签的 m原创 2017-04-14 14:23:02 · 402 阅读 · 0 评论 -
渐进增强和优雅降级之间的区别在哪里?
写在前面:在前端开发的过程中,如果有注意的话,发现有些写css3属性时,兼容性的写法顺序不太一样,比如transition属性,有些把transition放在前面有些是放在后面,这就引出了两个概念:优雅降级和渐进增强。渐进增强和优雅降级概念出现的原因:翻看进度条,会发现渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3,但是 CSS原创 2017-04-12 13:36:03 · 2551 阅读 · 0 评论 -
实用形ps切图技巧,图片格式及其相关
写在前面之前写了两篇前端图片相关的内容(前端ps切图方法,图文详细,css sprite雪碧图制作,使用以及相关,图文gif),本文是面向前端小白的,搜集整理的一些切图技巧,及其相关内容。关于版本:推荐pscc2017版,一些老版本很多新功能没有,会影响到效率的。(目前2017/4/11)基本设置先要调整工作区域的布局。1.选择“窗口”——把“信原创 2017-04-11 14:20:04 · 1217 阅读 · 0 评论 -
input常见属性和使用方法的介绍
写在前面:老套路有栗子有code,这篇文章是对css中input标签的属性中比较常用常见的使用方法的一个总结。我自己也老是记不住,所以经常百度一下,加深一下印象和为了自己以后查找资料方便,也方便后来的人。去掉input的边框栗子:就是这个东东,原始的样式比较难看,一般都有去掉的需求。 border: none;已经成功去掉了去掉鼠原创 2017-03-31 14:10:28 · 5417 阅读 · 0 评论 -
html不随放大缩小而变形——initial-scale
写在前面:很惭愧我都在做jq了,关于手机端页面变形,直到今天早上才知道问题出在哪里?之前写了好多css页面用谷歌的F12查看手机端的页面,效果如下面的图,然后我一直以为我电脑的谷歌F12出问题了,直到今天在启宸师兄的帮助下才明白。下面进入正文:一直以为是谷歌F12出问题了,查了好多相关的资料还是没查到,然后今天回过头来修改之前页面的问题,然后看到head头部,就觉得可能是initial-sca原创 2017-03-30 14:27:22 · 45359 阅读 · 2 评论 -
内容滚动条和子div高度自适应
内容滚动条和子div高度自适应写在前面:老套路有图有真相,这才叫做分享。本文内容是:一个div里面,两个子div高度自适应(平分父div的高度)和元素内容过多的时候,根据需求出现高度滚动条或者宽度滚动条。先放最终效果(在下面会有demo代码。):Paste_Image.png实现这些效果要怎么做呢?咱一步一步来。第一步:先设置html结构:这里我已经搭好了。原创 2017-03-23 15:43:10 · 5624 阅读 · 1 评论 -
解读viewport—网页自适应移动app神器
写在前面:viewport指的是是用户网页的可视区域,查了许久,遗憾的是近一两年几乎没有高质量的解析viewport的文章,本文内容是参考大牛,对内容进行了重新排版,以及对重点内容进行标注、精简,加上些许的个人理解形成的。有兴趣的朋友,可以参考一下。1.背景介绍现在人通过手机浏览网页占了大多数,随着浏览方式的改变,网页在webapp下面实现多终端自适应,无论是对于避免工程师无谓的重原创 2017-04-07 16:26:26 · 1991 阅读 · 0 评论 -
纵向排列文字以及禁止文字被选中
写在前面:内容包括demo代码,应用和定义,以及参考文献,本文主要内容是本人学习过程中遇到css的零碎知识点1(就是以前自己不知道的),我都记下来了,需要的朋友可以过来参考下,喜欢的可以点个赞,希望对大家有所帮助。writing-mode: tb-rl; (纵向排列文字)应用:Paste_Image.png说明:设置或检索对象的内容块固有的书写方向。原创 2017-03-27 13:11:27 · 720 阅读 · 0 评论 -
你对CSS权重真的足够了解吗?
前言css权重很多人都听过,也了解一些,但是很多人对具体的规则或者说再深如一些关于css权重的问题,可能会不那么清楚。日常开发中,或多或少都会遇到css规则不生效的问题,为了让我们能够减少调试css规则的时间,深刻理解css权重,就十分关键了。如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。 个人博客了解一下:obkoro1.com权重规则总结:...原创 2018-05-21 09:05:04 · 443 阅读 · 0 评论