2023-10-05 11:34:01 | 我爱编程网
标签则依然可以捕获所有的鼠标事件。一旦你的鼠标移动到文字上,
元素,它自己的display属性被设置成block,但是它依然不可见。这是
visibility:hidden和display:none的另一个不同之处。在前一个例子里,将任何子孙元素visibility显式设置成
visible可以让它变得可见,但是display不吃这一套,不管自身的display值是什么,只要祖先元素的display是
one,它们就都不可见。
现在,将鼠标移到第一个块元素上面几次,然后点击它。这个操作将让第二个块元素显现出来,它其中的数字将是一个大于0
的数。这是因为,元素即使被这样设置成对用户隐藏,还是可以通过JavaScript来进行操作。
四、position
假设有一个元素你想要与它交互,但是你又不想让它影响你的网页布局,没有合适的属性可以处理这种情况(opacity和visibility影响布局,
display不影响布局但又无法直接交互——译者注)。在这种情况下,你只能考虑将元素移出可视区域。这个办法既不会影响布局,有能让元素保持可以操作。下面是采用这
种办法的CSS:
.hide{
position:absolute;
top:-9999px;
left:-9999px;}
下面的例子阐明了怎样通过绝对定位的方式隐藏元素,并让它和前面的那个例子效果一样:
看@SitePoint提供的例子“用position属性隐藏元素”
这种方法的主要原理是通过将元素的top和left
设置成足够大的负数,使它在屏幕上不可见。采用这个技术的一个好处(或者潜在的缺点)是用它隐藏的元素的内容可以被读屏软件读取。这完全可以理解,是因为你只是将元素移到可视区域外面让用户无法看到它。
你得避免使用这个方法去隐藏任何可以获得焦点的元素,因为如果那么做,当用户让那个元素获得焦点时,会导致一个不可预料的焦点切换。这个方法在创建
自定义复选框和单选按钮时经常被使用。(用DOM模拟复选框和单选按钮,但用这个方法隐藏真正的checkbox和radio
元素来“接收”焦点切换——译者注)
五、clip-path
隐藏元素的另一种方法是通过剪裁它们来实现。在以前,这可以通过clip属性来实现,但是这个属性被废弃了,换成一个更好的属性叫做
clip-path。NitishKumar最近在SitePoint发表了“介绍clicp-path
属性”这篇文章,通过阅读它可以了解这个属性的更多高级用法。
记住,clip-path属性还没有在IE或者Edge下被完全支持。如果要在你的clip-path中使用外部的SVG
文件,浏览器支持度还要更低。使用clip-path属性来隐藏元素的代码看起来如下:
.hide{
clip-path:polygon(0px0px,0px0px,0px0px,0px0px);}
下面是一个实际使用它的例子:
看@SitePoint提供的例子“用clip-path属性隐藏元素”
如果你把鼠标悬停在第一个元素上,它依然可以影响第二个元素,尽管第二个元素已经通过clip-path隐藏了。如果你点击它,它会移除用来隐藏的
class,让我们的元素从那个位置显现出来。被隐藏元素中的文字仍然能够通过读屏软件读取,许多WordPress站点使用clip-path或者之前的
clip来实现专门为读屏软件提供的文字。
虽然我们的元素自身不再显示,它也依然占据本该占据的矩形大小,它周围的元素的行为就如同它可见时一样。记住用户交互例如鼠标悬停或者点击在剪裁区
域之外也不可能生效。在我们的例子里,剪裁区大小为零,这意味着用户将不能与隐藏的元素直接交互。此外,这个属性能够使用各种过渡动画来实现不同的效果。
结论
在这篇教程里,我们看了5种不同的通过CSS
隐藏元素的方法。每一种方法都与其他几种有一点区别。知道你想要实现什么有助于你决定采用哪一个属性,随着时间推移,你就能根据实际需求本能地选择最佳方式了。
以上就是小编今天为大家分享的关于Web前端工程师应该知道的CSS
隐藏页面元素的方法的文章,希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助,想要了解更多web前端相关知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利!
web前端笔试题集锦(HTML/CSS篇)
导读:网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。以下是由我J.L为您整理推荐的前端开发笔试题目,欢迎参考阅读。
一、HTML/CSS
1,让一个input的背景颜色变成红色
2,div的高宽等于浏览器可见区域的高宽,浏览器滚动,div始终覆盖浏览器的整个可见区域
思路:
(1)先放置一个div1,浮动:position:absolute;top:0px;left:0px;
(2)再放置一个div2,浮动:position:absolute;top:0px;left:0px;width:100%;height:100%;
(3)在div2中放置一个div3,令其高度超过浏览器高度,使div2产生滚动条
(4)对html,body进行样式设置:width:100%;height:100%;overflow:hidden->不让浏览器产生滚动条,避免页面出现两个滚动条
(5)编写JavaScript,另div2的高度等于页面可见高度,宽度等于页面可见宽度,注意,在计算完可见高度height和可见宽度width后,要对这两个值做处理,可见宽度-div2的滚动条的宽度,滚动条的宽度我这里假设是20px
这样题目基本就完成了,不过浏览器的兼容性还不是很好。
3,IE、FF下面CSS的解释区别
(1) 让页面元素居中
ff{margin-left:0px;margin-right:0px;width:***}
ie上面的设置+text-align:center
(2) ff:不支持滤镜
ie:支持滤镜
(3) ff:支持!important
ie支持*,ie6支持_
(4) min-width,min-height
FF支持,IE不支持,IE可以用css expression来替代
(5) Css Expression
FF不支持,IE支持
(6) cursor:hand
IE下可以显示手指状,FF下不行
(7) UL的默认padding和margin
IE下ul默认有margin,FF下ul默认有padding
(8) FORM的默认margin
IE下FORM有默认margin,FF下margin默认为0
4,一个定宽元素在浏览器(IE6,IE7,Firefox)中横向居中对齐的布局,请写出主要的.HTML标签及CSS
思路:
IE6/7:text-align:center
Firefox:margin:0 auto(margin-top和margin-bottom也可以为其他数字,关键是margin-left,margin-right为auto)
5,CSS中margin和padding的区别
margin是元素的外边框,是元素边框和相邻元素的距离
Padding是元素的内边框,是元素边框和子元素的距离
6,最后一个问题是,如何制作一个combo选项,就是可以输入可以下拉菜单选择。
思路:
(1)布局select和input,让input覆盖select,除了select的下拉图标,以方便select选择
(2)编写JS,为select添加onchange事件,onchange时将input的value置成select选中的指
7,
中alt和tittle的区别
alt:图片显示不出来了就提示alt
title:鼠标划过图片显示的提示
8,用css、html编写一个两列布局的网页,要求右侧宽度为200px,左侧自动扩展。
在这里我使用了两种方式:
(1)使用position
HTML:
left
right
(2) 使用float
HTML:
固定宽度
自适应
二者的CSS公用,如下:
html,body{width:100%;height:100%;margin:0px;padding:0px;}
.container {width:100%;height:400px;position:relative;}
.fl1 {float:left;}
.left {width:100%;height:400px;background:#AFFFD0;position:absolute;}
.right {width:200px;height:400px;background:#F9AFFF;position:absolute;right:0px;top:0px;}
.clear {clear:both;overflow:hidden;height:0px;}
.container2 {width:100%;height:400px;margin-top:100px;}
.left2 {background:#afffd0;height:400px;width:200px;margin-right:-3px;}
.right2 {height:400px;background:#f9afff;}
9,解释document.getElementByIdx_x_x_x("ElementID").style.fontSize="1.5em"
em是相对长度单位,相当于当前对象内文本的字体尺寸,如果当前行内文本的字体尺寸未被指定,则相对于浏览器的默认字体尺寸。
该语句将id为ElementID的元素的字体设置为当前对象内文本的字体尺寸的1.5倍
10,Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? 行内元素有哪些?块级元素有哪些?CSS的盒模型?
DOCTYPE是文档类型,用来说明使用的HTML或者XHTML是什么版本,其中的DTD叫文档类型定义,里面包含了文档规则,浏览器根据定义的DTD来解析页面的标识并展现出来
DOCTYPE有两种用途:一个可以进行页面的有效性验证,另一个可以区分浏览器使用严格模式还是混杂模式来解析CSS。
严格模式和混杂模式是浏览器解析CSS的两种模式,目前使用的大部分浏览器对这两种模式都支持,但是IE5只支持混杂模式。 我爱编程网
可那个过DOCTYPE声明来判断哪种模式被触发
(1) 没有DOCTYPE声明的网页采用混杂模式解析
(2) 对使用DOCTYPE声明的网页视不同浏览器进行解析
(3) 对于浏览器不能识别的DOCTYPE声明,浏览器采用严格模式解析
(4) 在ie6下,如果在DOCTYPE声明之前有一个xml声明比如
,采用混杂模式解析,在IE7,IE8中这条规则不生效。
(5) 在ie下,如果DOCTYPE之前有任何字符,都会导致它进入混杂模式,如:
区分这两种模式可以理解浏览器解析CSS的区别,主要是在盒模式的解释上。
常见的块级元素有:DIV,FORM,TABLE,P,PRE,H1~H6,DL,OL,UL等
常见的内联元素:SPAN,A,STRONG,EM,LABEL,INPUT,SELECT,TEXTAREA,IMG,BR等
CSS盒模型用于描述为一个HTML元素形成的矩形盒子,盒模型还涉及元素的外边距,内边距,边框和内容,具体来讲最里面的内容是元素内容,直接包围元素内容的是内边距,包围内边距的是边框,包围边框的是外边距。内边距,外边距,边框默认为0。
11,CSS引入的方式有哪些? link和@import的区别?
引入css的方式有下面四种
(1) 使用style属性
(2) 使用style标签
(3) 使用link标签
(4) 使用@import引入
Link和@import区别:
(1) link属于XHTML标签,@import是CSS提供的一种方式。Link除了加载CSS外,还可以做很多事情,如定义RSS,rel连接属性等;@import只能加载CSS
(2)加载顺序不同,当页面被加载的时候,link加载的CSS随之加载,而@import引用的CSS会等到页面完全下载完之后才会加载
(3)兼容性差别,由于@import是CSS2.1提出的,所以老的浏览器不支持,IE系列的浏览器IE5以上才能识别,而link没有这个问题
使用DOM控制样式的差别,使用JavaScript控制DOM去改变样式的时候,只能操作link,@import不可以被DOM操作。
12,如何居中一个浮动元素?
一个浮动元素里面包含的元素可以水平居中,原理如下:
让浮动元素left相对于父元素container右移50%,浮动元素left的子元素left-child相对于left左移50%就可以实现left-child相对于container水平居中
垂直居中类似,不过操作的不是left而是top
13,HTML5和CSS3的了解情况
有所了解
HTML5和CSS3分别是新推出的HTML和CSS规范,前世是XHTML2和CSS2,目前还在草案阶段,不过得到了Apple,Opera,Mozilla,Google,Microsoft不同程度的支持,也开发出了不少基于他们的应用。
HTML5相对于原来的HTML规范有一些变化:
(1)DOCTYPE更简洁
(2)新增了一些语义化标签,如article,header,footer,dialog等
(3)新增了一些高级标签,如,,
CSS3相对于CSS2也新增了不少功能
(1) 选择器更加丰富
(2) 支持为元素设置阴影
(3) 无需图片能提供圆角
14,你怎么来实现下面这个设计图
(1) 切图
(2) 布局,采用两栏布局,分别左浮动
(3) 编写css代码
15,css 中id和class如何定义,哪个定义的优先级别高?
id:#***,***为HTML中定义的id属性
class:.***,***为HTML中定义的class属性
id比class的优先级高
16,用html实现如下表格(不如嵌套实用表格)
三行三列,其中第一行第一列和第二行第一列合并; 第二行第二列和第二行第三列合并(现场画表)
运行结果如下:
17,web标准网站有那些优点
(1) Web标准网站结构和布局分离,使网站的访问和维护更加容易
(2) Web标准网站结构,布局以及页面访问都标准化,使网站能在更多的web标准设备中访问,兼容性更好
(3) Web标准网站语义化更好,语义化的XHTML不仅对用户友好,对搜索引擎也友好。
; 以上就是我爱编程网小编为大家带来的web前端开发列表阴影设置 web前端笔试题(HTML/CSS篇),希望对大家有帮助,了解更多相关资讯请关注我爱编程网。有哪些经典的Web前端或者JavaScript面试笔试题itjob为你解答:平时面试也会问道,好好加油吧!HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维护、改
有哪些经典的Web前端或者JavaScript面试笔试题、定项选择题(每题3共30)1.声明象给加name属性show显示其name值代码确(D)A.varobj=[name:"zhangsan",show:function(){alert(name);}];B.varobj={name:zhangsan,show:alert(this.name)};C.varobj={na
web前端笔试题(HTML/CSS篇)web前端笔试题集锦(HTML/CSS篇)导读:网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。以下是由我J.L为您整理推荐的前端开发笔试题目,欢迎参考阅读。一、HTML/CSS1,让一个input的背景颜色变成红色2,div的高
腾讯web前端开发方向实习笔试需要准备什么?平时可以总结下一些重要的知识点,在日常开发常常用到,并且在大家面试的时候也必然会问到的。举例HTML几个知识点仅供参考网页结构网页结构一般都包含文档声明DOCTYPE,并且在head中的meta应该包含编码格式、关键字、网页描述信息。2.自关闭元素<br>、<embed>、<h
有哪些经典的Web前端或者JavaScript面试笔试题、定项选择题(每题3共30)1.声明象给加name属性show显示其name值代码确(D)A.varobj=[name:"zhangsan",show:function(){alert(name);}];B.varobj={name:zhangsan,show:alert(this.name)};C.varobj={na
web前端开发面试注意哪些【了解公司】俗话说“知己知彼,方能百战百胜”在面试之前需要对公司有所了解,现在的公司尤其是互联网公司都在网上有自己的网站的,如果搜索不到,可能这个公司比较小【学会取舍】当收到应聘公司的HR打来的电话时,可以简单的询问一下公司的待遇,如果符合自己的理想要求就去面试,否则直接回绝【找好路线】应该在HR打电话通知去面试后,及时的查找到应聘公司的路线
web前端笔试题(HTML/CSS篇)web前端笔试题集锦(HTML/CSS篇)导读:网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。以下是由我J.L为您整理推荐的前端开发笔试题目,欢迎参考阅读。一、HTML/CSS1,让一个input的背景颜色变成红色2,div的高
web前端开发知识点想成为一名合格的前端工程师需要熟练使用HTML、CSS、Javascript,相关的知识点也很多,下面简单分享下基础内容:1、HTMLcss基本样式基础,了解常用标签的意义及用法,css样式代码添加;2、了解操作系统,熟悉Unix和Linux的基本知识;3、了解Web服务器,包括对Apache的基本配置,htaccess配置技巧的掌握等;4、了解ajax基
2023-10-08 16:59:01
2023-06-27 20:13:22
2023-10-18 09:49:38
2023-10-18 09:41:26
2023-10-18 09:39:00
2023-10-18 09:30:46