【前端面试 | css面试题整理】

层叠

 层叠：对一个元素多次设置同一个样式，程序只会使用最后一次设置的属性值。

优势

 多个文档的样式可以通过使用一个站点来控制多个html元素可以包含许多文档，可以在其中创建类对样式进行分组，最好使用选择器和分组方法

缺点

 无法通过选择器升序垂直控制的局限性没有表情没有列声明伪类不受动态行为的控制规则、样式、无法定位特定文本

ID和Class的区别

 ID属性的值在整篇文档中必须是唯一的。ID属性可用于设置单个元素的样式规则。包含ID属性的选择器称为ID选择器。ID选择器的标志符是散列符号（#）CLASS属性可声明一组在CLASS属性上具有相同值的元素。BODY内的所有元素都有CLASS属性。类选择器以标志符（.）开头。

CSS盒模型

 属性：外边距（margin）、边框（border）、内边距（padding）以及实际的内容（content）。标准盒子模型：宽度=内容的宽度（content）；总宽度=内容的宽度（content）+ border + padding + margin低版本IE盒子模型：宽度=border + padding + 内容（content）；总宽度=内容宽度（content+border+padding）+ margin

z-index

 z-index ：设置元素的堆叠顺序。较高堆叠顺序的元素会处于堆叠顺序较低的元素的前面值说明auto——默认。堆叠顺序与父元素相等。number——设置元素的堆叠顺序。inherit——规定应该从父元素继承 z-index 属性的值。

雪碧图（Sprites）

 作用：把网页中一些背景图片整合到一张图片文件中。优点：减少网页的http请求，提高页面性能

伪元素

 CSS伪元素：添加到选择器的关键字，可用于设置所选元素的特定部分的样式。“first-line” 伪元素用于向文本的首行设置特殊样式，只能用于块级元素！下面的属性可应用于 “first-line” 伪元素：font，color，background，word-space，letter-space，text-decoration，text-transform，line-height，clear。

设置标签相同样式

 通过用逗号（，）分隔符来定位多个元素

float属性

 定义元素在哪个方向浮动float: none;

float: left;
float: right;

插入图片不重复：

background-repeat: none;

margin：0 auto;

 该对象将位于其父容器的中央

background-attachment：

 设置图像附着位置值：scroll：背景图片附着在背景容器上，它是相对于背景容器（元素）固定，它会随着背景容器的滚动，而不是随着它的内容滚动（也可以看成是对元素边框固定）。fixed： 背景图片附着在浏览器的可视区域。因为浏览器的可视区域不具备滚动的性格，所以它是不滚动的local：CSS3新增的属性值。背景图片附着在背景容器的内容区域。它会随着内容的滚动而滚动。

{visibility：hidden}和{display：none}

 display:none 表示标签不会出现在页面上（可以通过DOM与之交互）。与其他标签之间将没有分配空间。visibility:hidden 表示该标签不可见，但在页面上为其分配了空间。

box-sizing

 context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

display

inline（默认）–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block设置元素浮动后，display值为block显示间隙有空格时候会有间隙 解决：移除空格
margin正值的时候 解决：margin使用负值
使用font-size时候 解决：font-size:0、letter-spacing、word-spacing

position

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

position跟display、overflow、float这些特性相互叠加

 display属性规定元素应该生成的框类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。优先级机制：position：absolute/fixed优先级最高，有它们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

浮动与清除浮动

 浮动浮动元素碰到包含它的边框或者浮动元素的边框停留。浮动元素不在文档流中，会漂浮在文档流的块框上。问题：1、父元素的高度无法被撑开，影响与父元素同级的元素；2、与浮动元素同级的非浮动元素（内联元素）会跟随其后3、除非第一个元素浮动，否则该元素之前的元素也需要浮动，否则会影响页面显示的结构清除浮动1、父级div定义height或者zoom（zoom的作用就是设置放大为原来的几倍，如：zoom：2）2、最后一个浮动元素后加空div标签 并添加样式clear:both。3、包含浮动元素的父标签添加样式overflow为hidden或auto。

css优化

 避免过度约束避免后代选择符避免不必要的命名空间避免！important，可以选择其他选择器

元素竖向的百分比设定是相对于容器的高度吗

 当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

伪类与伪元素

 伪类：存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类，用于向某些选择器添加特殊的效果，伪类的效果可以通过添加实际的类来实现。伪元素/伪对象：在DOM文档中不存在，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中，用于将特殊的效果添加到某些选择器。伪元素的效果可以通过添加实际的元素来实现。

::before 和 :after

 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

