css日常总结
关注
分享
扫一扫
文章平均质量分 76
css技巧
丑小鸭变黑天鹅
奋斗吧，年轻人！
展开
-
网页自定义滚动条的样式
网页自定义滚动条的样式基础代码如下<div class="content"> <div class="contentHeight"></div></div>.content { width: 300px; height: 300px; overflow: hidden; overflow-y: scroll; background-color: #00FFFF; border: 1px solid #000;}.contentHei原创 2022-02-24 21:52:58 · 501 阅读 · 0 评论 -
CSS3自适应字体大小
CSS3自适应字体大小一、viewpoint二、 其他方案一、viewpointcss3提供了一些与当前viewpoint相关的元素，vw，vh，vmin, vmax等。“viewpoint” = window sizevw = 1% of viewport width1vh = 1% of viewport height1vmin = 1vw or 1vh, 最小1vmax = 1vw or 1vh, 最大兼容性：chrome 20+/ safari 6+/ IE 10+ / FF 1转载 2021-11-24 11:48:36 · 2096 阅读 · 0 评论 -
炫酷的按钮
炫酷的按钮<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .search-ok { width: 200px; height: 30px; line-height: 30px; background-image:原创 2021-07-28 09:57:58 · 177 阅读 · 0 评论 -
利用transform：translate使div居中显示
利用transform：translate使div居中显示之前一直在用这个属性让某个div居中显示，但是一直有一个困惑，我想同时让水平和垂直都居中，可是水平方向总会有一点偏差，看一下以前怎么写的。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { mar原创 2021-04-22 12:58:50 · 1523 阅读 · 0 评论 -
探讨一下flex取值的问题
探讨一下flex取值的问题1、研究flex-grow2、研究flex-shrink；3、我们再来研究一下flex-basis4、列一些常见的flex简写对应的全写首先明确一点是， flex 是 flex-grow、flex-shrink、flex-basis的缩写。flex-grow定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大flex-shrink定义了项目的缩小比例，默认为1,即如果空间不足，该项目将缩小flex-basis给上面两个属性分配多余空间之前,计算项目是否有多余空间,默认原创 2021-03-29 16:15:36 · 365 阅读 · 0 评论 -
span之间的空隙怎样解决？
span之间的空隙怎样解决？一、问题描述二、分析原因三、解决办法1、使用float:left2、使用margin-right3、使用letter-spacing 属性和word-spacing属性一、问题描述今天做项目的时候用到了一些列span来做一个标题栏如图但是做的过程中遇到了一点问题，先看看有问题的代码<table border="" cellspacing="0" cellpadding="0" id="list"> <div class="th"> <原创 2021-04-16 23:01:36 · 1742 阅读 · 1 评论 -
在td中设置overflow:hidden无效的解决办法
在td中设置overflow:hidden无效的解决办法一、问题描述二、解决办法一、问题描述最近做项目的时候，需要一个表格去展示数据。其实是很简单的一个业务，但是今天碰到了一点小问题。就是当td中的内容太多的时候，我不想让其换行，也不想让其显示的特别长。所以就想到咋们常用的一种方法，设置其不换行，移除部分隐藏，然后用省略号代替移除部分。具体就这三行代码。 white-space: nowrap; /*规定段落的文本不进行换行*/ overflow: hidden; /*超出隐藏*/ text-原创 2021-04-16 19:32:10 · 1754 阅读 · 0 评论 -
水波纹效果
水波纹效果<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .pie { position: relative; width: 200px; height: 200px; margin: 100px auto; } .wave原创 2021-04-07 15:12:39 · 123 阅读 · 0 评论 -
css画半圆或者扇形你懂其原理吗？
css画半圆或者扇形你懂其原理吗？一、原理分析二、css画半圆实战代码三、扇形实战一、原理分析在这里就不详细介绍了，我之前写过一篇css画三角的原理分析，画半圆和画三角基本上原理一致。唯一不同的是，需要添加border-radius。如果你还不明白原理，直接坐飞机先去看一看原理，回来再看这篇文章就轻而易举了。深入剖析css三角原理二、css画半圆实战代码<!DOCTYPE html><html> <head> <meta charset="utf-原创 2021-04-07 14:41:16 · 723 阅读 · 0 评论 -
css实现div宽度自适应，宽高保持等比缩放
css实现div宽度自适应，宽高保持等比缩放1、方式一2、方式二3、方式三4、方式四1、方式一<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .square { width: 30%; height: 30vh; border: 1px so原创 2021-03-29 14:40:09 · 20983 阅读 · 3 评论 -
css伪类与伪元素的区别
css伪类与伪元素的区别1、伪类(pseudo-classes)2、伪元素(Pseudo-elements)3、伪类与伪元素的区别1、伪类(pseudo-classes)其核心就是用来选择DOM树之外的信息不能够被普通选择器选择的文档之外的元素，用来添加一些选择器的特殊效果。比如:hover :active :visited :link :visited :first-child :focus :lang等由于状态的变化是非静态的,所以元素达到一个特定状态时，它可能得到一个伪类的样式;当状态改变时，原创 2021-03-29 14:13:19 · 5300 阅读 · 0 评论 -
记录几个很好用的css功能
记录几个很好用的css功能一、过滤功能二、writing mode三、圆锥梯度函数四、CSS calc ( ）函数五、混合模式一、过滤功能filter CSS中的函数用于将图形效果应用于元素。你可以实现很多的效果，因为过滤功能有很多其他的功能。filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate()原创 2021-03-29 00:21:22 · 142 阅读 · 0 评论 -
层叠顺序与堆栈上下文知多少
层叠顺序与堆栈上下文知多少z-index 看上去其实很简单，根据 z-index 的高低决定层叠的优先级，实则深入进去，会发现内有乾坤。看看下面这题，定义两个 div A 和 B，被包括在同一个父 div 标签下。HTML结构如下：<div class="container"> <div class="inline-block">#divA display:inline-block</div> <div class="float"> #d转载 2021-03-21 15:11:22 · 141 阅读 · 0 评论 -
谈谈background的内在乾坤
谈谈background的内在乾坤一、background都有那些属性二、和盒模型之间的关系三、我们用刚才学到的知识写一个下面的这样效果一、background都有那些属性通常建议使用background这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。这些属性使用起来都很简单，我就不具体举例了。我想说一说他和和模型之间的关系二、和盒模型之间的关系当给一个盒子填充背景色或者背景图片的时候，这里就有说法了。下面介绍一下。backgroun原创 2021-03-21 15:03:57 · 137 阅读 · 0 评论 -
css3中的盒阴影的使用
css中的盒阴影的使用我们可以利用阴影做出一些立体或者看起来动态的效果。语法box-shadow: h-shadow v-shadow blur spread color inset;实例内部阴影和外部阴影<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .i原创 2021-03-20 13:50:44 · 151 阅读 · 0 评论 -
你经常用的line-height使内容垂直居中，你真的懂它的原理吗？
你经常用的line-height使内容垂直居中，你真的懂它的原理吗？一、line-height是什么二、分析其原理三、扩展一下一、line-height是什么line-height 属性设置行间的距离（行高），说的直白一点，就是设置两段段文本之间的距离如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了。二、分析其原理首先来看个图如图，每一行文字，可看成由上间距、文本内容、下间距构成，根据行高的标准定义，行高等于两条基线之间的距离，即第一行的3-4+上下间距+第二原创 2021-03-20 13:37:31 · 9394 阅读 · 2 评论 -
字体图标的使用
字体图标的使用一、介绍二 、我熟知的两个库三、iconfont的使用四、icomoon的使用一、介绍字体图标可以很好的解决我们的一些需求，有时候我们需要插入一些图标去丰富页面，如果插入ps做的图片图标，那么我们只能调整它的大小，改变不了颜色等其他属性。而字体图标就可以非常好的解决这一问题，你引入它之后可以对其做样式修改，颜色，大小等等。二 、我熟知的两个库1、国内阿里的产品https://www.iconfont.cn/重点是免费哦，免费哦！2、国外的https://icomoon.io/部分免费原创 2021-03-19 15:58:41 · 237 阅读 · 0 评论 -
css的一些技巧片段（一）
css的一些技巧片段一、垂直居中、水平居中二、背景渐变动画三、制造模糊文本一、垂直居中、水平居中<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .outer { position: relative; width: 500px; height原创 2021-03-19 14:35:01 · 129 阅读 · 0 评论 -
深入剖析css三角原理
深入剖析css三角原理一、原理分析二、实战操作1、通过实例去清晰的了解原理2、实战三角形3、气泡框制作一、原理分析如上图所示，一个div盒子包括margin+border+padding+content而这些边框的交界处，如图中的红框的地方，上下左右边框的交界处会出现斜线，我们就是利用这个特点，然后给予不同的宽和高就可以得到我们想要的三角。二、实战操作1、通过实例去清晰的了解原理<html> <head> <meta charset="utf-8">原创 2021-03-19 13:35:00 · 364 阅读 · 0 评论 -
你知道css禁止选中文本、选择首行文本、选择首字母、选择高亮（被选中）的区域怎么操作吗？
你知道css禁止选中文本、选择首行文本、选择首字母、选择高亮（被选中）的区域怎么操作吗？1、css禁止选中文本2、css伪类选择器::first-line|选择文本的首行。3、选择首字母::first-letter4、选择高亮（被选中）的区域::selection1、css禁止选中文本只需要添加这样一个属性user-select: none;举个例子没添加之前点着点着就选中了这些文本，太影响页面美观了，没有很好的用户体验添加了之后随便你怎么点，都不会变样。再说一下它的另外几个取值tex原创 2021-03-18 13:45:57 · 666 阅读 · 0 评论 -
你还在困惑nth-child和nth-of-type到底有什么区别吗？
你还在困惑nth-child和nth-of-type到底有什么区别吗？nth-child它本质上是按照个数的计算的，意思就是你选择第几个，他就显示第几个nth-of-type他本质上是根据类型去选择的。1、看一个例子使用nth-child时 <div class="nth-child"> <p>哈哈哈哈哈哈</p> <span>hahahahah</span> <span>hahahhaahha</s原创 2021-03-18 13:18:06 · 216 阅读 · 0 评论 -
多种布局方式，很有意思
多种布局方式，很有意思一、 利用grid实现居中效果二、自适应布局三、 经典侧边栏四、 固定的页眉页脚五、圣杯布局六、RAM技巧七、卡片弹性适应性八、使用夹具实现流体印刷九、aspect-ratio本篇文章的技巧都是基于学过grid布局，懂其原理的基础上。如果还不知道grid布局，请坐飞机看博主另一篇文章超级强大的grid布局一、 利用grid实现居中效果在没有和flex和grid之前，垂直居中一直不能很优雅的实现。而现在，可以结合我们grid和place-items优雅的实现同时水平居中和垂直居中原创 2021-03-17 13:44:29 · 829 阅读 · 0 评论 -
css之让尾部永远固定在页面最下方
css之让尾部永远固定在页面最下方一、开发可能遇到的问题二、如何解决方法一方法二方法三方法四一、开发可能遇到的问题当你做一个项目的时候，可能有多个页面，但是每个页面用到的头部导航栏和尾部信息栏可能一样，所以就可以把他们写到一个公共的css文件。现在思考一个问题，当一个页面显示的内容特别少的时候，可能只占整个可视区域的30%，这种情况下，怎么让尾部永远固定在页面最下方呢？也就是说，当内容少的时候，尾部直接显示在可视区域最下方，当内容多的时候，我们最初只能看到内容，看不到尾部，但随着滚动条的滚动，可以看到原创 2021-03-09 22:08:24 · 8502 阅读 · 0 评论 -
理解CSS布局和块格式化上下文
理解CSS布局和块格式化上下文在进行html布局及css编写的时候，你是否遇到过这样的问题：什么是BFC？什么情况下会创建BFC？常见应用场景使父元素包含浮动元素BFC防止垂直外边距重叠BFC防止文本环绕创建BFC的新方式首先声明，本篇文章转载自微信公众号“前端新视界”，博主当时看完受益匪浅，所以想在自己博客记录一下，以便日后使用，如有侵权或者其他问题，请联系博主删除，博主QQ：1105810790在进行html布局及css编写的时候，你是否遇到过这样的问题：子元素设置浮动脱离文档流后，父元素无法将其转载 2021-03-04 12:27:39 · 146 阅读 · 1 评论 -
css单位你知道多少？
css单位一、绝对单位：px in cm mm1、px2、in3、cm4、mm二、相对单位：em rem pt pc ex ch1、em2、rem3、pt4、pc5、ex6、ch百分比单位：vw vh vm %1、%2、vh/vm/vmin/vmax一、绝对单位：px in cm mm1、px即像素pixel，它是最基础也是最常用的一个长度单位，绝对单位，页面按精确像素展示相对长度单位，浏览器的度量单位，相对于物理像素（显示器屏幕分辨率），1px在高清屏幕下可能占用2个物理像素、甚至3个物理像素，原创 2021-02-18 09:51:26 · 1396 阅读 · 0 评论