木灵鱼儿

控制tab的宽度tab-size

上一篇文章我们用渐变背景模拟了斑马纹，这次我们顺带简单了解下如何控制tab的宽度。浏览器默认一个tab是8个字符，这种感人的宽度简直让人吐血，你想想你在编辑器里一个tab才多宽，而且我们有时候经常是三个tab起步啊，这要是在浏览器里显示，简直突破天际，为此css3特意出了一个新属性：tab-size。目前tab-size在日常的浏览器都是支持了，but---除了微软的浏览器，微软的浏览器不知道拖了多少后腿，你想想ie....再到现在的edge，来人，做了他。嗯哼~~~有点扯远了，我们继续。tab-size目前用，建议直接用数字，虽然也能用像素单位这些，但是苹果又不行啊，所以我们还是用数字...

用渐变来模拟斑马纹

斑马纹应用很广泛，用于表格，代码展示，列表展示等等，一般都是先给每一行加一个block的父元素，然后再用元素选择器:nth-child(odd)和:nth-child(even)来选择奇数元素和偶数元素，这样就会产生一个问题，第一行一般都是标题之类的，这样写会让标题和内容部分相同，于是又只能再加一个选择器:first-child将第一个重置。这样虽然说是可以，但是岂不是很麻烦，需要给每一个子元素加一个block，如果子元素本身就是block那好办，如果不是呢，只是纯文本呢，那不是还要用js去选择，得不偿失，于是我们可以试着用背景层去模拟，然后用em或者rem单位控制大小，这样，既可以自适...

有趣的hue-rotate滤镜

css3的滤镜真的非常强大，比如这个hue-rotate滤镜，可以让图片的一些颜色变成想要的颜色，当然黑色白色除外，因为这个滤镜的原理就是改变图片的色相，如果你用过ps的话就会知道，再ps里面可以通过改变图片的色相来改变图片的颜色，而且效果很方便，不会有颜色与颜色之前的不自然感。下面我们来看看吧！我门先找一张图片：这张应该是红宝石的壁纸，我们先用ps颜色拾取工具或者红宝石的hsl色环角度。红色hsl为4deg，那么我们试着把他变成紫色的！已知紫色hsl色环值为282deg，我们需要添加多少的角度值才能等于282deg，于是：282-4=278，我们需要添加278deg，于是代码这么写;i...

CSS3 object-fit/object-position简单了解

从第一次使用yodu的主题，我就很在意他是怎么让首页的文章缩略图居中且填满设置好的大小，而且不会产生形变，然后我f12查看代码的时候看到了这个：object-fit:cover；这个cover很容易理解，和background的cover是一样的，而这个object-fit又是什么意思呢？为此我特意去看了大佬“张鑫旭”的博客，从中获益匪浅！我个人的理解是这样的：首先我们要清楚img他的一些结构原理，为此我就简单画个图方便理解!我们的img是一个元素，img就像是一个div一样，他包裹着里面的图片。而img后面调用的src="xxxx.jpg"就是图片的本体，所以我们理解的时候不要想着图片...

给伪元素也加上box-shadow

