前言最近在写目录树跳转功能的时候，还是遇到之前的那个老大难的问题，就是因为header顶部是fixed浮动的，导致hash跳转的时候会被挡住。因为hash定位会将元素的顶部与视图顶部对齐，但是也因为如此，导致被浮动元素挡住了内容。以前我是拦截默认的click事件，然后使用新的定位方法scrollIntoView来实现，通过配置它为居中展示，从而避免这个问题。最近重构主题的时候，发现这种方式并不优雅，而且很麻烦，有没有办法不依赖js实现呢？于是我想起以前看过的一篇文章，有一个css属性可以做的，于是找了很久，终于找到了，它就是scroll-padding！官方定义为：滚动端口的最佳查看区域...
规则概览0级通配选择器、选择符、逻辑组合伪类通配选择器：* {}选择符：+、>、~、空格、||逻辑组合伪类：:not() {} :is() {} :where() {} :has() {}1级标签选择器body {}2级类名选择器、属性选择器、伪类类名选择器：.foo {}属性选择器：[foo] {}伪类：:hover {} :active {} :focus {} :focus-within {} :focus-visible {} :link {} :visited {} :any-link {} :target {} :target-within {}...
1px在不同设备的一个探究其实我们要搞明白两个问题：为什么有时候边框无法在部分手机显示？我们真的要小于1px吗为什么有时候边框无法在部分手机显示？有两种设置方式：0.5px0.22rem首先0.5px在老手机是不支持的，特别是安卓，0.5px（小于1px）会被视为1px渲染。0.22rem或者0.22em他们都是相对父级或者根元素进行换算的，最终他们也得变成px单位渲染，有可能是大于1px，有可能会小于1px，最终也会出现部分手机边框是粗的，原因也是因为不足1px被当1px渲染了。还有一个原因，但是需要先了解一些屏幕像素的知识了！我们可以将屏幕的像素视为一个个小方格，一排可能就n个这种大...
rotate的坐标轴和默认值z轴可以看成正对着自己脸的一根轴，每个轴的旋转方向默认如图箭头所示。所有的旋转角度，正值都是根据默认的旋转方向来得，负值则是相反。transform: rotateZ(45deg);只有Z轴的旋转再二维的界面才是有效的，如下图所示：因为在二维的界面Z轴的变化才是有效的，所以默认值的设置就是Z轴，所以简写形式等效于rotateZtransform: rotate(45deg); /*等同于rotateZ(45deg)*/translatetranslate的变化是根据元素的坐标轴而变化的，比如X轴移动100px;transform: translateX(100...
基本格子<div class="box"> <div class="item1">item1</div> <div class="item2">item2</div> <div class="item3">item3</div> <div class="item4">item4</div> <div class="item5&q...
网页不能直接识别移动设备的实际像素大小再没有设置meta viewport的时候，网页只能识别硬件的物理像素，而非软件像素。物理像素：硬件本身的实际像素大小软件像素：设备尺寸限制，过大的像素并不能带来很好的体验，显示的内容过多反倒无法正常使用，于是有了软件像素，软件像素是基于一定像素比得到的值。比如 iPhone X的软件像素是：375px*812px；它的比是：3；那么它的物理像素就等于：(375*3)*(812*3)更多的对比可以去这个网站查看：mydevice然而实际上移动端设备都会有一个默认的宽度：980px，所以，即便我们没有设置meta viewport，网页也不可能真的使用...
子元素自身的order属性子元素的order的作用详解：默认情况下order的值都为0，如果这个值越小，那么就越靠近起始点，值越大，位置就越后，order其实用于移动元素的位置，而位置的方向则取决于父元素设置的：flex-direction子元素自身的align-self属性从正常角度，align-self是控制子元素y轴的对齐方式，也称侧轴对齐，这个y轴的定义也是取决于父元素flex-direction子元素自身的flex-basis属性flex-basis的效果，最好配合：flex-shrink:0;让子元素不被压缩。flex-basis会根据主轴的来设置元素的宽度还是高度：当主轴是...
正常情况下，如果想让左侧黄色20px的元素右侧与父元素齐平，父元素100px，我们的算法是这样：//100px - 20px transform: translateX(80px);x轴移动80px即可达到效果，但是如果我们同时使用scale放大，那么80px就不对了。transform:scale(2) translateX(80px);放大两倍后，你会发现平移的距离不对了。为什么？平移的距离明明就是70px啊！不着急，我们先看看不使用translateX平移，使用margin-left移动到与父元素右侧齐平再放大是什么样的。transform: scale(2); margin-le...
css3新增了三个伪类：:required、:valid、:invalid:required 表示input不能为空时使用的:valid 表示通过，表单元素和form表单都有的伪类:invalid 表示不通过，表单元素和form表单都有的伪类其实如果要做一个表单css校验样式，:valid和:invalid就行了，但是实际操作上，:invalid还是有一些问题的。当表单元素有required属性的时候，该表单元素默认就是:invalid，也就说，必填的表单元素，一开始就是不通过。所以，如果此时设置:invalid伪类样式，是不合适的。解决办法就是：使用:placeholder-shown...
这个问题还是同事发现的，毕竟我这种穷人根本用不起苹果，更何况也用不来，毕竟，我爱安卓。废话不多说，主要问题就是 iPhoneX底部小黑条问题，他的宽度也会被网页占据，导致小黑条显示在网页上头，第一是触发上会出现问题，第二是难看。解决办法就是通过css处理。解决方案首先对meta标签添加一条属性。<meta name="viewport" content="width=device-width, viewport-fit=cover">如果你已经有了viewport声明，那么就在后面content里加上viewport-fit=cover...
目前前端对字体的选择，最好的做法就是用系统的默认字体，这样省去了对每个操作系统的字体判断，谁知道我们指定的这个字体用户安装没有，而且字体文件一向都很大，特别是中文字体。但是对于指定系统字体，其实也是需要兼容的，这里就放上一个专业的字体文章：《奇思妙想 CSS 文字动画》；虽然这个文章名字叫动画，但是里面内容很丰富，自己学习。以css-tricks的为模板，提取其中精华，大概是这么一条信息：{ font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, ...
当我们给父元素设置flex布局的时候，子元素为了能够等分，常常flex-grow: 1;，但是你会发现，当里面有内容的时候，宽度就发生了变化，变得不是等分了。所以我们可以理解：flex-grow: 1其实他不是真正意义上的等分宽度，而是等分剩余宽度，而剩余宽度是总宽度减去内容宽度，再进行等分。而且这个等分甚至还是根据内容多少来等分，有的内容多，他等分还多一些。所以这就很尴尬。为此，如果想要真正的等分，就需要设置相同的width宽度。如：.value { width: 0; flex-grow: 1; }这样就行了。width的值0我感觉是最好的，如果你设置其他宽度也行，具体看自己...
fieldset这个元素，估计用的人很少吧，或者说现在使用fieldset情况已经很少了，大部分都是使用其他元素模拟这个元素的ui。今天我碰到一个很奇怪的现象。fieldset里面的元素，他不会产生横向滚动条，哪怕我设置了外部所有父元素的宽度为100%，overflow-x: auto;里面的子元素，如果比如pre这种代码块，不换行的，他会一直往右延伸，也就是超出原来的宽度，把fieldset撑的非常宽。但是所有的父元素都是block，按道理宽度是自己占满不会超出的。找了半天，理解出这么一段解释：fieldset默认是以block方式解析的，也就是宽度是按照100%占满，但是他的默认cs...
当我们给元素做了flex后，flex内的子元素宽度自适应，但是当我们给子元素设置文本溢出的时候，发现时候无效的，原因是因为他们的宽度没有限制，也就是说原始的宽度无限制，那么这个原始宽度又怎么说呢？他有一个优先级：优先级：flex-basis > width > 内容宽度。我们可以通过设置max-width或者min-width来限制他的宽度，但是并不是很合适，因为这两个只是一个区间，而我们的设备宽度是不固定的，所以设置一个固定的区间并没有用，我们需要的是这个元素它能在自适应的情况的下文本溢出依旧有效。我们给这个flex子元素设置width:0;即可，设置一个极小的宽度。
font-family: Helvetica Neue, PingFang SC, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: antialiased; color: #666; font-...
flex弹性布局flex第一种基本布局header会占据除去footer的所有高度，footer高度可以自己设置，默认是占满的。<div id="layout"> <div class="one">header</div> <div class="two">footer</div> </div>html,body { height: 100%; margin: 0; padding: 0; } #layout { heigh...
css3的grid格子布局中，对于设置格子大小的处理，要么是固定的，要么是百分比这种相对的。如果电脑端这个header的高度为50px，而手机端由于大小限制，原来50px可能要变成30px，那么此时我们可以利用媒体查询去调整：grid-template-rows属性。grid-template-rows: 30px 1fr;调整完这个大小后，我们还要调整里面元素的大小，这样做可能有点麻烦。甚至于我们可能只是改变了里面元素的布局而已，横向的布局改为竖列的多行布局，那么这个高度可能是无法精确获取的，如果内容的高度为100px呢，而我们只设置了30pxgrid的默认效果会是一个overflow...
本来想多搞几个文章的通用样式的，每次写主题，对于文章的样式确实很头疼，目前用的是vue的文章样式，很适合代码和文字混排，但是对于图文混排感觉一般般吧。所以就做了一个新的样式，仿《少数派》的css样式。预览图[hide]使用方法首先我们需要对使用改css样式的文章元素用一个div包裹，并且这个div的id为pai-md；<div id="pai-md"> 这里放文章内容 </div>这样css的作用域就设置好了，然后我们只需要在head引入这个pai.css即可。特殊的md写法## **红色数字**标题二级标题的第一个加粗元素颜色是红色高亮还...
关于自定义字体，我一开始只以为只能本地加载，也就是css里面定义的字体，都只能从本地加载到，但是后来我了解到字符图标，一开始也是照本宣科使用本地字体，这就导致了一个问题，如果服务器网速带宽不够，就会产生字符字体文件未加载完整时，有一个占位字符显示，时间一长就显得极度的难看。然后我使用了阿里矢量字体库里面的字体，是可以直接下载一个css文件，然后本地引用，就可以直接用了，我就奇了怪了，怎么做到的，当然，这个疑问到今天也就完全明白了。首先要明确一点，阿里巴巴的那个css文件虽然写的很多，但是个人测试的时候好像也不支持ie9以下，也不知道是代码问题还是什么，不过现在能兼容ie11就不错了。自定...
以前写过一篇关于字体渐变效果的文章，那时候初出茅庐，啥都不太懂，就只会个静态，这次逛animate.css网站的时候发现他的字体是动态渐变效果的，这就有点刺激了，于是研究了一下。效果图教程主要是利用了css3的滤镜效果，也就是hue-rotate()色调转盘，他会根据当前的颜色进行调整，大概可以理解为ps中的调整色相吧。 p { font-size: 60px; color: #f35626; background-image: linear-gradient(92deg, #f35626 0%, #feab3a 100%); -webkit-ba...
css控制文本溢出隐藏css兼容最好的就是单行文本溢出省略号了，我们先看下单行的css是怎么设置的：p { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }表示文本不换行，做一行显示，然后文本超出p元素的宽度做省略号显示，且为了兼容低版本浏览器加了超出部分裁剪的css效果。这个就是一个基本的文本溢出省略号显示的一个效果。但是，单行已经不能满足我们日常所需了，在一些文本简介中，我们都希望的是能够有多行的显示，再多则做省略号显示，这个功能目前来说，只有webkit内核的浏览器支持这个效果，i...
之前一直用的懒加载，也就是对同一个img元素做操作，通过load事件判断图片资源是否加载完毕然后替换src链接，但是今天我不想这么做了，这么做要写太多的代码，我想有没有纯css就能解决的办法。突然我想到以前逛别人博客的时候遇到的一个情况，就是他的图片是先高斯模糊的，然后再慢慢变得清楚，为此我想到了一种情况，也是用js判断，就是需要一张很小的缩略图，然后这个缩略图拉伸到和原图一样的大小显示，然后这个图浮动再原图上方，并且做高斯模糊处理，当大图load加载完毕，小图就做透明渐变直到display：none，但是这样也太麻烦了，不是我需要的，我需要的是纯css。于是我把目光放到了qq空间上，q...
手机端只要有输入框,弹出虚拟键盘后,一般来说都会压缩整个页面的高度,这就导致了一个问题,如果浮动于底部的标签就会被压上来,以及一些根据页面高度百分比定位的元素错位,解决这个问题目前我就只有一个办法: 固定整个页面的高度在页面每次加载后获取window的innerHeight高度,然后手动给body设置这个固定的px值,并将这个值储存起来,然后再加一个window的resize事件,当页面被压缩,该事件就会触发,此时我们就判断,如果此时的windw的innerHeight高度小于之前的值,那么就将浮动底部的元素隐藏起来.注意window.innerHeight和document.body....
这个问题一直困扰了我很久了,之前我做手机端侧栏nav的时候也会出现这个问题,因为不影响使用,也暂时没找到处理的办法,索性就没管了,今天尝试了几次方式,发现通过css设置就很很完美的解决的这个问题.首先这个问题一般都是因为我们阻止的touch事件导致的,谷歌为了让滑动能够顺滑,即便我们阻止了默认行为也是滑动的,所以才会出现这个错误.错误提示:[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See解决办法直接给body元素...
今天按着书写代码的时候发现一个问题，margin负值居然无法拉伸元素，在我的理解里margin四个值都为负值的时候是可以拉伸元素的。为此我还特意百度了下，也没找到什么有价值的信息，于是自己测试了下。当元素为block话的时候，也就是正常水平流状态时，使用margin负值是可以拉伸的，但是，当你的元素设置了宽高，那么负值就不能拉伸了。他会以top和left两个方向做位置偏移。而： position: absolute; top: 0; bottom: 0; left: 0; right: 0;这种状态元素也可以看做为一个block元素，正常的水平流状态。也能用margin负值拉伸！...
最近评论