欢迎访问广东亚搏体育官网入口叉车设备有限公司官网!

广东亚搏体育官网入口叉车设备有限公司

广东亚搏体育官网入口叉车设备有限公司

—— 持续领航 品牌经营 ——

全国服务热线

0236-896794895
12926014211
搜索关键词:  as
联系方式
  • 手机:12926014211
  • 电话:0236-896794895
  • Q Q:232188085
  • 邮箱:admin@tianjihang.com
  • 地址:江西省上饶市临颍县达央大楼70号

CSS常考知识点:亚搏体育官网入口

来源:亚搏体育官网入口   发布时间:2022-02-05 01:14nbsp;  点击量:

本文摘要:本章先容一下CSS的知识点,CSS的工具许多,下面这些是比力高频的考点,希望对你有所资助:2.1 常用选择器面试官:请先容一下常用的选择器及其优先级吧(基础题)在CSS中,选择器是一种模式,用于选择需要添加样式的元素。

亚搏体育官网入口

本章先容一下CSS的知识点,CSS的工具许多,下面这些是比力高频的考点,希望对你有所资助:2.1 常用选择器面试官:请先容一下常用的选择器及其优先级吧(基础题)在CSS中,选择器是一种模式,用于选择需要添加样式的元素。常用的选择器按优先级从高往低划分是:ID选择器(优先级最高,一般用于界说容器骨架,很少用于样式选择)类选择器(class selectors) (例如.example)、属性选择器(attributes selectors)(例如[type="radio"])、伪类(pseudo-classes)(例如:hover)类型选择器(type selectors)(例如 h1)和 伪元素(pseudo-elements)(例如::before)通配选择符(universal selector)()、*关系选择符(combinators) (+, >, ~, ' ') 和 **否认伪类(negation pseudo-class)(:not()) 对优先级没有影响(可是,在 :not()内部声明的选择器是会影响优先级)固然,除了以上这些。

给元素添加的内联样式 (例如 style="font-weight:bold") 总会笼罩外部样式表的任何样式 ,因此可看作是具有最高的优先级面试官:庞大的项目里往往会遇到样式给笼罩的问题,解决此类问题行之有效方法有哪些呢?(拓展题) 最简朴的方法是给这个样式后面增加 !important,这样该样式的声明将笼罩任何其他声明,可是使用 !important 是一个坏习惯,应该只管制止,因为这破坏了样式表中固有的级联规则使得调试找bug变得越发难题了。当两条相互冲突的带有!important规则的声明被应用到相同的元素上时,拥有更大优先级的声明将会被接纳,因此我推荐的方法有2个:使用CSS级联属性,给该元素声明一个优先级更高的选择器,如:.example span {} 给span加个 .text的类: .example .text {}增加一个或多个其他元素,使选择器变得越发详细,并获得更高的优先级,如 .example .text {} 改成 .example > div > .text {} 面试官:刚提到了!important的毛病,那我们什么时候可以使用!important呢?(发散题)这个题目是个发散题,一般人很难答得全,其实有两种情况我们可以使用 !important:一种情况是你的网站上有一个设定了全站样式的CSS文件,同时你(或是你同事)写了一些很差的内联样式。在这种情况下,你就可以在你全局的CSS文件中写一些!important的样式来笼罩掉那些直接写在元素上的行内样式。

第二种情况是已经给某个样式加持了优先级很是高的选择器,在无法改HTML结构的情况下,可以使用 !important来做笼罩。2.2 结构常用单元面试官:请枚举一下我们css结构常用的单元及区别(基础题)px:绝对单元,页面按准确像素展示%:相对单元,凭据父容器举行百分比盘算em:相对单元,基准点为父节点字体的巨细,如果自身界说了font-size按自身来盘算(浏览器默认字体是16px),整个页面内1em不是一个牢固的值rem:相对单元,可明白为 root em, 相对根节点html的字体巨细来盘算,CSS3新加属性,chrome/firefox/IE9+支持2.3 块级和行内元素面试官:请简朴先容一下块级元素和行内元素的区别,并划分举例5个(基础题)块级元素与行内元素有几个关键区别:- 花样:默认情况下,块级元素会新起一行- 内容模型:一般块级元素可以包罗行内元素和其他块级元素。这种结构上的包罗继续区别可以使块级元素建立比行内元素更”大型“的结构常见的块级元素如 div、header、footer、ul、p标签等;常见的行内元素如 span、strong、input、label、i标签等2.4 常用定位方式面试官:css里定位方式有哪几种,它们各有什么用途呢?(基础题)CSS里共有5种定位方式,它们划分是:static(正常文档流定位): 正常文档流定位,此时 top, right, bottom, left 和 z-index 属性无效,块级元素从上往下纵向排布,行级元素从左向右排列relative(相对定位): 相对原文档流结构举行偏移,设置了相对定位的元素可以脱离文档流移动。

