![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
街边吃垃圾
这个作者很懒,什么都没留下…
展开
-
css 的渲染层合成是什么,浏览器如何创建新的渲染层
css渲染层、合成层原创 2023-03-05 02:28:51 · 638 阅读 · 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 · 1980 阅读 · 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 · 491 阅读 · 0 评论 -
左右固定中间自适应三栏布局
参考:https://blog.csdn.net/a18792627168/article/details/79686746原创 2021-03-23 10:26:07 · 156 阅读 · 0 评论 -
css样式优先级权重排名
important > 内联样式 > ID > 类 | 伪类 | 属性选择 > 标签 | 伪元素 > 继承 > 通配符原创 2021-03-16 01:08:25 · 327 阅读 · 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 · 120 阅读 · 0 评论 -
html5和css3新特性
待会写原创 2021-01-11 15:55:11 · 178 阅读 · 1 评论 -
display:flex的讲解
阮一峰:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html原创 2021-01-07 09:44:21 · 417 阅读 · 0 评论 -
position有几个值
参考:https://www.cnblogs.com/jiunie/p/7928816.html原创 2021-01-04 11:04:08 · 563 阅读 · 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 · 99 阅读 · 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 · 86 阅读 · 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 · 700 阅读 · 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 · 1186 阅读 · 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 · 3619 阅读 · 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 · 23066 阅读 · 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 · 283 阅读 · 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 · 2030 阅读 · 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 · 9053 阅读 · 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 · 1245 阅读 · 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 · 7093 阅读 · 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 · 24571 阅读 · 1 评论