前端计划——面试题总结-CSS篇

马永翠发布于2019-08-29 13:09 / 3388人阅读

摘要：定位使元素的位置与文档流无关，因此不占据空间。可以知道属性有以下几个特点该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。

前端面试之CSS篇 1、三种基本引入方式

外部样式表

内部样式表

内联

这是一个段落。

2、CSS的引入方式中link和@import的区别

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

link支持使用Javascript控制DOM去改变样式；而@import不支持。

3、CSS选择器

选择器优先级为!important >内联 > id > 伪类 = 类class > 属性 > tag >通配

3.1 基本选择器

类选择器 .className

ID选择器 #idName

元素选择器 elementName

通配选择器 * (效率最低，不推荐用)

属性选择器 element[attr=value]

3.2 权重计算

内联样式表的权值最高 1000；

ID 选择器的权值为 100

Class 类选择器的权值为 10

HTML 标签选择器的权值为 1

3.3 计算法则

选择器都有一个权值，权值越大越优先；

当权值相等时，后出现的样式表设置要优于先出现的样式表设置；

创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；

继承的CSS 样式不如后来指定的CSS 样式；

在同一组属性设置中标有"!important"规则的优先级最大；示例如下：

3.4组合选择符

后代选择器（空格符）选取所有后代 A B

子元素选择器（大于号）选择某一类型 A>B

相邻兄弟选择器（加号）A+B

普通兄弟选择器（波浪号）A~B

4、伪元素与伪类 4.1 伪类

CSS伪类匹配被用户激活的元素,接伪类先后顺序被称为LVHA顺序:
:link
:visited
:hover
:active

4.2 伪元素

伪元素添加到选择器，但不是描述特殊状态，它们允许您为元素的某些部分设置样式（CSS3使用双冒号）
::after
::before
::first-letter
::first-line
::selection

5、盒式模型

margin/border/padding/content
margin:a,b,c,d 上/右/下/左
margin:a,b,c 上/左右/下
margin:a,b 上下/左右
margin:a 上下左右

6、定位的几种方式：absolute/relative/fixed/static/sticky

absolute
绝对定位的元素的位置相对于最近的已定位父元素（也就是非static定位），如果元素没有已定位的父元素，那么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。

relative
相对定位是相对其正常位置。相对于其在普通流中的位置进行定位。可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。经常被用来做绝对定位的容器块。

fixed
元素的位置相对于浏览器窗口是固定位置。Fixed定位使元素的位置与文档流无关，因此不占据空间。

static
HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到 top, bottom, left, right影响。

sticky
position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

可以知道sticky属性有以下几个特点：

该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量

7、清除浮动

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

额外标签
添加

使用overflow
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

使用after伪对象

#parent:after{
    /*注意content要有内容*/
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}

8、display: none;和visibility: hidden;的区别

都是隐藏元素，但是前者文档布局中不占用空间，后者仍占用空间

display：none隐藏产生reflow和repaint（回流与重绘）

前者有株连性，即父元素设置display: none后子元素不管怎样设置都不能显示，而后者的子元素通过设置visibility: visible后还是能显示出来的

9、float和absolute的异同

相同点：都使元素脱离文档流，可以设置宽高

不同点：float仍然占用空间，absolute可以覆盖

10、box-sizing

属性作用：主要用来控制元素的盒模型的解析模式。默认值是content-box。

content-box
元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高

border-box
让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

inherit
继承父元素的box-sizing属性

11、左右布局：左边定宽、右边自适应，不少于3种方法

