前端面试题(一)

野槐

已于 2024-07-04 14:05:11 修改

阅读量1.5k

点赞数

分类专栏：前端 H5 文章标签： html5 css

于 2022-04-21 22:20:18 首次发布

本文链接：https://blog.csdn.net/qq_44930306/article/details/124305884

版权

前端同时被 2 个专栏收录

45 篇文章 5 订阅

订阅专栏

6 篇文章 1 订阅

订阅专栏

7.BFC[块级格式化上下文]的特点和触发规则

14高度适应浏览器窗口的写法（也就是全屏页面）

一、解答题

1.样式表以及选择器的优先级【权重】

解答：样式表分为三类：

【行内>内部和外部：内部和外部看书写顺序（就近原则），后面会覆盖前面相同部分】

1）行内【内联、行间】

2）外部 <link rel="stylesheet" href="css/reset.css">

3)内部<style>.......</style>

# 外部样式表的导入（扩展）

1.link是html代码@import是css代码

2.link引入的方式会和html同时加载，@import方式：是先等html加载完成之后才会加载css

3.link没有兼容问题，@import有兼容问题

4.link引入的js是可以控制的，@import引入的js是无法控制。

选择器权重排列：

通配符=======标志：*，权重0

标签==========直接写标签名字，权重1

类============标志：.点权重10

伪类========标志：一个冒号，权重10

id============标志：# 权重100

行内样式表权重1000。

后代和子代权重：是所有选择器相加之和

伪元素======标志：两个冒号（有时候1个也能成功）权重：1

属性========标志：[],权重10

补充：

!important权重最高。这个是写在属性的后面的

优先级顺序：行内>id>类=伪类=属性>标签=伪元素>通配符

2.浮动特点

解答：作用-----实现元素的横向排列

特点：

1）元素一旦浮动就会不占位置，后面元素会向前补齐；

2）覆盖不了文字和图片

3）左浮动：从左到右依次横向排列；右浮动：从右到左依次横向排列；

4）一行放不下，会自动换行；

5）如果没有定义宽度，则元素宽度由内容决定；

6）无论从前是什么元素，只要加了浮动就可以加宽高了。

3.元素【标签】类型的分类

解答：

从外观上分类：单/双

从特点上分类：

块元素：block

1.能加宽高，独占一行，竖着排列

2.宽度默认和父亲同宽

常见标签：div、p、ol、ul、li、dl、dt、dd、form、hr、h1-h6、header、footer、nav、main

section、figure、figcaption、article、aside、hgroup、option等

行内元素：inline

1.不能加宽高，横着排列

2.宽度默认由内容撑开

3.有时候上下内外间距可能加不上

常见标签：span、a、i、em、b、strong、u、s、del、sup、sub等

行内块元素：inline-block【置换元素就是行内块元素，其余为非置换元素。】

1.能加宽高，横着排列

2.默认有3-5px的间距

常见标签：img、input、button、textarea、select等

元素类型的转换：通过display转换

display：block;=====转块

display:inline;=====转行内

display:inline-block;====转行内块

如果让你说3种类型：块、行内（内联）、行内块

如果让你说2种：块、行内（内联）

4.水平垂直居中方法集锦

解答：

margin:0 auto; /*将div水平居中*/

在“子绝父相”的条件下，水平方向：left:50%;margin-left:子盒子宽度的一半；

垂直方向：top:50%;margin-top:子盒子高度的一半；

div里的内容居中：text-align:center;line-height:高度；

5.定位模式和定位的特点

解答：position-----调整元素位置，实现覆盖的效果。

1.静态定位（默认定位，相当于没写）static

2.相对定位relative

1）从文档流角度：不会脱离文档流（不脱标），依然占据位置

2）有层叠性，可以通过z-index来调整层，值越大越靠上，支持负数，不能带单位

3）参照物：自己原来的位置

3.绝对定位absolute

1）从文档流角度：会脱离文档流（全脱标），不会占据位置

2）有层叠性

3）参照物：有定位的父级元素，如果都没有定位，那就是浏览器窗口的第一屏

这里父级元素的定位可以是除了静态之外的任何一种。

推荐：子绝父相

4.固定fixed

1）从文档流角度：会脱离文档流（全脱标）

2）有层叠性

3）参照物：浏览器窗口

5.粘性定位sticky

不滚动是相对，滚动是固定

=====================================================================

层叠性：意思就是元素的堆叠顺序，默认后面的会覆盖前面的，如果想手动调整可以通过z-index来调整。

z-index这个属性必须结合定位才能使用。默认值0.

====================================================================

定位的主要作用是用来调整位置的，也可以实现覆盖，不同的效果使用的定位模式是不一样的。

可以通过偏移值来调整位置，也就是top、bottom、left、right来调整位置。

一般覆盖效果用绝对定位。

广告或者左右2侧导航用固定定位。

吸顶用粘性定位

单纯的简单调一下位置可以用相对。

