前端基础 小知识点

一、选择题(共10题,每题3分)
1 . CSS 指的是? B
A. Computer Style Sheets
B. Cascading Style Sheets
C. Creative Style Sheets
D. Colorful Style Sheets
2 . 在以下的 HTML 中,哪个是正确引用外部样式表的方法? B
A.
3 . 在 HTML 文档中,引用外部样式表的正确位置是?
A. 文档的末尾 D
B. 文档的顶部
C. 部分
D. 部分
4 . 哪个 HTML 标签用于定义内部样式表? A
A.

___________

7.img标签的title是指_图片正常加载鼠标放上去显示的值_____________________________,而alt是指______图片无法加载的时显示的值____.
三、简答题(共30题,每题3分)
1.请画说出box-sizing属性的两个值,并说出区别?
box-sizing:
①值为 border-box时,其含义为:表示元素的宽度与高度包括内部补白区域(指border和padding)与边框的宽度与高度;
②值为content-box时,其含义正其前者相反,表示不包括内部补白区域与边框的宽度与高度;

  1. 如何去掉网页的横向滚动条,竖向滚动条

①让竖条没有:

<body style=`overflow:-Scroll;overflow-y:hidden` >
</body>

②让横条没有:

<body style=`overflow:-Scroll;overflow-x:hidden` >
</body>

③都去掉

<body scroll="no" >
</body>

火狐底部滚动条不显示:
html { overflow:-moz-scrollbars-vertical; }
以上几种方式,只是从视觉上消除了滚动条,但是实际上他们依然存在,比如你消除的是横条滚动,点击鼠标的滚轮,然后左右移动,就可以看到页面依然可以左右滚动

3.如何居中一个浮动元素?
在这里插入图片描述

  1. css 中id和class如何定义,哪个定义的优先级别高?
<div class="case1" id="case2"></div>
<style>
.case2{样式内容}
#case2{样式内容}
</style>

在结构想相同情况下ID优先级要高于 CLASS
ID是唯一的。 CLASS一个页面可以出现很多个

5.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

主流浏览器 内核
IE trident
Chrome webkit/blink
firefox Gecko
Opera presto
Safari webkit

6.请按要求定义一个动画,并应用于ID为box1的元素上,只写出样式,无需写HTML
① 透明度从0到1
② 放大2倍
③ 上下翻转从0度到360度
④ 纵向向上偏移10像素
⑤ 匀速过渡
⑥ 无限动画效果
⑦ 1秒动画时间

在这里插入图片描述

https://www.cnblogs.com/yzyh/p/7693089.html

https://www.365jz.com/article/24660

7.什么是CSS Spirit?如果使用?

css sprites:精灵图(雪碧图):把一堆小图片整合在一张大图上,通过背景图片相关设置(背景图片、背景图是否重复、背景图定位),显示图片,减少HTTP请求次数,提高页面加载速度。
优点:
1、减少网页的HTTP请求,提高页面性能
2、图片命名上的困扰
3、更换风格方便
缺点:
1、必须限定容器大小,符合背景图片元素的位置,需要计算
2、维护比较麻烦
使用步骤:
1、制作一张具有多状态的拼合图片,需要按照一定规律处理
2、给要显示背景的盒(一个固定尺寸,宽width、高height),以背景的方式加载,让其局部显示
3、通过背景图定位(background-position)控制不同的显示状态

8.请说出几种清浮动的方法?

(1)、父级div定义 height
原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
优点:简单、代码少、容易掌握
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题
建议:不推荐使用,只建议高度固定的布局时使用
(2)、结尾处加空div标签 clear:both
原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
优点:简单、代码少、浏览器支持好、不容易出现怪问题
缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好
建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法
(3)、父级div定义 伪类:after 和 zoom
原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题
优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点:代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持。
建议:推荐使用,建议定义公共类,以减少CSS代码。
(4)、父级div定义 overflow:hidden
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
优点:简单、代码少、浏览器支持好
缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。
建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
(5)、父级div定义 overflow:auto
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度
优点:简单、代码少、浏览器支持好
缺点:内部宽高超过父级div时,会出现滚动条。
建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

