随笔分类 - CSS
摘要：问题 项目中使用antd的ProTable表格，在打印时发现表头不全，如下图： 表格有5列，但表头只展示了3列，审查元素发现table下有个colgroup来控制表头宽度 解决 修改代码： 在打印时隐藏colgroup即可 @media print { colgroup { display: non
阅读全文
摘要：## 实现效果  ## 代码 本文使用react实现，其他同理 index.js ``` import React
阅读全文
摘要：## 定义和用法 table-layout 属性用来显示表格单元格、行、列的算法规则。 **table-layout有三个属性值：auto、fixed、inherit。** * **fixed：固定表格布局** 固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。 **在固定表格布局中，
阅读全文
摘要：问题： 子元素使用transform:rotate(90deg) 旋转90度，并没有如愿的自动将父元素撑开宽高，那么，如何正常的撑开父元素（高宽对应） 思路： 在旋转后，我们可通过获取子元素当前的宽高，来赋值给父元素，那么，代码如下： 注意：需要注意的是，我们需要判断当前是否为已旋转，如果已旋转，那
阅读全文
摘要：antd的Select 官方给出的框架用起来是很方便，但是美观程度差强人意，给出的API里虽有className属性，但是这是进行修改Option的样式 我们审查元素可以看到，下拉框是在body中的，这就无法通过在Select外层直接包一层div就来保证不影响其他Select的下拉框样式。 解决 查
阅读全文
摘要：代码： .bounceOutLeft { -webkit-animation : bounceOutLeft .5s 1; animation : bounceOutLeft .5s 1; animation-fill-mode: forwards; position : absolute; top
阅读全文
摘要：在开发的过程中，常常会遇到头部高度是40px，而内容页是除去头部，占满视窗的整个高度，有时候是用js来处理，现在用css的calc是非常方便的: .container{ height: calc(100% - 40px); // 注：减号前后要有空格，否则很可能不生效！！ } 注意：如果用了CSS预
阅读全文
摘要：cursor:hand;手型 cursor:pointer;手型 cursor:auto;由系统自动给出 cursor:crosshair;十字型 cursor:text;I字形 cursor:wait;等待 cursor:default;默认 cursor:e-resize;向右的箭头 curso
阅读全文
摘要：当按钮比较小的时候，为了使用体验，我们会扩大点击热区，实现代码如下： （我们用react代码举例，其他的大同小异。） jsx: ``` {...doSomething}}>显示 { // doSomething... }} /> ``` css ``` .btn { width: 24rpx; he
阅读全文
摘要：动画场景： 让一个圆形图框让它转动起来。当然如果单纯这样做很简单，声明一个keyframe,控制transform: rotate(deg)属性从0到360度变化。然后在animation中使用这个keyframe就可以了。 在这个基础上再要求： 增加动画的暂停和重新播放功能。 这样的话又该如何实现
阅读全文
摘要：方法一： table实现（不推荐） 设置html,body,table宽高为100%； 缺点：如果td中的内容超出了，那么格子大小就会改变。 方法二： flex布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit
阅读全文
摘要：遇到的问题： （暂时不知道为什么会出现这个问题） 页面中的顶部导航条，使用了固定定位（fixed），背景色为线性渐变(颜色使用rgb)，这时元素底部出现一条黑边， 解决方法：把线性渐变的颜色设置为rgba()。 background: linear-gradient(top, rgba(255, 1
阅读全文
摘要：在css中使用@font-face引入字体文件浏览器解析异常：Failed to decode downloaded font问题 fire-fox下载报错：downloadable font: overlapping tables + downloadable font: rejected by
阅读全文
摘要：只需要给网站加个滤镜就可以解决，通过几行代码就可以实现网页变灰这个功能。 方法一 在common.css中添加： html { filter:grayscale(100%); /* 下面这句：IE下的滤镜，如果直接写上面的属性，在IE下是无法实现的，所以需要加上下面这句，括号中是需要的属性 */ f
阅读全文
摘要：需求 在刚进到页面时，需要根据后端传来的数据，判断要加载哪张图片，再获取图片的高度，来调整页面样式。 问题 在打开页面时，图片是加载出来了，但获取图片高度却为0，why... $(".top-btn").height(); //0 解决 造成这样结果的原因是，图片在修改src之后，它要去寻找图片的路
阅读全文
摘要：网上大部分方案如下，即给出现滚动条的元素 ::-webkit-scrollbar 添加 display: none; html,body { width: 100%; height: 100%; overflow-y: scroll; } body::-webkit-scrollbar { disp
阅读全文
摘要：在做页面时，希望点击"打印"按钮，只把printonly中的内容打印出来，代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> @media print { .noprint,
阅读全文
摘要：实现效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .content,.outer-container { width: 200px; height: 200px
阅读全文
摘要：:focus a标签有点特殊,需要设置： a,a:hover,a:active,a:visited,a:link,a:focus{ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;
阅读全文
摘要：基本概念 Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。 采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。 如何转换为Fl
阅读全文
浙公网安备 33010602011771号