前端面试题、知识点整理（笔记二）

朱雀 2022-05-13 10:40 145阅读 0赞

好记性不如烂笔头，一些前端的小tips，其实编程，很多时候不会把知识点都面面俱到，要学习的是编程思想，逻辑比较重要，同时养成比较好的编码习惯。面试基础很重要，这篇笔记记载一些前端面试的笔试题。  
此为笔记二  
是css相关的知识

字体属性连写的正确格式是?  A
    A.font: font-style font-weight font-size font-family;
    B.font: font-style font-family font-weight font-size;
    C.font: font-style font-family font-weight;
    D.font: font-size font-family font-style font-weight;

font属性中___font-size __和_____font-family_有两个属性是必写的

后代选择器,选择器之间用___空格____连接.
    并集选择器之间用____逗号___连接.
    交集选择器: 两个选择器之间是__没有__空格

设置颜色的赋值有几种方式,分别是什么?
    四种.
    1.使用具体的颜色来赋值：
    Color: red;
    2.十六进制表示法：
    Color: #ff8400;
    3.0rgb表示法：
    rgb(0,0,0);(第一个对应的是红，第二个是绿，第三个是蓝)
    注意：每个的取值是0-255;
    rgba表示法,增加了透明度。

如何使文本以大写字母开头？
    A.text-transform:capitalize
    B.无法通过 CSS 来实现
    C.text-transform:uppercase
    A

background-position:10px 20px中值代表的意思是？
    A.距离顶部10px,距离底部20px
    B.距离左边10px,距离右边20px
    C.距离右边10px,距离下边20px
    D.距离左边10px,距离上边20px
    D

ss的三大特性:继承,层叠,优先级

凡是以_____,_____,______开头的属性都是可以继承
    line-  text-  font-
    h标签的字体的大小不会从父元素继承过来
    当父级块级元素的行高为20px，它内部子元素的行高是（）
    A.0px;B.子元素不受影响;C.20px;D.未知;
    答案  C

行内元素的特点:可以多个标签放在同一行，给标签设置宽高没有作用，margin只对左右有效，上下没效果

元素显示方式的转换：只需要修改_display____属性就可以了
    设置一个元素为行内元素的方法是display:inline
    设置一个元素为块级元素的方法是display:block

如果div不设置宽高，那么这个div的宽从父元素直接继承，高度为0
    div的宽是可以继承的，高是不可以继承的

下面哪个不是CSS中的伪类（）
    A.:link;B.:focus;C.:before;D.:actived;
    C

浏览器中一般情况下，默认的文字大小是（）
    A.12px;B.14px;C.16px;D.18px;
    答案  C
    浏览器中一般情况下，默认的文字行高是（）
    A.12px;B.14px;C.16px;D.18px;
    答案  D

.行高是指上下文本行的（）间的垂直距离。
    A.顶线;B.中线;C.基线;D.底线;
    答案  C

某段落的样式如下：font-size:14px; line-height:1.5;那么这个段落的实际行高是（）
    A.1.5px;B.21px;C.14px;D.15px;
    答案  B

背景不会应用到盒模型的哪个区域（）
    A.内容区;B.内边距;C.边框;D.外边距;
    答案  D

.盒模型中哪个区域可以使用负值（）
    A.内容区;B.内边距;C.边框;D.外边距;
    答案  D

为元素的padding-top设置百分数值时，百分数值是相对于其（）来计算的？
    A.自身的height;B.父元素的height;C.自身的width;D.父元素的width;
    答案  D

盒模型中盒子实际的宽度指的是（）
    A.width;
    B.width+padding+border+margin;
    C.width+padding;
    D.width+padding+border;
    答案  D

当两个垂直外边距合并时，他们会（）
    A.相加;B.相减;C.取较大的值;D.取较小的值;
    答案  C

使用单位_px_设置的行高是固定值
    使用 em、%、不带单位的数字 这三种方式设置行高，行高的最终计算结果等于____文字大小_______ × 设置的行高值

设置了___绝对定位_____、____浮动____、__固定定位__的盒子，不占原来的位置。

相对定位后的元素会___占据____原来的位置，以___自己左上角________为基准设置定位。

设置_____浮动___、___绝对定位_____、__固定定位______的元素会实现模式转换。

固定定位以后的元素相对于___浏览器窗口___进行定位

请写出浮动的至少3个特点。
    答案  1:设置了浮动的元素，不占原来的位置。
    2:可以让块级元素在一行上显示（脱离标准流）
       （浮动找浮动，不浮动找不浮动）
    3：浮动以元素顶部对齐。
    4：元素设置浮动可以实现模式转换。

将span元素左浮动之后，能否直接给它设置宽高？简述理由。
    答案  可以直接给浮动后的行内元素设置行高。
    因为浮动后会给元素生成块级框(即实现模式转换)。

请写出使用伪元素清除浮动的CSS代码。
    .clearfix:after { content: ""; height: 0; line-height: 0; display: block; visibility: hidden; clear: both; }
        .clearfix { zoom: 1; }

请简述什么是子绝父相。
    答案  1：单独标签设置定位的时候，以浏览器左上角为基准设置定位的。
    2：盒子嵌套的时候，如果父盒子设置了相对定位，那么子盒子是以父盒子左上角为基准设置定位的。如果父盒子没有设置定位，那么子盒子以浏览器左上角为基准设置定位的。

主流网站实现精灵图技术主要依靠CSS的（）属性
    选项  A.background-position;B.background-color ;C.color; D.font;
    答案  A
    答案说明  实现精灵图技术主要是靠background-position控制背景图像的显示位置实现的
    由于精灵图中集合了页面很多的小图像，有效减少了页面图片的数量，从而降低用户请求页面时候发出的请求数量

如果需要设置一个元素的不透明度为50%，CSS属性应该设置为__________
    答案  Opacity:0.5

CSS设置图片在页面中垂直居中的CSS属性是：vertical-align:middle
     设置一个元素在页面中水平居中对齐的CSS是:margin:0 auto

请简述display:none和visibility:hidden 的用途及区别
    答案  两者都用于隐藏页面元素
    visiblity:hidden :隐藏的元素在页面保留位置;
    display:none :元素隐藏后不再占据页面位置;
    答案说明  两者都是用于隐藏元素，但区别在于一个是完全隐藏，另一个会保留元素在页面的位置