9.如果隐藏一个元素,说出至少两种。
用css隐藏页面元素有许多种方法。
第一种方法【opacity: 0;】
opacity属性通常用于设置一个元素的透明度,从另一个角度来看,如果透明度为0,也就从视觉上隐藏了该元素。
这个属性不是为改变元素的边界框(bounding box)而设计的,元素本身依然占据它自己的位置并对网页的布局起作用,它也将响应用户交互。
第二种方法【visibility: hidden;】
第二个要说的属性是visibility。
将它的值设为hidden将隐藏我们的元素。
如同opacity属性,被隐藏的元素依然会对我们的网页布局起作用。
与opacity唯一不同的是它不会响应任何用户交互。
此外,设置了该属性之后,元素在读屏软件中会被隐藏。
另外要注意的是,如果一个元素的visibility被设置为hidden之后,却想要显示它的某个子孙元素,只要将那个子孙元素的visibility显式设置为visible即可(样式覆盖)。
第三种方法【diaplay: none;】
display属性依照词义才是真正地隐藏了元素。
将display属性设为none就能确保元素不可见并且连盒模型也不生成,使用这个属性,被隐藏的元素不占据任何空间。
不仅如此,一旦display设为none任何对该元素直接打用户交互操作都不可能生效。
此外,读屏软件也不会读到元素的内容,因为这种方式产生的效果就像元素完全不存在。
任何这个元素的子孙元素也会被同时隐藏。
为这个属性添加过度动画是无效的,他的任何不同状态值之间的切换总是会立即生效。
不过请注意,通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它。
第四种方法【position: absolute;】
假设有一个元素你想要与它交互,但是你又不想让它影响你的网页布局,没有合适的属性可以处理这种情况(opacity和visibility影响布局mdisplay不影响布局但又无法直接交互)。
在这种情况下,只能考虑将元素移出可视区域,这个办法既不会影响布局,有可能让元素保持可以操作。
具体是通过将position属性设置为absolute来实现(绝对定位)。
position: absolute;
top: -999px;
left: -999px;
第五种方法【clip-path】
隐藏元素的另一种方法是通过剪裁它们实现,具体是通过clip-path属性,这个属性比较新,浏览器兼容性也会比较差。
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
但是了解一下还是很必要的。

10.阅读以下代码,说出最后的连接是什么颜色?

<style>
		a{
			color: #0000ff;

		}
		#container a{
			color: #00ff00;
		}
		.item a.link{
			color:#ff0000;
		}
  </style>
 <body>
  <div id="container">
		<span class="item"><a class="link">这是一个连接</a></span>
  </div>

#00FF00

已标记关键词 清除标记
相关推荐
<span style="color:#666666;font-size:14px;background-color:#FFFFFF;">VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就业的你来说,那么这门课程便是你手中的葵花宝典。</span><br /> <br /> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">学习技巧:学习当中不要只看,一定要多敲代码,如果碰到某一个知识点不是很明白,不要钻牛角尖,千万不要因为一个点,放弃整个森林,接着往下学,硬着头皮开发项目只要能亲自开发一个完整的项目,你会发现不明白的地方自然而然就明白了,项目做出来就真正的学会了。</span><br /> <br /> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">此vue课程以面试和实战为基础进行讲解,每个知识点都会让你知道在实际项目开发中如何使用,学习后,可以开发大型项目,增强逻辑思维,至少让你拥有3年以上开发经验的实力!</span><br /> <br /> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">代码和ppt均可下载!</span><br /> <br /> <p> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">免费提供《企业级完整实战项目接口文档》,绝对可用。</span> </p> <p> <img src="https://img-bss.csdn.net/202001090736032736.png" alt="" /><img src="https://img-bss.csdn.net/202001090736166806.png" alt="" /><img src="https://img-bss.csdn.net/202001090736273968.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p>
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页