往往我们要微调一些 内联图标的位置时会用到,或需要对该元素做z-index分层absolute(绝对定位): 相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。弹层内一些牢固在某处的元素 往往通过绝对定位来实现,好比关闭按钮fixed(牢固定位): 相对于屏幕视口(viewport)的位置来指定元素位置。

元素的位置在屏幕转动时不会改变,好比那种回到顶部的按钮一般都是用此定位方式sticky(粘性定位):特性近似于relative和fixed的合体,经常用于实现垂直转动 "吸顶" 效果面试官:元素设置了非static定位后可以用z-index做分层,说一下你对z-index的明白 (发散题)CSS 中的z-index属性控制重叠元素的垂直叠加顺序,类似PS的图层观点。默认元素的z-index为0,我们可以修改z-index来控制元素的图层位置,而且z-index只能影响设置了position值的元素,我们可以设置z-index为负数去隐藏某个图层面试官:上面提到如果要微调一个行内元素的垂直位置,会使用relative结构,除此之外另有此外方法吗?(基础题)这个问题很好回覆,CSS3提供了transform属性让我们很利便对一个元素举行缩放、旋转宁静移,我们可以使用 translate(x, y)来对元素的位置举行微调。面试官:相比力relative,为什么现在更推荐使用translate来改变位置呢?谜底是改变transform或opacity不会触发浏览器重新结构(reflow)或重绘(repaint),只会触发复合(compositions)。

而改变绝对定位会触发重新结构,进而触发重绘和复合。transform使浏览器为元素建立一个 GPU 图层,但改变绝对定位会使用到 CPU。因此translate()更高效,可以缩短平滑动画的绘制时间。

2.5 常用结构方案面试官:先容一下你经常使用的一些结构方案吧(基础题)常用结构方案有 静态结构、浮动结构、百分比流式结构、inline-block水平结构、flex弹性结构、响应式结构、rem结构等。现在最常用的是 flex弹性结构 和 rem结构。

面试官:实现垂直居中你一般有哪几种方案?(基础题)最简朴的方法是用使用 flex结构:<div class="container"> <div class="content">内容</div></div>.container { display: flex; align-items: center; justify-content: center;}或者使用定位:.container { position: relative;}.content { width: 100px; height: 100px; position: absolute; left: 0; right: 0; bottom: 0; top: 0;}或者接纳BFC + transform:.container { width: 500px; height: 500px; overflow: hidden; /*使容器成为一个BFC*/}.content { width: 100px; height: 100px; margin-top: 50%; transform: translateY(-50%);}2.6 层叠上下文(BFC)面试官:正常流式结构下,我们如果给2个相邻的块级元素同时设置margin-top和margin-bottom为10px,他们实际会发生几多margin呢?(基础题)这个是日常做结构时经常会遇到的问题,谜底固然是 10px,不外许多人是知其然却不知其所以然,所以就算这个答对了,面试官往往也不会“罢休”面试官:OK,回覆正确。可以继续讲一下泛起这个边距折叠的原因和如何制止这个问题吗?(拓展题)通例流结构时,盒子都是垂直排列,两者之间的间距由各自的外边距所决议,但不是二者外边距之和。

在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以联合成一个单独的外边距。这种合并外边距的方式被称为折叠,而且因而所联合成的外边距称为折叠外边距。折叠的效果根据如下规则盘算:两个相邻的外边距都是正数时,折叠效果是它们两者之间较大的值。

两个相邻的外边距都是负数时,折叠效果是两者绝对值的较大值。两个外边距一正一负时,折叠效果是两者的相加的和。至于如何制止这个问题,就需要引出 块级花样化上下文(Block Formatting Context,BFC) 的观点,外边距折叠(Margin collapsing)只会发生在属于同一BFC的块级元素之间,因此我们只需把两个块级元素设置为单独的BFC,就能解决这个问题,最简朴的方式是给两个区块设置 overflow: hidden; 面试官:OK,回覆正确,不外除相识决外边距塌陷, 你知道BFC另有其他的用途吗?(发散题)除相识决外边距塌陷,应用BFC还能让 浮动元素的容器也能被撑开 :浮动元素是会脱离文档流的(绝对定位元素会脱离文档流)。如果一个没有高度或者height是auto的容器的子元素是浮动元素,则该容器的高度是不会被撑开的。

