文档教程知识库教育【免费下载链接】linkedin-skill-assessments-quizzesFull reference of LinkedIn answers 2024 for skill assessments (aws-lambda, rest-api, javascript, react, git, html, jquery, mongodb, java, Go, python, machine-learning, power-point) linkedin excel test lösungen, linkedin machine learning test LinkedIn test questions and answers项目地址https://gitcode.com/GitHub_Trending/li/linkedin-skill-assessments-quizzes点击查看免费下载本篇技术指南以本仓库 CSS 中文题库与 英文原版 同源README 目录中 CSS 列示 171 题中文版实际收录 174 题为骨架将散落的面试题重新组织为从选择器、层叠、盒模型到 Flexbox、Grid、响应式设计的完整 CSS 知识体系。读完本文你不仅能逐题核对答案更能理解每道题背后的 CSS 规范原理从而在面试、测验与日常开发中举一反三。一、选择器体系从类型选择器到属性选择器1.1 类型、类、ID 与通用选择器CSS 最基础的四类选择器是类型元素选择器、类选择器、ID 选择器与通用选择器Q98、Q73、Q5。header { ... } /* 类型选择器匹配所有 header 元素Q98 */ .nav { ... } /* 类选择器匹配 classnav 的所有元素 */ #nav { ... } /* ID 选择器匹配 idnav 的单个元素 */ * { ... } /* 通用选择器匹配页面上的所有元素Q73 */根据 Q5.nav匹配类名为 nav 的元素、nav匹配 nav 元素、#nav匹配 id 为 nav 的元素——三者并不指向同一个元素。Q173 则提醒我们-不是有效的 CSS 选择器Q174 总结了 class 与 id 的核心区别ID 只能应用于一个 HTML 元素而 class 可以多次使用ID 用#表示、类用.表示且类的优先级低于 ID。类选择器还有两个易错点Q11、Q12同一个元素可以同时拥有多个类值如classheader clear同一个类值也可以被页面中多个元素共用所谓一个元素只能分配一个类值的说法是不正确的。Q74 考察声明的基本结构在h1 { color: red; }中h1是选择器selectorcolor是属性propertyred是值valueQ28 用p { color: #000000; }复现了同样的结论。1.2 属性选择器与内链选择属性选择器通过方括号[]按属性及其取值筛选元素Q2、Q3a[title] { ... } /* 选择带 title 属性的 a 元素Q2/Q3 */ a[href^#] { ... } /* 选择 href 以 # 开头的链接Q47 */ a[href$domain.com] /* 选择 href 以 domain.com 结尾的链接 */ a[href*domain.com] /* 选择 href 包含 domain.com 的链接Q107 */Q47 的正确答案a[href^#]利用^以…开头匹配当前页面内的锚点链接Q107 则提醒a[href*domain.com]这种把通配符写进属性值里的写法是无效的——属性选择器匹配的是字面值模糊匹配要靠*、^、$等符号完成。Q89 展示了属性选择器与:not()伪类的组合input[typetext]:not([disabled])能精确选中类型为 text 且未禁用的输入框。二、特异性与层叠浏览器如何裁决冲突2.1 特异性Specificity的计算规则当多个规则命中同一元素时浏览器按特异性决定胜负。特异性可以概括为ID 选择器0,1,0,0 类/属性/伪类选择器0,0,1,0 类型/伪元素选择器0,0,0,1 通用选择器0,0,0,0且内联样式与!important权重更高。Q1 要求比较ul li a、a、.example a、div a的特异性.example a含一个类加一个类型特异性最高因此正确。Q67 中div#sidebar2 p含 ID优先级高于div.sidebar、*和.sidebar p。Q87 则要求把四个选择器按特异性从低到高排列为psection p[class*example]p.example——注意属性选择器与类选择器同级且都高于类型选择器。Q15 是一个经典的综合题.example { color: yellow; } ul li a { color: blue; } ul a { color: green; } a { color: red; }针对lia href# classexample.example一个类 0,0,1,0的特异性高于ul li a和ul a均为三个/两个类型因此链接最终是黄色。2.2 级联顺序与 !importantQ36 与 Q150 考察声明的优先级顺序。按级联规则优先级从高到低依次为作者样式表中的重要声明author important 用户样式表中的重要声明 作者样式表中的普通声明 用户代理浏览器默认样式。Q69 与 Q155 指出!important是覆盖标准源顺序与特异性规则的 CSS 关键字正确写法是!important而非important或!important!。Q151、Q152 进一步阐释级联概念CSS 级联为每个样式规则分配权重级联的结果——即级联中胜出的声明值——被称为 cascaded value级联值它决定了元素最终使用的声明。Q102 用一道判断题提醒当两个选择器命中同一元素时特异性较高的选择器获胜特异性较低者获胜是错误的说法若特异性相同则后定义的规则覆盖先前的规则。三、伪类与伪元素状态与装饰3.1 链接与交互状态伪类链接的四个状态伪类必须按正确顺序书写才能生效Q99:link → :visited → :focus → :hover → :active。各自的触发时机Q22、Q70、Q127:visited链接被访问过之后Q70。:active鼠标按下但尚未释放的瞬间Q22 中a:active { color: pink; }在点击未释放时生效。:hover鼠标悬停。:focus键盘 Tab 键聚焦如焦点落在链接上。Q123 提醒 hover 的书写语法是a:hover {...}——a :hover多了空格会变成a 的后代元素悬停语义a.hover则是类选择器都不对。3.2 结构化伪类:first-of-type与:first-childQ54 中p:first-of-type { color: red; }命中容器内第一个p段落 1而p:first-child { color: green; }因该容器第一个子元素是h1而不命中段落 1且p:first-of-type特异性高于普通p与继承自.container的 yellow因此段落 1 为红色。:nth-child(AnB)Q46 要求从第 2 项开始每第 3 项设置样式正确写法是li:nth-child(3n 2)——3n 2依次命中第 2、5、8 项且对任意长度的列表都通用。p:first-of-type:first-letterQ105对每个父容器内的第一个 p 的首字母上色因此段落 1、3、5 的首字母变红body、article、section 各有一个 first-of-type 段落。3.3 表单伪类与 :not()Q128 与 Q136两处同题考察表单验证input:invalid { color: red; }是让所有验证失败的输入显示红色字体的标准写法。Q89 用:not([disabled])排除禁用输入。Q55 明确::placeholder伪元素仅用于格式化表单控件中占位符文本的外观它并不指定默认输入文本。3.4 伪元素双冒号与单冒号Q56 解释了::的历史CSS3 引入双冒号表示法是为了区分伪元素如::before与伪类如:hover现代浏览器两种写法都支持但 IE8 及以下不支持双冒号。Q27 的正确写法是p::first-letter { color: red; }双冒号。Q96 则总结伪类用于设置选定元素的状态样式如悬停、访问过而伪元素用于设置元素特定部分或插入内容。四、盒模型margin、padding、border 与 box-sizing4.1 margin 与 padding 的区别Q48margin 在元素外部添加空间padding 在元素内部添加空间。Q145 进一步指出盒模型中 margin 与 padding 都是透明的border 会绘制content 有内容。Q172 与 Q42 涉及 visibility 与 display 的差异display: none将元素从文档流中移除、不占任何空间visibility: hidden隐藏元素但保留其原先占据的布局空间。Q49 考察 padding 简写padding: 10px 0px表示上下 10px、左右 0padding: 10px 0等价末尾 0 可省略单位padding: 10px 0px 10px 0px按上右下左也等价而padding: 10px 10px 0px 0px表示上右 10px、下左 0不符合题意。4.2 外边距折叠Q34 与 Q162 涉及 margin collapsing外边距折叠垂直方向上相邻块级元素的外边距会合并为二者中较大的值。两个 div 分别设置margin-bottom: 2rem与margin-top: 2rem二者间距折叠后为 2rem而非 4rem。Q162 的结论外边距折叠只发生在正常流中块级元素的垂直边距上。4.3 盒模型相关属性与 box-sizingQ106 列出与盒模型相关的五个样式特性margin、padding、border、width、height。Q164 考察box-sizingborder-box会把内边距与边框计入元素总宽高而默认的content-box不会。Q95 要求把简写border: 1px solid red;展开为border-width: 1px; border-style: solid; border-color: red;。Q65 验证color: red;、font-size: 1em;、padding: 10px 0;三条声明全部合法。Q140 是一个容易踩坑的题内联元素display: inline的 height 属性不生效#tall-text高度只由font-size: 20px决定因此显示为 20px 而非 200px。五、布局机制块级、浮动与定位5.1 块级与内联元素Q7默认情况下块级元素如 div、section跨越其容器的整个宽度内联元素如 span、a的高度和宽度与标签间内容一致。Q61 强调 CSS 控制的是内容的外观content appearanceHTML 才负责文档结构。5.2 浮动与清除Q4 给出两种有效的清除浮动技术在父元素上使用 clearfix hack如::after伪元素 clear: both或在父元素上使用值非visible的overflow如overflow: hidden。注意在浮动元素本身上清除浮动是无效的。Q111 则解释了浮动失效的根源浮动元素脱离文档流容器高度不再包含它因此容器只按普通流内容示例文本自适应大小。5.3 position 定位家族position: fixed元素始终相对视口定位不随页面滚动Q24因此固定在页面顶部的全局导航栏应使用position类属性实现Q13。position: absolute将元素放置在其包含块通常是最近的 relative 祖先内的固定位置Q51、Q53.logo { position: absolute; left: 100px; top: 150px; }是绝对定位 logo 的标准写法Q131 的变体 Q53 确认 left/top 而非 margin/padding 用于偏移。Q112用position: absolute; top: 0; right: 0; bottom: 0; left: 0;让 overlay 铺满 relative 容器的整个宽高。Q122#puppy { position: absolute; right: 80px; bottom: 0; }在 100×100 的容器中把小狗定位到左下角right 80px 距右边 80pxbottom 0 贴底。Q132margin: auto 0在固定宽高的容器中只能让块级子元素水平方向自适应auto 对左右生效垂直方向仍贴顶、横跨容器宽度因此答案是位于容器顶部跨越容器宽度。5.4 z-index 与堆叠顺序Q16、Q17、Q148 总结了 z-index 的三条规则较大的 z-index 值显示在较小值元素之上可以使用负数和正数z-index 只能用于定位的元素position 非 static。Q113 补充了负值的典型用法把img设为position: absolute; z-index: -1;可让图片垫底使文本显示在其上方。5.5 水平居中三件套Q121#inner { width: 50%; margin: 0 auto; }是让定宽元素在父容器中水平居中的标准写法。Q103 解释margin: 0 auto上下 margin 为 0左右 margin 自动均分剩余空间从而实现水平居中前提是包含元素宽度大于元素自身宽度。六、Flexbox一维布局6.1 主轴方向flex-direction 与 flex-flowQ35要让 flex 项按列显示可用flex-direction: column;或flex-flow: column;flex-flow是flex-direction与flex-wrap的简写。Q37 对应四个方向的取值示例 1row、示例 2row-reverse、示例 3column、示例 4column-reverse。Q92 是一道易错题flex-direction必须声明在flex 容器.container上而不是 flex 项.item上——把flex-direction: row-reverse写在.item里不会生效。Q144 提到在 Flexbox 出现之前CSS 已有 block、inline、table、positioned 等四种主要布局模式。6.2 主轴空间分配justify-contentQ40在 flex 容器中沿主轴均匀分布项目、首尾无空隙使用justify-content: space-between;space-around会在两端也留出半份间隙。Q36 的优先级结论在 Flexbox 语境下同样适用。七、CSS Grid二维布局7.1 fr 单位与轨道计算Grid 引入的frfraction单位用于按比例分配剩余空间Q8、Q9.grid { display: grid; width: 500px; grid-template-columns: 50px 1fr 2fr; }第一列固定 50px剩余 450px 按 1:2 分配给后两列因此三列宽度为50px、150px、300px。Q84 的grid-template-columns: 2fr 1fr同理第一列宽度是第二列的两倍并按比例适配网格容器。7.2 网格项定位与跨列Q134header { grid-column: 1 / -1; }让 header 从第一列跨越到最后一条列线-1表示最后一条网格线从而占满整行。Q141 则考察用grid-row与grid-column把 X 放到指定格子如grid-row: 3; grid-column: 3;下图是原题库 css/img/Q-141.png 对应的 3×3 井字棋网格示例7.3 网格内对齐Q135在网格单元格内水平与垂直居中内容用align-items: center; justify-items: center;前者控制块轴后者控制行内轴不存在middle这个值。八、单位、尺寸与计算8.1 rem 与 emQ29rem 相对于页面根元素html的字体大小与父元素无关。Q18line-height: 20px是固定值line-height: 2是无单位倍数等于 font-size 的两倍无单位行高会按比例继承推荐使用。Q10 与 Q167同题line-height 控制两行内容之间的间距高度。Q80 的综合题html { font-size: 10px }、body { font-size: 2rem }20px、.rem { font-size: 1.5rem }15px、.em { font-size: 2em } 2×20px 40px。注意 em 相对父级body 的 20pxrem 相对根元素10px因此答案是.rem 15px、.em 40px。8.2 视口单位Q104视口宽 800px、高 600px 时10vw 80px、10vh 60px、10vmin 60px取较小者、10vmax 80px取较大者。8.3 calc() 与 marginQ52margin-left: calc(5% 5px)中百分比相对父元素宽度即左边距 父元素宽度的 5% 再加 5px。8.4 Retina 与图片尺寸Q59把图像放大到目标显示尺寸的2 倍400×200 → 800×400即可在 Retina 屏上保持清晰。Q114 提到font-size: smaller是让字体比容器小一级的相对关键字。九、颜色、透明度与滤镜9.1 颜色值合法性与亮度Q33color: 000000缺少#前缀不是合法颜色值#000、#000000、rgb(0,0,0)均合法。Q157 说明rgb(255,0,0)显示红色。Q71 考察透明度与亮度白色背景上rgba(170,170,170,0.2)alpha 最小、最接近白色看起来最亮反之#aaa、#999999、alpha 0.5 都更暗。9.2 opacity 与 rgba 的区别Q6opacity作用于整个元素包括其所有子内容background: rgba(...)只对背景颜色施加透明度内容不受影响。Q90 给出创建半透明背景的标准写法background-color: rgba(0, 0, 0, 0.5);rgba red/green/blue/alphaalpha 取值范围 0 到 1。Q66 用a:link { background: #0000ff; }配合a:hover { background: rgba(0, 0, 255, 0.5); }实现实心蓝底、悬停半透明的效果。9.3 滤镜与灰度Q129让图片显示为无彩色灰度用img { filter: grayscale(1); }——filter属性配合grayscale(1)1 表示完全灰度而transform: grayscale(...)不存在。Q68 组合 body 白色背景与 section 蓝色背景height: 200px结果是白色背景上的蓝色 section。十、背景与边框10.1 background 简写与各子属性Q14 要求拆解简写background: blue url(image.jpg) no-repeat scroll 0px 0px;其对应五个子属性background-color: blue; background-image: url(image.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: 0px 0px;注意 CSS 中没有background-src、background-img、background-scroll这类属性D 选项的background-src使其无效。Q25背景图像默认在水平和垂直两个方向无限重复Q116 用background-repeat: no-repeat禁止平铺。Q83 说明background-position: 10% 50%将背景图定位在容器左侧 10%、顶部 50%处。Q118 给出设置背景图的正确语法background-image: url(wood.png);。Q108 用background: linear-gradient(#648880, #293f50);应用线性渐变注意linear()、gradient(linear, ...)都不是有效语法。10.2 圆角与阴影Q30块元素圆角用border-radius: 10px;corner-radius、border-corner均不存在。Q86 中border-radius: 10px 10px 0 0;左上、右上圆角与border-top-left-radiusborder-top-right-radius两种写法都只能圆化顶部两角因此 A 和 B 正确。Q88 用box-shadow为元素创建投影Q142 提到box-reflect用于创建图像反射注意该属性浏览器支持有限。Q109 用border-radius: 50%; padding: 50px;给图标画背景圆。Q124 则是文本阴影的对应物h1 classtext-shadow配合text-shadow声明生效。十一、字体与文本11.1 字体栈与通用字体Q76、Q77字体栈中第一个值是首选之后按优先级排列备选最后一个必须是通用字体如 serif、sans-serif这是必须的兜底。11.2 font-weight 与 font-styleQ45font-weight: 400对应 normal700对应 boldQ75 的等价写法是font-weight: 700bold 的数值别名。Q57font-style的合法值是 normal、italic、obliquenone不是。11.3 font-face 与网络字体Q58font-face用于把自定义字体加载到样式表中。Q50 指出这段代码的问题font-face { font-family: Avenir, sans-serif; src: url(avenir.woff2) format(woff2), url(avenir.woff) format(woff); }font-family在font-face中应只声明字体名称如 Avenir把sans-serif写进去是多余的Q50 答案为sans-serif 的包含有问题。Q146 再次确认定义自定义字体使用font-face规则。Q78 指出网络字体服务的缺点之一是并非总是免费服务Q79 说明添加 Google 字体的方式是使用link引用 Google 提供的 CSS。11.4 图标字体与文本细节Q41、Q44图标字体的核心优势是可以使用与排版相关的属性如 font-size、color进行样式设置——它们是字体而非图片。Q81 用letter-spacing调整字符间距Q147 用text-decoration-line设置下划线等线条装饰Q171 中text-align的合法值是 left、center、right、justify。11.5 其他细节Q82、Q169改变光标样式的属性是cursor语法如.element {cursor: pointer;}cursor: hand是旧式非标准写法。Q170outline在元素周围创建可见轮廓常用于可访问性与高亮。Q166accent-color针对 input 等表单控件着色。Q168visibility属性控制元素的可见性。Q62项目图片文件夹的推荐命名为images小写、无特殊字符。十二、响应式设计媒体查询与媒体类型Q26当前有效的媒体类型包括print、screen、speechaural已废弃、television/device非标准。Q31 考察媒体查询列表的或语义media (min-width: 1024px), screen and (orientation: landscape) { … }逗号分隔的多个条件之间是**或OR**关系因此规则适用于宽度 ≥1024px 的设备或横向模式的屏幕设备。十三、变换、过渡与动画13.1 transform 系列Q43、Q85悬停缩放的正确写法是element:hover { transform: scale(0.5); }scale: 0.5这类旧提案写法、scale(50%)参数形式都不正确transform 函数的参数是无单位的倍数。Q117逆时针旋转 30 度用transform: rotate(-30deg);负值表示逆时针。Q120向上移动 100px 用transform: translateY(-100px);Y 轴负方向即向上。Q32transform-origin默认在元素的中心50% 50%。13.2 过渡与动画属性Q93CSS 过渡只能作用于可动画属性animatable propertiesposition不在其列因此transition: position 400ms linear;无效margin、color、opacity 均可过渡。Q133默认情况下 transition 是对称的——从初始到结束状态的过渡与反向过渡互为镜像。Q149overflow-style允许在文本溢出时使用跑马灯marquee效果。十四、CSS 自定义属性变量Q101 考察变量的继承与回退ul { --color: red; } a { color: var(--color, orange); }--color定义在ul上a位于ul内部因此能继承到变量链接显示红色var()的第二个参数 orange 仅在变量未定义/不可用时作为回退。Q143 总结var()的一般语法为var(--name, value)。十五、SVG 与矢量图形Q21SVG 既可以作为矢量图形文件创建也可以用svg、line、ellipse等专用元素直接编码它不是 HAML 标记语言也不适合 3D 图形。Q23要用 CSS 改变 SVG 颜色用fill设置对象内部颜色、stroke设置边框描边颜色不是 background-fill 或 background。十六、CSS 的引入方式与工程实践16.1 三种引入方式与外部样式表Q20 归纳三种有效方式ExternalCSS 写在独立文件中在 HTML 的head内用link引入、Inline在 HTML 标签的 style 属性中书写、InternalCSS 写在head内的style标签中。Q158 给出引用外部样式表的正确 HTMLlink relstylesheet typetext/css hrefmystyle.cssQ159 确认link标签应放在head中。Q161 总结当样式应用于多个页面时外部样式表是理想选择。Q139要在另一个样式表文件里引入外部样式表使用import规则注意import必须在样式表顶部。Q160 给出 CSS 的定义性表述CSS 定义 HTML 元素在浏览器中如何显示how to display HTML elements。Q156 确认 CSS 全称是Cascading Style Sheets。16.2 内联 CSS 的取舍Q63 指出内联 CSS 的优势是更容易通过它添加多种样式style 属性可以一条声明接一条声明地叠加适合快速测试与覆盖。但需要结合 Q130 理解工程实践重置样式表CSS reset存在的意义是通过覆盖任何内置浏览器样式来统一起点避免不同浏览器默认样式User Agent Stylesheet差异导致布局不一致。16.3 开发者工具与调试Q60在 Chrome DevTools 的 Styles 面板中浏览器默认样式列在右侧的User Agent Stylesheet部分——排查为什么我的样式没生效时首先检查 UA 样式与特异性、!important 的干扰。16.4 语法与注释细节Q65color: red;、font-size: 1em;、padding: 10px 0;都是合法声明。Q125CSS 注释的正确写法是/* 此行已取消。 *///与#都不是 CSS 注释语法。Q64W3C 状态代码中Recommendation表示 CSS 规范已被现代浏览器完全实现Working Draft、Candidate/Proposed Recommendation 都是中间状态。16.5 图片替换技术冷知识Q153、Q154 属于 CSS 历史冷知识使用负文本缩进negative text-indent的图片替换技术被称为The Phark method使用margin的对应技术被称为Radu Darvas Technique。了解这些术语有助于阅读老代码与历史文章。结语如何利用本仓库继续巩固本文按知识主题重组了 css/css-quiz-ch.md 的全部 174 道题并对照 英文原版 css/css-quiz.md 确保答案一致。建议的复习路径先按本文章节自测对错题回到 中文题库 定位原题与完整选项用浏览器开发者工具实际验证特异性、盒模型与 Grid/Flexbox 行为如 Q60 的 UA 样式检查把 Grid 部分配合 css/img/Q-141.png 的井字棋示例动手实现一遍理解grid-row/grid-column的定位语义如需了解更多主题HTML、JavaScript、React 等可回到仓库根目录的 README.md 目录索引浏览其余技能评估题库。掌握选择器、层叠、盒模型、定位与 Flexbox/Grid 这五大支柱CSS 的绝大多数问题都能迎刃而解。赞分享文档教程知识库教育【免费下载链接】linkedin-skill-assessments-quizzesFull reference of LinkedIn answers 2024 for skill assessments (aws-lambda, rest-api, javascript, react, git, html, jquery, mongodb, java, Go, python, machine-learning, power-point) linkedin excel test lösungen, linkedin machine learning test LinkedIn test questions and answers项目地址https://gitcode.com/GitHub_Trending/li/linkedin-skill-assessments-quizzes点击查看免费下载相关推荐CSS 核心知识体系全解linkedin-skill-assessments-quizzes 仓库 CSS 题库精讲CSS 核心知识体系全解linkedin skill assessments quizzes 仓库 CSS 题库精讲 本篇文章以开源仓库 linkedin s文档教程知识库教育linkedin-skill-assessments-quizzes Bash 题库精讲94 道经典 Bash 面试题与核心知识点全解析linkedin skill assessments quizzes Bash 题库精讲94 道经典 Bash 面试题与核心知识点全解析 本篇文章以开源仓库文档教程知识库教育linkedin-skill-assessments-quizzes 仓库 Angular 法语题库精讲66 道核心面试题与源码级解析linkedin skill assessments quizzes 仓库 Angular 法语题库精讲66 道核心面试题与源码级解析 本文以仓库中 angu文档教程知识库教育上一篇Clean Code 与 Secure Coding 实战指南从可读性规则到安全编码防御tech-interview-for-developer下一篇PixiJS v8 渲染循环Render Loop深度指南Ticker 优先级、时间单位与自定义帧节奏创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考