css
Arden Zhao
这个作者很懒,什么都没留下…
展开
-
Day 118/200 新好用UI框架——taiwindcss
写在前面的话比bootstramp的功能更强大 也更好用;是目前前端UI框架中排名第一;推荐理由1:一切皆是响应式适配PC端和移动端;推荐理由2:原子特性样式组件等是基于最细颗粒度的控制推荐理由3:支持主流框架Vue,React等其他的还有深色模式等等安装教程官网给了几乎所有的方案,选择一种适合你的就可以https://www.tailwindcss.cn/docs/installation以上...原创 2021-04-12 16:22:04 · 420 阅读 · 0 评论 -
css 查缺补漏
1、外部引入链接:<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css"> 2、CSS继承(1)字体类:font-weight,font-size,font-family,font-style(2)文本类:text-indent,text-...原创 2018-08-07 15:54:40 · 276 阅读 · 0 评论 -
position: absolute 与 transform 来居中块级元素的问题
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);画一个图应该就很清晰明了了第一步第二步所以本质上理解1.绝对定位元素的定位基准点是其有定位元素的祖先元素而translate要做偏移,是相对于自身的中心点而言,如果用百分比做单位,参考值就是本身元素的宽度转自 点击打开链接...转载 2018-05-11 16:38:34 · 1967 阅读 · 0 评论 -
CSS样式表继承
什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始。文档树由HTML元素组成。文档树和家族树类似,也有祖先、后代、父亲、孩子和兄弟^_^。这很容易理解吧,笔者在这里就不一一赘述了。希望深入了解的朋友请google之。那么CSS样式表继承指的是,特定的CSS属性向下传递到子孙元素。下面举个例子,有如下html代码片段:<p>CSS样式表<em&g...转载 2018-04-24 19:37:27 · 173 阅读 · 0 评论 -
Css 定位
position 属性规定元素的定位类型。说明这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。默认值:static继承性:no版本:CSS2JavaScript 语法:object.style.position="absolute"可能的值值描述absolute生成绝对定位的...转载 2018-04-24 19:20:50 · 104 阅读 · 0 评论 -
css 文本超出2行就隐藏并且显示省略号
首先,要知道css的三条属性。overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行这三个是css的基础属性,需要记得。但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢?css3解决了这个问题,解决方法如下:display:-webkit-box; //将对象作为弹...转载 2018-04-09 15:14:30 · 814 阅读 · 0 评论 -
深入理解CSS盒模型
如果你在面试的时候面试官让你谈谈对盒模型的理解,你是不是不知从何谈起。这种看似简单的题其实是最不好答的。 下面本文章将会从以下几个方面谈谈盒模型。基本概念:标准模型 和IE模型CSS如何设置这两种模型JS如何设置获取盒模型对应的宽和高实例题(根据盒模型解释边距重叠)BFC(边距重叠解决方案) 基本概念盒模型的组成大家肯定都懂,由里向外content,padding,border,margin.盒...转载 2018-04-09 09:35:14 · 155 阅读 · 0 评论 -
CSS position 属性
定义和用法position 属性规定元素的定位类型。说明这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。默认值:static继承性:no版本:CSS2JavaScript 语法:object.style.position="absolute"可能的值值描述absolute生成...转载 2018-02-11 23:10:12 · 404 阅读 · 0 评论 -
不受控制的 position:fixed
大家都知道,position:fixed 在日常的页面布局中非常常用,在许多布局中起到了关键的作用。它的作用是:position:fixed 的元素将相对于屏幕视口(viewport)的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。但是,在许多特定的场合,指定了 position:fixed 的元素却无法相对于屏幕视口进行定位。这是为何呢?失效的 position:fixed在许多情况下,...转载 2018-02-11 22:58:31 · 1030 阅读 · 0 评论 -
谷歌模拟调试iphone6 时宽度显示是375px但是用箭头指针指向时显示宽度为980px
原因:由于我们大部分移动设备默认的viewport都是980px解决方案:参考文献:一些关于Viewport与device-width的东西~原创 2017-09-11 16:13:18 · 3871 阅读 · 0 评论 -
html5 实现网页截屏 页面生成图片
html2canvas通过获取页面的DOM和元素的样式信息,并将其渲染成canvas图片,从而实现给页面截图的功能。因为每个浏览器渲染页面的方式都不尽相同,所以生成的图片也不太一样。环境要求: jQuery兼容性: Firefox 3.5+, Chrome, Opera, IE9官网主页: http://html2canvas.hertzen.com/测试生成的转载 2017-08-30 14:25:55 · 1416 阅读 · 0 评论