我们可以给容器加一个 overflow: hidden; 来解决这个问题:.container { height: auto; border: 1px solid #ddd; overflow: hidden; /*使容器成为一个BFC*/}.child { float: right; width: 200px; height: 100px; background: #f0f0f0;}不外现在浮动不常用了,使用BFC另有其他2个常用的用途:两栏结构,防止文字围绕等防止元素塌陷拓展:BFC的触发条件块花样化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部门,是块盒子的结构历程发生的区域,也是浮动元素与其他元素交互的区域。下面这些条件会触发BFC:根元素(<html>)浮动元素(元素的 float 不是 none)绝对定位元素(元素的 position 为absolute 或 fixed)行内块元素(元素的 display 为 inline-block)表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值)表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)匿名表格单元格元素(元素的 display为table、table-row、 table-row-group、table-header-group、table-footer-group(划分是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table)overflow 值不为 visible 的块元素display 值为 flow-root 的元素contain 值为layout、content或 paint 的元素弹性元素(display为 flex 或 inline-flex元素的直接子元素)网格元素(display为 grid 或 inline-grid 元素的直接子元素)多列容器(元素的 column-count 或 column-width 不为 auto,包罗 column-count 为 1)column-span 为 all 的元素始终会建立一个新的BFC,纵然该元素没有包裹在一个多列容器中。

亚搏体育官网入口

更多BFC的知识接待点击这个 传送门 举行检察2.7 媒体查询面试官:请讲一下你对媒体查询的明白以及它的作用(基础题)媒体查询由一个可选的媒体类型和零个或多个使用媒体功效的限制了样式表规模的表达式组成,例如宽度、高度和颜色。媒体查询,添加自CSS3,允许内容的出现针对一个特定规模的输出设备而举行裁剪,而不必改变内容自己, 很是适合web网页应对差别型号的设备而做出对应的响应适配(即响应式结构)<!-- link元素中的CSS媒体查询 --><link rel="stylesheet" media="(max-width: 800px)" href="example.css" /><!-- 样式表中的CSS媒体查询 --><style>@media (max-width: 600px) { .facet_sidebar { display: none; }}</style>2.8 盒模型面试官:请简朴先容一下你对盒模型的明白(基础题)当对一个文档举行结构(layout)的时候,浏览器的渲染引擎会凭据尺度之一的 CSS 基础框盒模型(CSS basic box model),将所有元素表现为一个个矩形的盒子(box)。CSS 决议这些盒子的巨细、位置以及属性(例如颜色、配景、边框尺寸…)。

盒模型由 content(内容)、padding(内边距)、border(边框)、margin(外边距)组成:2.9 伪类和伪元素面试官:请先容一下什么是伪类和伪元素,并先容一下他们的区别(基础题)伪类(pseudo-class) 是一个以冒号(:)作为前缀,被添加到一个选择器末尾的关键字,当你希望样式在特定状态下才被出现到指定的元素时,你可以往元素的选择器后面加上对应的伪类伪元素用于建立一些不在文档树中的元素,并为其添加样式。好比说,我们可以通过::before来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,可是这些文本实际上不在文档树中他们的区别可以归纳综合为:伪类是通过在元素选择器上加入伪类改变元素状态,而伪元素通过对元素的操作举行对元素的改变2.10 动画与过渡面试官:CSS动画和过渡有什么区别吗?(基础题)过渡 Transition:需要事件触发,好比 hover,focus,checked , js修改等过渡效果是一次性的,无法循环只能界说开始和竣事状态,不能界说中间状态控制粒度比力粗拙,动画 Animation:不需要事件触发显示地随着时间的流逝,周期性的改变元素的css属性值。

区别于一次性通过百分比来界说历程中的差别形态,可以很细腻 总得来说,transition越发粗一点,好比过渡的速度举行了封装,可以控制是匀速改变还是贝塞尔曲线之类的。而animation提供的keyframe方法,可以手动去指定每个阶段的属性。此外animation还封装了循环次数,动画延迟等功效,设置自由且功效强大。

面试官:CSS3如何实现逐帧动画吗?(拓展题)CSS3 可以使用 animation-timing-function 的门路函数 steps(number_of_steps, direction) 来实现逐帧动画的一连播放。并配合雪碧图,通过更改 background-image 的值实现帧的切换。本文由博客一文多发平台 OpenWrite 公布!。


本文关键词:CSS,常考,知识点,亚搏,亚搏体育官网入口,体育,官网,入口,本章

本文来源:亚搏体育官网入口-www.tianjihang.com

微信二维码 微信二维码
联系我们

电话:0236-896794895
手机:12926014211
Q Q:232188085
邮箱:admin@tianjihang.com
联系地址:江西省上饶市临颍县达央大楼70号

Copyright © 2000-2022 www.tianjihang.com. 亚搏体育官网入口科技 版权所有

备案号:ICP备92139716号-7