前端html面试题简约版

最新推荐文章于 2024-04-11 19:34:58 发布

AAA_86

最新推荐文章于 2024-04-11 19:34:58 发布

阅读量389

点赞数

分类专栏：面试题积累

本文链接：https://blog.csdn.net/weixin_46071217/article/details/109204917

版权

面试题同时被 2 个专栏收录

56 篇文章 5 订阅

订阅专栏

积累

11 篇文章 0 订阅

订阅专栏

1. 盒模型：

盒模型可以说是装内容的容器，这个容器由内容----外边距----内边距----边框组成。
在这里插入图片描述

盒模型又分为两种：

标准盒模型（W3C标准的盒子模型）

标准盒模型在页面中的总宽度是由= width +margin+padding+border组成

怪异盒模型(IE浏览器)

怪异盒模型在页面中的总宽度是由=width+margin组成（因为在IE浏览器 width里面已经包含了padding、border）

标准盒模型与怪异盒模型的转换：

box-sizing:content-box; 转换为标准盒模型标准；
box-sizing:border-box; 转换为怪异盒模型标准；
box-sizing:inherit; 规定应从父元素继承box-sizing属性的值

JS怎么获取和设置box的宽高：

IE： dom.currentStyle.width/height

非IE: window.getComputedStyle(dom).width/height

2. BFC：

BFC:块级格式化上下文”的意思通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。

BFC原理（要理解，可不说）：

BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
计算BFC的高度时，浮动元素也被计算在内
FC的区域不会与float重叠。

如何触发BFC？

在box属性值为这些的情况下，都会让所属的box产生BFC

overflow: auto/ hidden;
float: left/ right;
position: absolute/ fixed;

BFC中有边距重叠的问题

什么是边距重叠？

两个box如果都设置了边距，那么在垂直方向上两个box的边距会生边距的重叠，以绝对值大的那个显示在页面上。

重叠的方式有两种

父子关系的边距重叠

父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距

在这里插入图片描述

这种情况下可以给父元素添加overfow:hidden------ 这样父元素就变成BFC 不会随子元素产生外边距

在这里插入图片描述

同级兄弟关系的重叠：

同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个

在这里插入图片描述

这种情况下可以添加空元素和伪类元素，设置overflow:hidden 解决外边距重叠的问题

在这里插入图片描述

BFC可以用来做自适应布局：

利用BFC的这一个原理就可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。

在这里插入图片描述

这种情况给right加overflow:hidden；使其变成BFC，消除外部left因浮动对他的影响

在这里插入图片描述

BFC也可以用来清除浮动：

在这里插入图片描述

父元素加overflow:hidden/auto,变BFC

在这里插入图片描述

3. 清除浮动

为什么要清除浮动？

浮动元素会脱离文档流，导致父元素塌陷；举个例子：一个橡皮筋绑了10根筷子，此时橡皮筋就被撑开；当把筷子从橡皮筋中拿出来时，橡皮筋就变回原样。这样的话，父元素的高度就会塌陷

知道的有4种方法：

给父级盒子添加overflow，触发BFC方法达到清除浮动效果，使用overflow:hidden时，浏览器会自动检查浮动区域的高度高度不需要加只加上宽度就行

优点：简单、代码少、浏览器支持好;
缺点：在内容多而且还不能换行的情况下超出的内容只能隐藏掉

添加额外标签法 ，谁清除浮动在谁的后面添加空白标签

优点：通俗易懂不推荐使用
缺点：添加太多空白标签会影响代码的结构化差

添加after伪类清除标签， after标签属于空白标签的升级版可以不用单独加标签 IE8以上和非IE支持after IE8以下用zoom (IE里特有属性)

优点：符合闭合浮动思想，结构语义化正确，不容易出现怪问题
缺点：IE6-7不支持：after，使用zoom

.father{
                border: 1px solid black;
                *zoom: 1;
            }

添加before和after双伪类标签，这种方法更加准确的清除浮动两个合起来一起使用

 .a:after,.a:before{
                   content: "";
                   display: block;
                   clear: both;
               }

4. 元素水平垂直居中

如何让一个元素在父元素中上下左右居中？

html

  <div id="box">
        <div id="x"></div>
  </div>

在这里插入图片描述

父相子绝子元素向上向左移动本身宽度和高度一半
也可以直接用css3动画效果 transform:translate(-50%,-50%) 横向-50% 纵向-50%
使用display: flex 让父盒子变成弹性盒子子元素横向居中，纵向居中