//方法一（使用CSS3的flex布局）
.container {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
}
.left {
    width: 200px;
    height: 200px;
    background: green;
}
.right {
    flex: 1;
    height: 200px;
    background: red;
}
//方法二(使用CSS3的calc()，注意clac表达式中的减号前后有空格)
.left {
    float: left;
    width: 200px;
    height: 200px;
    background: green;
}
.right {
    float: left;
    width: calc(100% - 200px);
    height: 200px;
    background: red;
}
//方法三（不设置宽度，默认填充满）
.left {
    float: left;
    width: 200px;
    height: 200px;
    background: green;
}
.right {
    margin-left: 200px;
    height: 200px;
    background: red;
}
//方法四（绝对定位，注意right部分）
.left {
    position: absolute;
    width: 200px;
    height: 200px;
    background: green;
}
.right {
    position: absolute;
    left: 200px;
    right: 0px;
    height: 200px;
    background: red;
}
//方法五(百分比width，这个方法不是很好使，百分比不好确定)
.left {
    float: left;
    width: 200px;
    height: 200px;
    background: green;
}
.right {
    float: left;
    width: 85%;
    height: 200px;
    background: red;
}
//方法六（表格方式，不推荐使用）

12、div水平垂直居中实现方式

/*方法一：使用flex布局*/
/*加入边框和宽高便于浏览器测试*/
.parent {
    border: 1px solid black;
    display:flex;
    justify-content: center;
    align-items: center;
}
.child {
    border: 1px solid black;
    width: 400px;
    height: 400px;
}
/*方法二：绝对定位，左右都是50%，margin-left和top分别为自身一半值的负数*/
.parent {
    position: relative;
}
.child {
    border: 1px solid black;
    width: 400px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -100px;
}
/*方法三：还是绝对定位，但使用transform*/
.parent{
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

GPU云服务器云服务器面试题栈面试题笔试面试题面试题内容

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112411.html

前端计划——面试题总结-HTML篇

摘要：发生在很久以前的及更老的浏览器向过渡时期。数据始终在同源的请求中携带即使不需要，会在浏览器和服务器间来回传递。存储大小数据大小不能超过。与上面问题相连，比也是明智的选择。表现与结构相分离。两种设计思想是有不同的考虑。前言：吾生也有涯,而知也无涯，以有涯随无涯，殆己————庄子阅读本文前请做好以下心理准备：本系列文章将不定期更新。本系列文章不是很严谨。前端面试之HTML篇 Pa...

2json 2019-08-01 16:08 评论0 收藏0
前端开发-从入门到Offer - 收藏集 - 掘金

摘要：一些知识点有哪些方法方法前端从入门菜鸟到实践老司机所需要的资料与指南合集前端掘金前端从入门菜鸟到实践老司机所需要的资料与指南合集归属于笔者的前端入门与最佳实践。工欲善其事必先利其器-前端实习简历篇 - 掘金有幸认识很多在大厂工作的学长，在春招正式开始前为我提供很多内部推荐的机会，非常感谢他们对我的帮助。现在就要去北京了，对第一份正式的实习工作也充满期待，也希望把自己遇到的一些问题和...

sf_wangchong 2019-08-20 16:10 评论0 收藏0
前端最强面经汇总

摘要：获取的对象范围方法获取的是最终应用在元素上的所有属性对象即使没有代码，也会把默认的祖宗八代都显示出来而只能获取元素属性中的样式。因此对于一个光秃秃的元素，方法返回对象中属性值如果有就是据我测试不同环境结果可能有差异而就是。花了很长时间整理的前端面试资源，喜欢请大家不要吝啬star~ 别只收藏，点个赞，点个star再走哈~ 持续更新中……，可以关注下github 项目地址 https:...

wangjuntytl 2019-08-26 10:41 评论0 收藏0
2017年3月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 03月份前端资源分享 1. Javascript 175453545 Redux compose and middleware 源码分析深入 Promise(二)——进击的 Promise Effective JavaScript leeheys blog -...

ermaoL 2019-06-27 16:30 评论0 收藏0
2017年3月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 03月份前端资源分享 1. Javascript 175453545 Redux compose and middleware 源码分析深入 Promise(二)——进击的 Promise Effective JavaScript leeheys blog -...

kamushin233 2019-08-29 12:34 评论0 收藏0