6.画个三角形

  <style>
         /* 利用边框设计三角形 */
        /* 设置宽度和高度为0，其他方位的边框颜色设置为transparent透明 */
        div:nth-child(1){
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-top: 10px solid red;
        }
        div:nth-child(2){
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-left: 10px solid red;
        }
       /* 导航栏里的三角形 */
       div:nth-child(3){
            width: 50px;
            height: 30px;
            background-color: yellow;
            position: relative;
        }
        div:nth-child(3) span{
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-top: 10px solid red;
            position: absolute;
            top: 10px;
        }
    </style>
<body>
    <div></div>
    <div></div>
    <div>导航<span></span> </div>
</body>

7.BFC[块级格式化上下文]的特点和触发规则

解答:作用------研究块级元素布局规则

特点（布局规则）：

1.BFC⾥的盒⼦会在垂直⽅向上⼀个接⼀个的放置（竖着排列）

2.盒⼦垂直⽅向的距离是由margin决定的

3.每个元素margin的左侧，与包含块border左侧相接触

4.BFC是一个独立的容器，子元素不会影响外面的元素。

5.BFC的区域不会和浮动的元素发生重叠（浮动的元素不会覆盖BFC的区域）====应用：左右2栏布局，双飞翼布局

6.计算BFC高度的时候浮动的元素也会参与计算：应用：高度塌陷问题（子元素浮动了，父元素没有高了）

7.属于同一个BFC的元素会发生外间距重叠

更新：

使 BFC 内部浮动元素不会到处乱跑；
和浮动元素产生边界。

触发规则：

1.html就是一个BFC

2.浮动

3.定位：绝对和固定

4.overflow:hidden、auto、scroll

5.display:inline-block、flex

8.宽高自适应

1）宽度自适应：

a)宽度不写或者写width:auto;（推荐）

总宽和父元素保持一致。

b)宽度写100%。

只是内容区宽度和父元素保持一致

2）高度自适应：

a)高度不写或者写height:auto;或者写最小高：min-height。

b)高度100%

写最小高的好处：如果盒子没有内容或者内容比较少，也能保证这个区域是存在的，如果内容多，就随着内容撑开。

9.什么是高度塌陷

即：子元素浮动了，就漂浮起来了，导致不占位置，撑不开父盒子，父盒子的高度受影响了。

解决方案：

1）、给塌陷的盒子写：overflow：hidden。

缺点：如果有元素定位定到了盒子外面，那就会隐藏掉。

2）、隔墙法：在最后一个浮动的元素后面添加一个空的div标签，然后写一个行内样式：clear:both。

缺点：增加了多余的标签，造成代码冗余。

3）、万能清除法：【哪个盒子塌陷了，就给哪个盒子用这个类名。】

.clearfix::after{

content:"";

display:block;

clear:both;

width:0;

height:0;

overflow:hidden;

visibility:hidden;

}

10.什么是外间距重叠

1）兄弟关系：

外间距不会累加求和，而是选择最大值去用。

2）父子关系：

给子元素加上外间距，会把父元素带下来

解决方式：

1.让父亲触发BFC：overflow：hidden

2.给父元素加边框线：border-top:1px solid transparent

11.盒子阴影的写法

1）盒子阴影box-shadow：

水平位置垂直位置模糊度阴影大小颜色 inset(不写就是外阴影，写就是内阴影)。

可以写多阴影：之间逗号隔开。

2）文本阴影text-shadow：

水平位置垂直位置模糊度颜色。

可以写多阴影：之间逗号隔开。

12.关于属性的继承问题

1. 继承指的是子元素继承父元素的样式

2. 只要是和文字相关的属性基本上都可以继承

color：文字颜色

font-size:文字大小

font-family：字体

font-style：文字样式

font-weight：文字加粗

text-decoration：修饰线

text-align：水平居中

line-height：垂直居中，行高

text-indent：首行缩进

text-transform:大小写转换 = uppercase：转大写///lowercase:转小写///capitalize:首字母大写

letter-spacing：字间距

word-spacing：词间距

3.list-style

4.list-style-type

5.list-style-position

6.list-style-image

7.border-collapse：表格边框线合并

以上属性都是可继承的。

13关于初始化样式，也就是重置样式的好处

1. 有些标签默认自带一些间距。

2. 浏览器有兼容问题，不同的浏览器对标签的默认值是不同的。

所以为了统一管理，全部清除掉，有需要自己去设置。

14高度适应浏览器窗口的写法（也就是全屏页面）

