前言 最近在写目录树跳转功能的时候，还是遇到之前的那个老大难的问题，就是因为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 {}...
1px在不同设备的一个探究 其实我们要搞明白两个问题： 为什么有时候边框无法在部分手机显示？ 我们真的要小于1px吗 为什么有时候边框无法在部分手机显示？ 有两种设置方式： 0.5px 0.22rem 首先0.5px在老手机是不支持的，特别是安卓，0.5px（小于1px）会被视为1px渲染。 0.22rem或者0.22em他们都是相对父级或者根元素进行换算的，最终他们也得变成px单位渲染，有可能是大于1px，有可能会小于1px，最终也会出现部分手机边框是粗的，原因也是因为不足1px被当1px渲染了。 还有一个原因，但是需要先了解一些屏幕像素的知识了！ 我们可以将屏幕的像素视为一个...
rotate的坐标轴和默认值 z轴可以看成正对着自己脸的一根轴，每个轴的旋转方向默认如图箭头所示。 所有的旋转角度，正值都是根据默认的旋转方向来得，负值则是相反。 transform: rotateZ(45deg); 只有Z轴的旋转再二维的界面才是有效的，如下图所示： 因为在二维的界面Z轴的变化才是有效的，所以默认值的设置就是Z轴，所以简写形式等效于rotateZ transform: rotate(45deg); /*等同于rotateZ(45deg)*/ translate translate的变化是根据元素的坐标轴而变化的，比如X轴移动100px; transform: tra...
网页不能直接识别移动设备的实际像素大小 再没有设置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); ...
css3新增了三个伪类：:required、:valid、:invalid :required 表示input不能为空时使用的 :valid 表示通过，表单元素和form表单都有的伪类 :invalid 表示不通过，表单元素和form表单都有的伪类 其实如果要做一个表单css校验样式，:valid和:invalid就行了，但是实际操作上，:invalid还是有一些问题的。 当表单元素有required属性的时候，该表单元素默认就是:invalid，也就说，必填的表单元素，一开始就是不通过。 所以，如果此时设置:invalid伪类样式，是不合适的。 解决办法就是： 使用:placeh...
这个问题还是同事发现的，毕竟我这种穷人根本用不起苹果，更何况也用不来，毕竟，我爱安卓。 废话不多说，主要问题就是 iPhoneX底部小黑条问题，他的宽度也会被网页占据，导致小黑条显示在网页上头，第一是触发上会出现问题，第二是难看。 解决办法就是通过css处理。 解决方案 首先对meta标签添加一条属性。 <meta name="viewport" content="width=device-width, viewport-fit=cover"> 如果你已经有了viewport声明，那么就在后面content里加上viewport-fit=cover即可。 viewport-...
目前前端对字体的选择，最好的做法就是用系统的默认字体，这样省去了对每个操作系统的字体判断，谁知道我们指定的这个字体用户安装没有，而且字体文件一向都很大，特别是中文字体。 但是对于指定系统字体，其实也是需要兼容的，这里就放上一个专业的字体文章：《奇思妙想 CSS 文字动画》；虽然这个文章名字叫动画，但是里面内容很丰富，自己学习。 以css-tricks的为模板，提取其中精华，大概是这么一条信息： { font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Aria...
当我们给父元素设置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%占满，但是...
当我们给元素做了flex后，flex内的子元素宽度自适应，但是当我们给子元素设置文本溢出的时候，发现时候无效的，原因是因为他们的宽度没有限制，也就是说原始的宽度无限制，那么这个原始宽度又怎么说呢？ 他有一个优先级： 优先级：flex-basis > width > 内容宽度。 我们可以通过设置max-width或者min-width来限制他的宽度，但是并不是很合适，因为这两个只是一个区间，而我们的设备宽度是不固定的，所以设置一个固定的区间并没有用，我们需要的是这个元素它能在自适应的情况的下文本溢出依旧有效。 我们给这个flex子元素设置width:0;即可，设置一个极小的宽度。
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 { height: 100%; color: #fff; ...
css3的grid格子布局中，对于设置格子大小的处理，要么是固定的，要么是百分比这种相对的。 如果电脑端这个header的高度为50px，而手机端由于大小限制，原来50px可能要变成30px，那么此时我们可以利用媒体查询去调整：grid-template-rows属性。 grid-template-rows: 30px 1fr; 调整完这个大小后，我们还要调整里面元素的大小，这样做可能有点麻烦。 甚至于我们可能只是改变了里面元素的布局而已，横向的布局改为竖列的多行布局，那么这个高度可能是无法精确获取的，如果内容的高度为100px呢，而我们只设置了30px grid的默认效果会是一个ove...
本来想多搞几个文章的通用样式的，每次写主题，对于文章的样式确实很头疼，目前用的是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%); -webk...
css控制文本溢出隐藏 css兼容最好的就是单行文本溢出省略号了，我们先看下单行的css是怎么设置的： p { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 表示文本不换行，做一行显示，然后文本超出p元素的宽度做省略号显示，且为了兼容低版本浏览器加了超出部分裁剪的css效果。 这个就是一个基本的文本溢出省略号显示的一个效果。 但是，单行已经不能满足我们日常所需了，在一些文本简介中，我们都希望的是能够有多行的显示，再多则做省略号显示，这个功能目前来说，只有webkit内核的浏览器支持这...
之前一直用的懒加载，也就是对同一个img元素做操作，通过load事件判断图片资源是否加载完毕然后替换src链接，但是今天我不想这么做了，这么做要写太多的代码，我想有没有纯css就能解决的办法。 突然我想到以前逛别人博客的时候遇到的一个情况，就是他的图片是先高斯模糊的，然后再慢慢变得清楚，为此我想到了一种情况，也是用js判断，就是需要一张很小的缩略图，然后这个缩略图拉伸到和原图一样的大小显示，然后这个图浮动再原图上方，并且做高斯模糊处理，当大图load加载完毕，小图就做透明渐变直到display：none，但是这样也太麻烦了，不是我需要的，我需要的是纯css。 于是我把目光放到了qq空间上...
手机端只要有输入框,弹出虚拟键盘后,一般来说都会压缩整个页面的高度,这就导致了一个问题,如果浮动于底部的标签就会被压上来,以及一些根据页面高度百分比定位的元素错位,解决这个问题目前我就只有一个办法: 固定整个页面的高度 在页面每次加载后获取window的innerHeight高度,然后手动给body设置这个固定的px值,并将这个值储存起来,然后再加一个window的resize事件,当页面被压缩,该事件就会触发,此时我们就判断,如果此时的windw的innerHeight高度小于之前的值,那么就将浮动底部的元素隐藏起来. 注意 window.innerHeight和document.bo...
这个问题一直困扰了我很久了,之前我做手机端侧栏nav的时候也会出现这个问题,因为不影响使用,也暂时没找到处理的办法,索性就没管了,今天尝试了几次方式,发现通过css设置就很很完美的解决的这个问题. 首先这个问题一般都是因为我们阻止的touch事件导致的,谷歌为了让滑动能够顺滑,即便我们阻止了默认行为也是滑动的,所以才会出现这个错误. 错误提示: [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See 解决办法 直接给b...
今天按着书写代码的时候发现一个问题，margin负值居然无法拉伸元素，在我的理解里margin四个值都为负值的时候是可以拉伸元素的。 为此我还特意百度了下，也没找到什么有价值的信息，于是自己测试了下。 当元素为block话的时候，也就是正常水平流状态时，使用margin负值是可以拉伸的，但是，当你的元素设置了宽高，那么负值就不能拉伸了。 他会以top和left两个方向做位置偏移。 而： position: absolute; top: 0; bottom: 0; left: 0; right: 0; 这种状态元素也可以看做为一个block元素，正常的水平流状态。也能用margi...
最近评论