CSS(3)
KlayChan
这个作者很懒,什么都没留下…
展开
-
css选择器中:first-child与:first-of-type的区别
:first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素。比如有段代码:<div> <p>第一个元素</p> <h1>第二个元素</h1> <span>第三个元素</span> <span>第四个元素</原创 2018-10-30 21:27:34 · 324 阅读 · 0 评论 -
css实现两栏布局,左侧固定宽,右侧自适应的七种方法
一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应。下面是实现的其中方法:1、利用 calc 计算宽度的方法css代码如下:.box{overflow: hidden;height: 100px;margin: 10px 0;}.box&gt;div{height: 100%;}#box1&gt;div{float: left;}.left1{width: 100px;b...转载 2018-10-17 19:01:01 · 1010 阅读 · 0 评论 -
CSS图片下面有间隙的解决方案
在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於 该问题的解决方法也是「见机行事」,根据原因的不同要用不同的解决方法,这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳, 供大家参考。1、将图片转换为块级对像即设置img为:display:block;在本例中添加一组CSS...转载 2018-10-11 15:24:48 · 1195 阅读 · 0 评论 -
css属性选择器*=,|=,^=,$=的区别
总结:“value是完整单词” 类型的比较符号: ~= , |=“拼接字符串” 类型的比较符号: *= , ^= , $=1.attribute属性中包含value:[attribute~=value] 属性中包含独立的单词为valuee.g:[title~=flower] --&gt; &lt;img src="/i/eg_tulip.jpg" title="tul...原创 2018-10-11 14:56:15 · 921 阅读 · 0 评论 -
CSS3中3d转换与2d转换的区别(translate3d rotate3d)
3d转换 translate3d rotate3d2d转换和3d转换区别:多了一个参数表示3d在移动端使用3d转换可以优化性能(如果设备有3d加速引擎 GPU 可以提高性能 , 2d转换是无法调用GPU)...原创 2018-09-24 15:51:20 · 2761 阅读 · 1 评论 -
css动画与js动画的区别
使用动画 (js实现动画,css3实现动画)+ 一个是帧动画 一个是补间动画+ 什么是帧动画:使用定时器 每隔一段时间 更改当前元素的状态+ 什么是补间动画:过渡(加过渡只要状态发生改变产出动画) 、 动画(多个节点来控制动画) ,性能会更好+ 在支持H5C3的的浏览器尽可能使用css3动画 (移动端开发)CSS动画优点:1、浏览器可以对动画进行优化。(1) 浏览器使用与 req...原创 2018-09-21 10:42:55 · 2371 阅读 · 0 评论 -
transition、transform和animation的区别
Transform在部分的test case当中,每每演示transform属性的,看起来好像都是带动画。这使得小部分直觉化思维的人(包括我)认为transform属性是动画属性。而恰恰相反,transform属性是静态属性,一旦写到style里面,将会直接显示作用,无任何变化过程。transform的主要用途是用来做元素的特殊变形,对于做设计的人来说并不是很陌生,简单的来说就是css 的图形...转载 2018-09-21 10:08:14 · 1726 阅读 · 0 评论 -
CSS3伪类与伪元素的区别及注意事项
CSS中伪类与伪元素的概念是很容易混淆的今天就来谈谈伪类与伪元素之间的区别定义首先先来看看伪类与伪元素的定义w3c中对于它们是这么解释的伪类:用于向某些选择器添加特殊的效果伪元素:用于将特殊的效果添加到某些选择器讲道理,可能我语文不好,我觉得这两句话是等价的转载 2018-09-19 20:05:35 · 231 阅读 · 0 评论