```css

html和body都要设置成100%

html,body{

height:100%;

}

15.em/rem/vw/vh的区别

em是一个相对单位，是相对于该元素的font-size而言的。

如果该元素的字号是16px，那么1em=16px 2em=32px

如果改元素的字号是20px，那么1em=20px 2em=40px，依次类推

======================================================

rem是一个相对单位，是相对于html的font-size而言的

如果html的字号是16px，那么1rem=16px，依次类推。

======================================================

vw是相对于视口宽度而言的。

1vw=视口宽度的1%

如果视口宽度是320px，那么1vw=3.2px

======================================================

vh是相对于视口高度而言的。

1vh=视口高度的1%

如果视口的高度是1080px，那么1vh=10.8p

16常见的浏览器以及内核还有前缀

1.谷歌chrome======内核(webkit)========前缀（-webkit-）

2.苹果safari======内核（webkit）======前缀(-webkit-)

3.火狐firefox=====内核（gecko）=======前缀(-moz-)

4.欧朋opera=======内核（presto）======前缀（-o-)

5.IE=============内核（trident）=====前缀（-ms-)

更新：
Opera: 以前是 presto 内核，Opera 现已改用 GoogleChrome 的 Blink 内核
Chrome: Blink(基于 webkit，Google 与 Opera Software 共同开发)

17.常见的布局方案

1.固定布局：以像素为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸;

2.百分比布局(流式布局)：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果

3.响应式布局：检测设备的宽度发生改变，就显示不同的布局规则。这种布局需要兼容各种设备工作量大，效率低下，代码累赘，会出现隐藏无用的元素，加载时间加长

4.媒体结合rem的布局

5.vw结合rem的布局

6.混合布局：将各种布局方案混用，一个项目当中可能会用到像素、百分比、媒体、vw和rem等各种技术，总之只要达到我们的布局效果即可.

18.双飞翼布局【BFC】

    <style>
        .box1{
         width: 300px;
         height: 200px;
         background-color: pink;
         float: left;
        }
               /* 双飞翼布局-----让box2变成BFC */
        .box2{
            height: 400px;
            background-color: aquamarine;
            overflow: hidden;
        }
        .box3{
            width: 300px;
            height: 200px;
            background-color: yellow;
            float: right;
        }
       .left{
           width: 100px;
           height: 600px;
           background-color: red;
           float: left;
       }
                 /* 左右布局------右边盒子变成BFC */
       .right{
           height: 600px;
           background-color:green;
           overflow: hidden;
       }
    </style>
<body>
                <!-- 双飞翼布局 -->
    <div class="box1">双飞翼布局-左</div>
                <!-- 先完成box1&box3的固定,再管box2 -->
    <div class="box3">双飞翼布局-右</div>
    <div class="box2">双飞翼布局-中</div>
    <br>
                <!-- 左右布局 -->
    <div class="left">左右布局--左边固定</div>
    <div class="right">左右布局--右边变化</div>
</body>

19圣杯布局【弹性盒子实现】

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }
 /* 圣杯布局：顶部和底部的高度固定死，中间高度自适应(中间的高度跟随浏览器)。 */
        body {
            display: flex;
            /* 改变轴向 */
            flex-direction: column;
        }

        .top {
            height: 100px;
            background-color: pink;
        }
/* 弹性盒子实现双飞翼布局 */
        .center {
            background-color: aqua;
            flex: 1;
            display: flex;
        }

        .left {
            width: 100px;
            height: 100%;
            background-color: red;
        }

        .zhong {
            flex: 1;
            background-color: green;
        }

        .right {
            width: 100px;
            height: 100%;
        }

        .bottom {
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="top">top</div>
    <!-- 中间是一个双飞翼布局 -->
    <div class="center">
        <div class="left">left</div>
        <div class="zhong">zhong</div>
        <div class="right">right</div>
    </div>
    <div class="bottom">bottom</div>
</body>

二、不太注意的点-----填空题

1.关于title属性

鼠标滑过显示的内容。【每一个标签都有title属性】

2.表格行分组的叫法

1） thead：头、页眉

2） tbody：身体、主体

3） tfoot：脚、页脚

3.关于overflow的值

1）hidden：隐藏

2）auto：自动，当内有有超出才会产生滚动条（建议用）

3）scroll：滚动条（不太推荐）

4）visible：显示（默认值）

5） inherit:从父元素继承。（所有属性都有）

6）对于overflow我们可以只写x或者y

a) overflow-x b) overflow-y

4.关于charset和DOCTYPE

<meta charset="UTF-8">

charset属性规定html的编码格式。有时候网页出现乱码就是因为没有设置这个属性。

DOCTYPE的作用：声明文档类型

5.img中的alt和title的区别

alt: 图片加载不出来时候的提示文字，title是鼠标划过提示文字

6.盒子模型的组成

内容（content）、内间距(padding) 、边框（border）、外间距（margin）

书写方式：

内间距不可以写负数

外间距可以写负数

padding:10px；======一个值是，上下左右都一样。

padding:10px 20px;======两个值，分别是上下左右。

padding:10px 20px 30px;====三个值，分别是上左右下。

padding:10px 20px 30px 40px;====四个值，分别是：上右下左

外间距同理。

7.盒子模型分类

1）标准盒子模型（w3c盒子）：box-sizing:content-box;（默认值，不写就是标准盒子）

我们自己定义的width指的是内容区的宽度，加边框和内间距会撑大盒子

2）怪异盒子模型(IE盒子)： box-sizing:border-box;

我们自己定义的width指的是：内容+左右内间距+左右边框线之和

加边框和内间距不会撑大盒子的