![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css3
yangxiaoyanger
这个作者很懒,什么都没留下…
展开
-
叠层顺序(stacking level)和堆栈上下文(stacking context)
转载自层叠顺序和堆栈上下文知多少z-index 看上去其实很简单,根据 z-index 的高低决定层叠的优先级,实则深入进去,会发现内有乾坤。看看下面这题,定义两个 div A 和 B,被包括在同一个父 div 标签下。HTML结构如下:<div class="container"> <div class="inline-block">#divA display:i...转载 2018-03-30 10:13:04 · 1014 阅读 · 0 评论 -
从倒影说起,谈谈 CSS 继承 inherit
转自从倒影说起,谈谈 CSS 继承 inherit给定一张有如下背景图的 div:制作如下的倒影效果:方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div 大小怎么变化,我们都不用去改我们的代码。法一:-webkit-box-reflect这是一个十分新的 CSS 属性,使用起来十分简单,可以从各个方向反射我们内容。不过兼容性过于惨淡:基本上是只有 -webkit- 内核...转载 2018-03-30 10:12:50 · 415 阅读 · 0 评论 -
单行居中显示文字,多行居左显示,最多两行超过用省略号结尾
转自单行居中显示文字,多行居左显示,最多两行超过用省略号结尾这题就厉害了我的哥。题目就是如上要求,使用纯 CSS,完成单行文本居中显示文字,多行居左显示,最多两行超过用省略号结尾,效果如下:不愿看长篇大论的可以先看看效果:-webkit- 内核下 Demo 戳我接下来就一步一步来实现这个效果。首先是单行居中,多行居左居中需要用到 text-align:center,居左是默认值也就是text-al...转载 2018-04-03 10:09:39 · 820 阅读 · 0 评论 -
css题目
转自css题目1. 下面这个图形,只使用一个标签,可以有多少种实现方式:假设我们的单标签是一个 div:<div></div>定义如下通用CSS:div{ position:relative; width:200px; height:60px; background:#ddd;}法一:border这个应该是最最最容易想到的了div{ ...转载 2018-03-30 10:12:05 · 154 阅读 · 0 评论 -
css样式的优先级是怎么样的?
转自:css样式的优先级是怎么样的?题目点评CSS样式的优先级规则给人的感觉总是摸不透,更不用说怎么去表达了,在网络上流传着很多版本,描述的都很复杂也不全面,看了之后还是不满意。我来给大家介绍一个比较系统、全面有比较容易记住的规则吧!解答思路样式优先级规则 1.优先级顺序为:!important>style>权重值 2. 如果权重相同,则最后定义的样式的起作用,应该避免这种情况出现权重...转载 2018-03-27 14:03:10 · 255 阅读 · 0 评论 -
三栏布局的5种解决方案及优缺点
转自 三栏布局的5种解决方案及优缺点假设高度已知,请写出三栏布局,左栏、右栏宽度300px,中间宽度自适应。 这道题本身的难度并不大,我们在布局页面的时候,写个三栏布局还是挺简单的。但是如果在面试的时候遇到这道题,就没有那么简单了。看似简单的一道题,想把它答好是不简单的。往往越简单的题越不好答。如果看到这题只想到了浮动和绝对定位,那这题你连及格都及格不了。下面是5种三栏布局的方法。 在写布局代码之...转载 2018-04-03 14:42:09 · 149 阅读 · 0 评论 -
css3之过度——transition
animate是css3实现过渡效果的有两个规定1. 希望把过渡作用到哪个属性上面?2. 过渡时间举个栗子:div { transition: width 2s, height 2s, transform 2s;-moz-transition: width 2s, height 2s, -moz-transform 2s;-webkit-transition: width 2s, he...原创 2018-05-17 12:01:24 · 243 阅读 · 0 评论