css
关注
分享
扫一扫
街边吃垃圾
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
css 的渲染层合成是什么，浏览器如何创建新的渲染层
css渲染层、合成层原创 2023-03-05 02:28:51 · 786 阅读 · 0 评论 -
css强制换行无效的终极解决方案
参考文件：https://www.cnblogs.com/lantor/p/11644285.html发现，，，，，，，，，，，，，，，，，，，，这种在css里不会换行，哪怕你已经写了word-break: break-all overflow-wrap: break-word; /*就是下面这一句，好像网上没有这一个的说明，但是浏览器都支持*/ word-break: break-word; word-wrap: break-word;...原创 2021-04-21 20:27:23 · 2397 阅读 · 0 评论 -
canvas截屏视频流画面
代码：// 用canvas 画 video的截图function GrabImage() { this.canvas = null; this.ctx = null; this.width = 0; this.height = 0; this.createCanvas = function(info) { if (this.canvas != null) { return; } this.c原创 2021-03-25 21:55:30 · 549 阅读 · 0 评论 -
左右固定中间自适应三栏布局
参考：https://blog.csdn.net/a18792627168/article/details/79686746原创 2021-03-23 10:26:07 · 192 阅读 · 0 评论 -
css样式优先级权重排名
important > 内联样式 > ID > 类 | 伪类 | 属性选择 > 标签 | 伪元素 > 继承 > 通配符原创 2021-03-16 01:08:25 · 399 阅读 · 0 评论 -
css动画
动画css有两种实现方法：transition、animationtransitiontransition-property: height; 动画属性transition-duration: 1s; 动画时间transition-delay: 2s; 延迟transition-timing-function: ease; 动画效果<div></div><style>div{ height:150px; width:150px;原创 2021-01-12 16:45:40 · 147 阅读 · 0 评论 -
html5和css3新特性
待会写原创 2021-01-11 15:55:11 · 201 阅读 · 1 评论 -
display:flex的讲解
阮一峰：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html原创 2021-01-07 09:44:21 · 453 阅读 · 0 评论 -
position有几个值
参考：https://www.cnblogs.com/jiunie/p/7928816.html原创 2021-01-04 11:04:08 · 607 阅读 · 0 评论 -
css盒模型
盒模型的组成，由里向外：content,padding,border,margin.在IE盒子模型中，width=content+padding+border在标准的盒子模型中，width=content部分的宽度box-sizingbox-sizing: content-box 是W3C盒子模型box-sizing: border-box 是IE盒子模型box-sizing的默认属性是content-box...原创 2021-01-01 14:50:19 · 119 阅读 · 0 评论 -
说一说BFC
BFC是什么，如何隔离作用，内部不受外部的影响（内部元素不受外部元素的影响）一个元素只能存在一个BFC中BFC的元素按正常流排列，元素之间的间隙由元素的外边距（margin）控制。BFC的内容不会与外面的浮动元素重叠。计算BFC的高度，需要包括BFC内的浮动自元素的高度。创建BFC根元素，也就是html元素float属性不为none的浮动元素position的属性是absolute或fixed的定位元素display属性为inline-block、table-cell（相当于td或原创 2020-12-29 17:58:41 · 103 阅读 · 0 评论 -
吸顶效果的实现js/css
css实现（position:sticky）<div><div class="header"></div><nav> 用于显示粘性定位的头</nav><div class="content"></div><footer> 底部</footer></div><style>.header { width:100%; height:16原创 2020-08-10 11:06:46 · 746 阅读 · 1 评论 -
多行文字最后一行显示省略号
人不能懒~ 请务必加上word-bread:break-all这句话&amp;amp;amp;lt;!DOCTYPE HTML&amp;amp;amp;gt;&amp;amp;amp;lt;html&amp;amp;amp;gt;&amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;amp;amp;lt;meta charset=&a转载 2018-05-31 19:13:58 · 1230 阅读 · 0 评论 -
css、jq实现移动（动画）效果
我个人觉得写博客费时间，不过却很值。因为学过的一些东西会忘记，还要去查阅。如果将自己已经查阅的东西整理出来，那直接看就太好了。一、CSS代码：&amp;amp;lt;style&amp;amp;gt; div{ position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /*S...原创 2018-08-14 00:39:47 · 3703 阅读 · 0 评论 -
css实现一段文字的两端分散对齐（兼容所有浏览器）
参考： https://blog.csdn.net/zgpeterliu/article/details/80094869 PS： ！！！！注意必须是文字，如果是数字或者abc这种会聚在一起 各个浏览器我都试了是没问题的，如果有问题请留言告知。 代码&amp;lt;style&amp;gt;div { text-align-last:justify; t...原创 2018-08-22 09:44:01 · 24258 阅读 · 5 评论 -
关于浏览器兼容问题的总结（不定时更新）
1、float和absolute的兼容性问题代码块：<div> <img src="./1.jpg" style="position: absolute;width: 50px;height: 50px;" /> <img src='./3.jpg' style="width: 50px;height: 50px;float: left" /&..原创 2018-08-27 19:27:24 · 320 阅读 · 0 评论 -
line-height:150%、line-height:1.5、line-height: 1.5em的真正区别是什么？
先上结论：1. 数字的时候，子元素的行高 = 子元素的字体大小 * 数字 2. 百分比和em单位时，子元素的行高 = 父元素的字体大小 * 百分比（或者em单位的值）1、百分比代码：<div style="line-height:150%;font-size:16px;width:300px"> 父元素内容 <div style="f...原创 2018-08-30 19:40:32 · 2106 阅读 · 1 评论 -
关于css实现毛玻璃效果
参考： https://www.cnblogs.com/ghost-xyx/p/5677168.html人家的效果图： https://darylxyx.github.io/Demo/blur如果你想知道如何一步步这个功能，请看参考链接。如果你着急用，直接copy我下面的代码就OK了<body> <div class="content"> <div cl...原创 2019-05-10 10:38:42 · 9126 阅读 · 3 评论 -
关于background的一些用法
1、在登陆页经常有张背景图片。<body></body><style>body { background: url(http://static.ixuezhong.cn/uploadimg/admin/20190522/9e5f80182ca84201bcd6ac190743d004.png) center center / cover no-re...原创 2019-06-14 13:45:07 · 1310 阅读 · 0 评论 -
css实现一个三角形
代码：<div></div><style>div { width: 0; height: 0; border-top: 50px solid red; border-bottom: 50px solid yellow; border-right: 50px solid green; border-left: 50px solid blue;}...原创 2019-06-19 11:59:54 · 7165 阅读 · 0 评论 -
flex布局超过显示省略号
注：转载 http://blog.csdn.net/zgh0711/article/details/78270555代码块meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">div class="main"> div class="content">转载 2018-01-29 21:06:28 · 25088 阅读 · 1 评论