line-height

 line-height值设置为height一样大小的值可以实现单行文字的垂直居中多行文本垂直居中：需要设置display属性为inline-block。

水平居中一个元素

 弹性盒子.box{
display: flex;
justify-content: center;
align-items: center;
}定位.box{
position: relative;
}
.box .sub{
position: absolute;top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*margin-left: 负的宽度的一半*/
/*margin-top: 负的高度的一半*/
}

实现一个三角形

 .triangle{
width: 0;height: 0;border: 100px solid transparent;
border-left-color: red;
}

选择器

 id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=“external”]）、伪类选择器（a:hover, li:nth-child）内嵌样式>内部样式>外部样式>导入式！important > 内嵌 1000 >Id 100 > class=[]=伪类 10 > tag=伪元素 1 > ( * + > ~) 0

预处理器

 CSS预处理器是用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。优点CSS变得更易于维护易于编写嵌套选择器用于一致主题的变量。可以跨不同项目共享主题文件Mixins生成重复的CSS诸如循环，列表和映射之类的Sass功能可以使配置更容易且更省力将您的代码分成多个文件。CSS文件也可以拆分，但是这样做需要HTTP请求才能下载每个CSS文件。缺点需要进行预处理的工具。重新编译时间可能很慢。不编写当前和潜在可用的CSS。例如，通过将诸如 postcss-loader之类的内容 与 webpack一起使用，可以编写可能与将来兼容的CSS，从而使您可以使用CSS变量（而不是Sass变量）之类的东西

【前端面试 | css面试题整理】相关推荐

百度糯米android面试题,前端面试—CSS面试题汇总
前端面试-CSS面试题汇总博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 1.flex常见面试题 Flex 是 Flexible ...
2020前端面试(一面面试题）
2020前端面试(一面面试题) CSS方面 calc, support, media各自的含义及用法? @support主要是用于检测浏览器是否支持CSS的某个属性,其实就是条件判断,如果支持某个 ...
前端关于html的面试题,关于java:前端面试HTML面试题汇总
前端面试-HTML面试题汇总博客阐明文章所波及的材料来自互联网整顿和集体总结,意在于集体学习和教训汇总,如有什么中央侵权,请分割自己删除,谢谢! 1.语义化为什么要语义化? a. 为了在没有CS ...
前端面试常见面试题及答案
前端面试常见面试题及答案 h5新特性 ES6新特性 vuex的理解,组成以及原理介绍前端常用框架 h5新特性 html5总的来说比html4多了十个新特性,但其不支持ie8及ie8以下版本的浏览器 ...
【前端】前端面试题整理
前端和计算机相关知识你能描述一下渐进增强和优雅降级之间的不同吗浏览器兼容问题如何对网站的文件和资源进行优化? 怎么学习前端?怎么接触前端新知识? 关于前后端分离关于浏览器内核(渲染引擎) 浏览 ...
前端HTML+CSS面试题汇总一
目录你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? Quirks模式是什么?它和Standards模式有什么区别 Doctype作用? 严格模式与混杂模式-如何触发这两种模式,区分它们有 ...
2022前端面试(一面面试题）
写在前面 CSDN话题挑战赛第1期活动详情地址:https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f 参赛话题:前端面试宝典话 ...
2019寒冬中的深圳前端面试分享(附笔试题)。
最近陆陆续续面试了大半个月的时间,大概面试了有二十家左右,offer也拿了几个,现在整理了一下面试中经常问起的问题,希望可以对在找工作的同学们有一点帮助,由于水平有限,大佬勿喷哈. 本文只是总结一些问 ...
美团java面试_2020年美团Java一面，美团面经面试流程面试题整理
很多的从事Java的人都想要去美团工作,那么下面就给大家整理了一些小伙伴2020年美团Java一面的面试流程和具体面试问题及答案,下面一起来看看具体内容吧. 具体面试时间: 3.26笔试 3.30面试 ...

【前端面试 | css面试题整理】

层叠

优势

缺点

ID和Class的区别

CSS盒模型

z-index

雪碧图（Sprites）

伪元素

设置标签相同样式

float属性

插入图片不重复：

margin：0 auto;

background-attachment：

{visibility：hidden}和{display：none}

box-sizing

display

position

position跟display、overflow、float这些特性相互叠加

浮动与清除浮动

css优化

元素竖向的百分比设定是相对于容器的高度吗

伪类与伪元素

::before 和 :after

line-height

水平居中一个元素

实现一个三角形

选择器

预处理器

【前端面试 | css面试题整理】相关推荐

最新文章

热门文章