CSS元素隐藏

来源:http://www.chinese-glasses.com 作者:Web前端 人气:58 发布时间:2020-03-24
摘要:时间: 2019-11-07阅读: 127标签: 面试1.css sprite是什么,有什么优缺点 一、CSS元素隐藏 将多个小图片拼接到一个图片中。通过 background-position和元素尺寸调节需要显示的背景图案。  在CSS中,

时间: 2019-11-07阅读: 127标签: 面试1.css sprite是什么,有什么优缺点

一、CSS元素隐藏

将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。

  在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;   有的可以响应点击,有的不能响应点击。一个一个看。

减少 HTTP 请求数,极大地提高页面加载速度增加图片信息重复度,提高压缩比,减少图片大小

代码如下:

2 display: none; 与 visibility: hidden; 的区别

{ display: none; /* 不占据空间,无法点击 */ }

联系:它们都能让元素不可用

/********************************************************************************/

display:none ;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden ;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见

{ visibility: hidden; /* 占据空间,无法点击 */ }

3.清除浮动的几种方式

/********************************************************************************/

父级 div 定义 height结尾处加空 div 标签 clear:both父级 div 定义伪类 :after 和 zoom父级 div 定义 overflow:hidden父级 div 也浮动,需要定义宽度

{ position: absolute; top: -999em; /* 不占据空间,无法点击 */ }

4.css3有哪些新特性

/********************************************************************************/

新增各种 css 选择器圆角属性border-radius多列布局阴影和反射文字特效 text-shadow线性渐变旋转 transform

{ position: relative; top: -999em; /* 占据空间,无法点击 */ }

5.position的值, relative和absolute定位原点是

/********************************************************************************/

absolute :生成绝对定位的元素,相对于 static 定位以外的第一个父元素进?定位fixed :生成绝对定位的元素,相对于浏览器窗口进?定位relative :生成相对定位的元素,相对于其正常位置进行定位

{ position: absolute; visibility: hidden; /* 不占据空间,无法点击 */ }

6.::before 和 :after中双冒号和单冒号 有什么区别?

/********************************************************************************/

单冒号( : )用于 CSS3 伪类,双冒号( :: )用于 CSS3 伪元素

{ height: 0; overflow: hidden; /* 不占据空间,无法点击 */ }

7.可以改变页面布局的属性

/********************************************************************************/

position 、 display 、 float 、 width 、 height 、 margin 、 padding 、top 、 left 、 right

{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间,可以点击 */ }

8.CSS在性能优化方面的实践

/********************************************************************************/

css 压缩与合并css 文件放在 head 里、不要用 @import尽量用缩写、合理使用选择器

{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间,可以点击 */ }

9.CSS3动画

10bet,/********************************************************************************/

依靠 CSS3 中提出的三个属性: transition 、 transform 、 animationtransition :定义了元素在变化过程中是怎么样的,包含 transition-property 、transition-duration 、 transition-timing-function 、 transition-delay 。transform :定义元素的变化结果,包含 rotate 、 scale 、 skew 、 translate 。animation :动画定义了动作的每一帧( @keyframes )有什么效果

{

10.gba()和opacity的透明效果有什么不同?

zoom: 0.001;

rgba() 和 opacity 都能实现透明效果,但 opacity 作用于元素,以及元素内的所有内容的透明度,而 rgba() 只作用于元素的颜色或其背景色。(设置 rgba 透明的元素的子元素不会继承透明效果!)

-moz-transform: scale(0);

-webkit-transform: scale(0);

-o-transform: scale(0);

transform: scale(0);

/* IE6/IE7/IE9不占据空间,IE8/FireFox/Chrome/Opera占据空间。都无法点击 */

}

/********************************************************************************/

{

position: absolute;

zoom: 0.001;

-moz-transform: scale(0);

-webkit-transform: scale(0);

-o-transform: scale(0);

transform: scale(0);

/* 不占据空间,无法点击 */

本文由10bet发布于Web前端,转载请注明出处:CSS元素隐藏

关键词:

上一篇:基于jenkins的持续集成10bet

下一篇:没有了

最火资讯