5.两/三栏布局（圣杯/双飞翼）

1. 两栏布局,左边定宽，右边自适应

<div id="left">左边定宽</div>
<div id="right">右边自适应,前端前端前端前端前端前端前端前端前端前端</div>

 #left{
    float: left;
    width: 200px;
    background: green;
}
#right{
    overflow: hidden;
    background: red;
}

左边左浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素的影响

在这里插入图片描述
2. 三栏布局,圣杯布局、双飞翼布局：
圣杯布局、双飞翼布局两者功能相同，都是实现一个两边固定中间自适应的三栏布局 ------- 注意的是（中间都先加载出并渲染然后两边才会加载）

样式图：
在这里插入图片描述

圣杯布局
html

<div id="header"></div>
<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
<div id="footer"></div>

css

#container {
  padding-left: 200px; //浮动自身的宽度
  padding-right: 150px;
}

圣杯布局-----内容用一个大div包起来给大div添加浮动然后把三块内容中的center内容放在最上面让 center 把内容先加载出来再加载两边的因为js是一个单线程代码从上往下执行左右两边内容 padding 负值浮动本身的宽度

现在页面效果
在这里插入图片描述

现在页面还没有达到三栏效果我们需要再通过定位和margin 让左右内容回归到两边现在圣杯布局才成型最后我们要给页面一个最小的宽度保证页面效果正常显示但是我们用了定位所以最小宽度设为左右宽度单位+ 左盒子宽度

双飞翼布局：

双飞翼布局跟圣杯布局区别不是太大：

布局采用div单独包裹 center 内容区
左右两边使用margin负值来浮动
最小的宽度用左右两边的宽度+ 自己假想的宽度（因为光用两边宽度相加页面缩到最小的时候会被挤占中间栏内容被右栏覆盖所以自己要假想一些宽度加上）
圣杯布局用定位双飞翼布局不用定位

6.flex布局

flex 简单来说弹性布局用来为盒子状模型提供最大的灵活性每一个盒子都可认为是一个flex布局

.box{
  display: flex;
}

行内元素也可以使用felx布局

.box{
  display: inline-flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀。（Webkit :是一bai个开源的浏览器引擎比如iPhone浏览器内核就是Webkit ）

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

flex 的常用属性有：

flex-wrap:

如果内容过多一行装不下 wrap可以达到换行的效果
flex-wrap：nowrap 默认不换行
flex-wrap：wrap 换行第一行在上方
flex-wrap：wrap-reverse 换行第一行在下方

justify-content：

属性横轴的对齐方式

在这里插入图片描述

align-items：

属性纵轴如何对齐

在这里插入图片描述

7. CSS Hack

什么是CSS Hack?

针对不同的浏览器写不同的CSS,就是 CSS Hack
CSS Hack常见的有三种形式：属性Hack、选择符Hack、条件注释Hack， Hack主要针对IE浏览器

属性Hack

.test{ color:#090\09; /*  For IE8+、FF */ 
*color:#f00; / * For IE7 * / 
_color:#ff0; /*  For IE6  */ }

属性级Hack：
比如IE6能识别下划线“”和星号“”，
IE7能识别星号“”，但不能识别下划线” ”，而firefox两个都不能认识。

选择符Hack

* html .test{color:#090;} /* For IE6 and earlier */
*+html .test{color:#ff0;} /* For IE7 */
.test{color:#f00;} /* For IE8+ and not IE */

IE6能识别 *html .class{}，IE7能识别 *+html .class{}

条件Hack

<!--[if IE]>
    <p>你在非IE中将看不到我的身影</p>
<![endif]-->

<!--[if IE]>
<style>
    .test{color:red;}
</style>
<![endif]-->
 
<!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。

8. src与href的区别

src

src指向外部资源的位置，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。

比如

<script src="script.js"></script>

当浏览器解析到该元素时，会暂停浏览器的渲染，知道该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。

href

表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。

比如

<link href="reset.css" rel=”stylesheet“/>

简单来说 ----- src用于替换当前元素；href用于在当前文档和引用资源之间建立联系

9.link与import区别

场景

<head>
    <!-- link是标签，引入外部样式表 -->
    <link rel="stylesheet" href="./a.css">
    <style>
        /* @import 在css环境中 导入外部css */
        @import url('./b.css');
        .box{
          width: 100px;
          height: 100px;
          background: green;
        }
    </style>
</head>