在设置一些tag标签样式的时候，我们一般都是设置为一边箭头的标签样式，这个箭头一般都是使用伪元素before来进行模拟，但是当我们想要给这个标签加上阴影box-shadow的时候，你会发现你的阴影并不能应用的伪元素上。我们先看下具体代码：HTML:<div class="div1">tag</div> CSS：.div1 { display: inline-block; line-height: 20px; background-color: currentcolor; color: #00AAFF; ...

创建渐变条纹linear-gradient以及一些感悟

渐变条纹linear-gradient一些感悟：条纹背景其实用的还是比较少的，主要是因为色彩的调控，有点喧宾夺主，如果是只是简单的页面，非多内容的，其实也可以考虑用色彩比较淡一些的条纹做为背景，然后内容部分用颜色块去凸显主体，不过个人是没有这个调控能力，等以后有机会再试试吧！先我们来讲讲linear-gradient的代码意思：background: linear-gradient(#58a 50%,#999 70%); 这是一段常见的背景渐变，淡蓝色在上面，灰色在下面。如图：这里的50%和70%就需要特别说明一下，这个百分百并不是指颜色占据的高度或者宽度，而是颜色渐变的起始点、结束点，...

自定义字体font-face中的font-style、font-weight详解

自定义字体相信大家都知道是font-face，但是自定义下来总是有一大段代码，其中引用字体的我们就不谈了，这个比较简单的，我们谈的是里面经常出现的font-style和font-weight，这两个代表的含义！font-style顾名思义，就是字体的风格，常用的就是斜体（initial），非斜体（normal）。font-weight就是设置字体的字重，也就是粗细，100-900。那么为什么每次自定义字体都会出现这两个呢，而且一般都是设置重置normal，既然都是默认，再写一遍岂不是多余？？？其实不能这么理解，我们应该将其理解为引用的——条件——，并且一般是用于多套字体，一个字体名称的。...

font-size为0，高度反而增高的原因

不知道大家平时写代码的时候有没有发现一个问题，就是有时候设置某段文字font-size:0；的时候，整行高都会突然变高，如下图。以下是代码：html部分<div class="div1"> <p>x<span>x</span>sjdkdfg奥斯卡了多少卡回复</p> </div> css部分.div1 { width: 500px; line-height: 20px; background: #999; } p { margin: 0; paddi...

两栏自适应布局

两栏自适应布局，顾名思义就是当左边的高度高于右边时，右边会自动补全至其等同于左侧的高度！示意图方法有三种，按原理来算应该只能算两种，为此我们慢慢道来：第一种：margin控制外部大小的方式HTML代码：<div class="div1"> <div class="left"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>...

一段指令教你查看笔记本电池损耗win8-win10

过年回家后，天气特别冷，大概长期属于0℃左右，笔记本前几个月就放家里了，想着反正不久就要回来了，就不带来带去，谁知道这次回来笔记本的电池出问题了，充不满了，无奈做了几次电池校准，也不知道有没有效果，后续我再跟进下这个情况，不过本子也用了这么多年，电池损耗也是一定的，手机都换了一次电池了，更何况笔记本这种凶猛性的呢！索性啊！我就看下电池损耗，于是今天就告诉大家电池损耗怎么查看！不需要任何软件，系统自带即可查看！首先我们调出命令菜单（cmd），快捷键：win+R输入cmd回车，win10用PowerShell也是可以的，调出后直接输入代码：powercfg /batteryreport，然后...

弹性布局flexbox

父元素设置：display: flex; justify-content: space-around; align-items: center; flex-flow: column wrap;（可选） 子元素设置：flex: 1; （可选） order: 1;（可选） align-self: flex-start;（可选） 解释：display: flex; 设置元素为弹性布局justify-content: space-around; 设置子元素水平对齐方式！（flex-start：起点对齐；flex-end：终点对齐；center：居中对齐；space-between：一个子元素时...

CSS的简写形式合集

注：| 符号为空格！font：italic（font-style:字体倾斜样式）|small-caps（font-variant:小型大写字母）|bold（font-weight：字体粗细）|12px（font-size：字体大小）/1.5em（line-height：行高）|arial，verdana（font-family：字体）;例：完整写法：font：italic small-caps bold 12px/1.5em arial,verdana;简单写法：font: 12px arial,verdana; [字体大小必须在前面！]简写形式必须要有font-size和font-fa...

这次把主题升级了下，然后哭着改完CSS（多列布局属性）

距离自己上次魔改主题也过去了一段时间，说实话我差不多把自己改的地方都忘了，然后这次脑子一抽就更新了，然后就是666.....从凌晨2点左右就在搞了，各种更新调试，只能怪自己不熟练，找了好多地方调整，然后本来如果是直接在原来的css的属性上改会比较省事，但是发现以后要是再更新，那我不得想死，于是又单独开了一列，用了超多!important属性，然后呕心沥血的改好了，防止自己作死删了修改好的源文件，直接贴上大部分的CSS吧！又需要也可以自己粘贴使用哈哈，不过仅限于YoUDu这个主题。说下心得：本来我是想着既然css3出了一个多列布局的属性，那么不用白不用，就来体验下，发现，这个属性最大的bu...

CSS3文字渐变效果

暂时还是需要加前缀才可以生效，而且只支持webkit，个人测试电脑端新的浏览器都是可以支持的，除了ie不行，手机端我测试了安卓7.0和火狐浏览器，都是可以显示的，所以日常用一用还是可以的！效果图：代码：-webkit-text-fill-color: transparent; background:linear-gradient(to bottom,#666 50%, #aaa 50%); -webkit-background-clip:text; 注意：原理是通过设置文字填充为透明，然后让背景色渐变显示到文字中，background-clip:text将渐变展示为文本大小。由于这个属性...

meta标签的使用

印象中的meta标签一直是，指定字符编码，然后就不知道干嘛了，看了一些网站，发现他们的meta标签很丰富。    比如:meta name="keywords" content="XXXX";meta name="description" content="XXXX"; meta name="robots" content="all";meta name="author" content="XXXX";等等，非常多，也不知道干啥的，网上找了一个还算详细的解释，有兴趣可以看看：原文链接：进入meta标签的组成：meta标签共有两个属性，它们分别是ht...

用自定义按钮制作一个（提示/警告）弹窗

标签：buttion属性值：onclick="alert('提示或者警告的内容'）"解释：oncilck: 鼠标点击alert: 警告提示详细代码：<bottion type="buttion" onclick="alert('错误')">点我</buttion>

关闭ps cc首次打开的-最近使用项

ps cc更新后启动速度从某种程度上变慢了，一个方面是默认首次打开是-最近使用项-，这个需要调用一些之前的缓存，导致启动速度变慢，而且每次都会显示我之前做的画面，这个虽然某种程度上是很方便，但是要是你拿去做了一些羞羞的图片，那就很尴尬了，因为我特么就遇到了这个情况，日啊，跳进黄河都洗不清了，所以找了下关闭这个的方法，下面分享给大家：打开ps，先Ctrl+K快速打开首选项，不知道快捷键点击左上角-编辑-按钮，选择首选项在常规的页面中间，有一个--没有打开文档时显示“开始”工作区--，默认是勾选的，我们把勾去掉！然后关闭再打开，享受！

修复浏览器右侧滚动栏的宽度

第一种方法：給html标签添加overflow-y：scroll；    直接給每个页面添加y轴滚动条，这样就不会有偏差了，实际显示的宽度的位置都是一样的。    不过这个就很难看了，伤敌1000自损800.第二种方法，通过函数计算出滚动栏的宽度，然后添加一个padding值，让他抵消掉。    給内容部分的div添加一个padding-left： calc（100vw - 100%）；其中100vm是浏览器的显示宽度，100%则是内容实际占用的宽度，让浏览器宽度减去实...

transform

2d变形translate X Y轴移动scale X Y放大缩小rotate X Y 旋转skew X Y轴倾斜3d变形perspective 设置视距translate X Y Z轴移动scale X Y Z 放大缩小rotate X Y Z旋转移动和旋转不同，移动是轴的延长缩短，旋转是根据轴身做360度变形

clip-path:polygon裁剪多边形

字体粗细

lighter mediumboldblack

div浮动清理浮动外边距失效

只要在中间加个div，设置好div:after {content:"."; height:0; visibility:hidden; display:block; clear:both; }就可以了

伪类选择器

:link a链接标签的未访问前的样式:hover 对象在鼠标移上时的样式:acrive 对象被用户点击时的样式 :visited a链接被访问后的样式:focus 对象成为输入焦点时的样式:first-child 对象的第一个子对象样式:first 对于页面的第一页使用样式

transition-proerty 过渡样式

样式名称 样式类型 background-color color(颜色) background-image only gradients(渐变) background-position percentage, length(百分比，长度值) border-bottom-color color bord...

CSS边框图片属性border-image

今天学了边框图片，说实话听的是一脸懵逼，个人比较纠结于“大局”，所以一直卡在角和边的设定上，后来经过自己实际测试，得出了一些心得。基本写法：border-image:url(xxx.jpg) 50/20px round;url就是调用一张素材图片50是一个没有写单位的数字，意思是裁剪出素材图片中的对应大小，比如这张图有500px的宽度，我们只要其中左边的50，那么我们就写50就好了，如果你要单独设置四个角，那就要都分开写，会很麻烦，就不说了，自己看字典把！20px就是边框需要展示出来的图片宽度，比如我只要你的边框图片显示50px，那就写50px，而且边框的图片和背景的效果有些相同，他是不...