2021面试题——css和html面试题

╰半夏微凉° 2023-01-17 09:22 225阅读 0赞

# css和HTML面试题 #

### 1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? ###

IE:trident内核

Firefox：gecko内核

Safari:webkit内核

Opera:以前是presto内核，Opera现已改用GoogleChrome的Blink内核

Chrome:Blink(基于webkit，Google与OperaSoftware共同开发)

### 2、行内元素、块元素和行内块元素都有什么？区别是什么 ###

行内元素：span，em，a，label，textarea，b，select

特点：

(1)设置宽高无效

(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间

(3)不会自动进行换行

块元素：div，ul，li，p，nav、aside、header、footer、section、article

特点：

（1）可以自动换行；

（2）能够识别宽高；

（3）margin和padding的上下左右均对其有效

（4）多个块状元素标签写在一起，默认排列方式为从上至下

行内块元素：img input

特点：

（1）不自动换行

（2）能够识别宽高

（3）默认排列方式从左到右

### 3.< image>标签上的title属性和alt属性的区别？ ###

alt如果无法显示图像，浏览器将显示替代文本

title（鼠标放在图片上显示信息）属性为设置该属性的元素提供建议性的信息

### 4、请写出至少5个html5新增的标签，并说明其语义和应用场景？ ###

section：定义文档中的一个章节
    nav：定义只包含导航链接的章节
    header：定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
    footer：定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
    aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。   标签定义其所处内容之外的内容
    <i> 标签显示斜体文本效果。 兼容所有浏览器
    <video> 标签定义视频
    <article> 标签规定独立的自包含内容
    <main> 标签规定文档的主要内容。

### 5、html5有哪些新特性、移除了那些元素？ ###

HTML5 主要是关于图像，位置，存储，多任务等功能的增加。

**新增**：拖拽释放(Drag and drop) API，语义化更好的内容标签（header,nav,footer,aside,article,section），音频、视频API(audio,video)，画布(Canvas) API，地理(Geolocation) API，本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失，sessionStorage 的数据在页面会话结束时会被清除，表单控件，calendar、date、time、email、url、search

**移除的元素**：纯表现的元素：basefont，big、u等；对可用性产生负面影响的元素：frame，frameset等

### 6. iframe的优缺点？ ###

**优点：**

a. 解决加载缓慢的第三方内容如图标和广告等的加载问题

b. iframe无刷新文件上传

c. iframe跨域通信

**缺点：**

a. iframe会阻塞主页面的Onload事件

b. 无法被一些搜索引擎索引到

c. 页面会增加服务器的http请求

d. 会产生很多页面，不容易管理。

### 7、设置文字水平居中的属性是？设置标签盒子水平居中的属性是？ ###

text-align:center;

margin:0 auto;

### 8.谈谈对css布局的理解？ ###

固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding

### 9.清除浮动的方法 ###

**1.空标签法（隔墙法）**

在浮动元素末尾添加一个空的标签例如:

< div style="clear:both"></ div>

或则其他标签br等即可。

优点：通俗易懂，书写方便；

缺点：添加许多无意义的标签，结构化较差

**2.父元素添加overflow属性方法**

给父级添加

overflow：hidden/auto/scroll

优点：代码简洁

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

**3.after伪元素清除浮动：**

:after方式为空元素额外标签法的升级版，好处是不用单独加标签

.clearfix:after{ 
    content:'';
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }
    .clearfix{ 
    *zoom:1;//IE6,7专有
    }

优点：符合闭合浮动思想 结构语义化正确

缺点：由于IE6,7不支持：after，使用zoom：1触发haslaout

**4.使用双伪元素清除浮动**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpemhhbmd6enp6_size_16_color_FFFFFF_t_70_pic_center]

### 10.列举几种隐藏元素的方法 ###

visibility：hidden;  /*简单的隐藏某个元素，但是元素占用的空间仍然存在*/
    opacity：0；/*一个css3属性，设置0可以使一个元素完全透明，制作出和visibility一样的效果*/
    position:absolute;/*使元素脱离文档流，处于普通文档之上，给他设置一个很大的left负值定位，使元素定位在可见区域之外*/
    display:none;/*元素会变得不可见，并且不会再占用文档的空间*/

### 11.css什么属性可以继承？ ###

1.字体系列属性

font-family：字体
    font-weight；字体粗细
    font-size；字体大小
    font-style：字体风格

2.文本系列属性

text-indent：文本缩进
    text-align：字体水平对齐方式
    line-height：行高
    word-spacing：！单词！之间的间距
    letter-spacing：！中文或字母！之间的间距
    text-transform：控制文本大小写capitalize每个单词以大写字母开头。uppercase定义仅有大写字母。lowercase	定义无大写字母，仅有小写字母
    color：颜色

**总结就是和字体以及文本相关的属性可以继承**

### 17.css中的link和@import的区别是什么？ ###

两者都是外部引用 CSS 的方式，但是存在一定的区别：

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

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

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

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

### 18.定位有几种？区别是什么 ###

position：relative 相对定位
    它是参照它在页面中原来的位置进行移动的

position：absolute绝对定位
    相对于距离他最近的有定位的父元素进行移动的

position：fixed固定定位
    它是相对于页面的位置进行移动的

**注意：只有添加了定位的元素才可以设置z-index属性，后面的值代表层级，没有px等单位。**

### 19.如何让一个盒子水平垂直居中？ ###

//已知宽高 <div class="div1"></div> <style> .div1{ 
            width:400px;
            height:400px;
            position:absolute;
            left:50%;
            top:50% 
            margin:-200px 0 0 -200px;
        }   
    </style>

//未知宽高 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .div1{ 
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                margin: auto;
                border: 1px solid #000;
                width: 400px;
                height: 400px;
            }
        </style>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .div1{ 
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                border: 1px solid #000;
                width: 400px;
                height: 400px;
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
    </body>
    </html>

//伸缩布局 .parent{ 
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    }

### 20、请描述一下cookies，sessionStorage和localStorage的区别？ ###

cookie是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密），cookie数据始终在同源的http请求中携带（即使不需要），在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

**存储大小：**

cookie数据大小不能超过4k

sessionStorage和localStorage虽然也有存储大小的限制，但是比cookie大得多，可以达到5M或者更大

**有效时间：**

localStorage 存储持久数据，浏览器关闭后数据不会丢失除非主动删除数据

sessionStorage 数据在当前浏览器窗口关闭后自动删除

cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

### 21.一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化，请写出大概的css代码？ ###

//方法一
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .div1{
                width: 100px;
                height: 200px;
                background-color: #ccc;
                float: left;
            }
            .div2{
                background-color: #ff0;
                margin-left: 100px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
        <div class="div2"></div>
    </body>
    </html>
    
    //方法二

### 22.如何解决跨域问题 ###

JSONP、CORS、通过修改document.domain来跨子域、使用window.name来进行跨域、HTML5中新引进的window.postMessage方法、在服务器上设置代理页面

1、JSONP

原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持GET请求。

2、CORS

服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

3、通过修改document.domain来跨子域

将子域和主域的document.domain设为同一个主域.前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域

主域相同的使用document.domain

4、使用window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的

### 23.前端如何优化网站性能？ ###

**1.减少http请求数量**：在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的 请求数量可以很大程度上对网站性能进行优化。

**2.可以通过精灵图，合并css文件和js文件，懒加载等方式来减少http请求**：

css sprites国内俗称CSS精灵，这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。

现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。

lazyload俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。

**3.控制资源文件加载优先级**：浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。

**4.利用浏览器缓存**

浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。

**5.减少dom操作**

**6.图标适用iconfont替代image标签**

### 23.解释下css sprites原理以及优缺点 ###

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，

再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，

background-position可以用数字精确的定位出背景图片的位置。

**优点：**

减少网页的http请求

**缺点：**

1.在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂

2.CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置

3.在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片

### 24.css盒子的margin中的合并和塌陷问题如何解决？ ###

外边距塌陷:
    
    当嵌套的两个块元素,给子盒子加向上的外边距时,
    父盒子会跟着掉下来,此时就是外边距塌陷.
    解决方案:
    1.给父盒子加padding
    2.给父盒子加上边框
    3.给父元素加overflow:hidden 属性

嵌套盒子垂直外边距合并方案:
    
    给父亲上边框
    border: 1px solid transparent
    给父亲内边距
    padding-top: 1px;
    给父元素 添加 overflow: hidden
    子元素 添加 position:absolute/relative 或 float

### 25.如何用css绘制一个实心三角？ ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style>
        .triangle {
          width: 0;
          height: 0;
          border: 100px solid transparent;
          border-top: 100px solid blue;
          /*这里可以设置border的top、bottom、left、
    right四个方向的三角*/
        }
      </style>
    </head>
    
    <body>
      <div class="triangle"></div>
    </body>
    
    </html>

### 26.css3新属性 ###

border-radius 圆角
    border-shadow 盒子阴影
    background-size 背景尺寸
    background-clip 背景裁剪
    background-origin 背景显示原点
    text-shadow 文字阴影
    text-overflow 文字隐藏的方式 裁剪/省略号
    box-sizing
    transform 变换 转换
    animation 动画
    transition 过渡动画
    媒体查询 @media

### 27.px，em，rem的区别 ###

**px像素（Pixel）。**  
相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)  
**特点**：IE无法调整那些使用px作为单位的字体大小；  
国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；  
Firefox能够调整px和em，rem。  
**em是相对长度单位。**  
相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)  
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。  
那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，  
这就使em值变为 16px\*62.5%=10px, 这样12px=1.2em, 10px=1em,  
也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了

**特点**：em的值并不是固定的；  
em会继承父级元素的字体大小。 所以我们在写CSS的时候，需要注意两点：  
body选择器中声明Font-size=62.5%；  
将你的原来的px数值除以10，然后换上em作为单位；  
重新计算那些被放大的字体的em数值。避免字体大小的重复声明。 也就是避免1.2 \* 1.2= 1.44的现象。比如说你在\#content中声明了字体大小为1.2em， 那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em， 它因继承\#content的字体高而变为了1em=12px。  
**rem**  
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。  
这个单位与em的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。  
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。  
目前，除了IE8及更早版本外，所有浏览器均已支持rem。  
对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。  
这些浏览器会忽略用rem设定的字体大小。

### 28.display：inline-block什么时候出现间隙？解决办法有什么？ ###

<!DOCTYPE html>
     
    <html>
     
    <head>
     
    <title>display:inline-block元素之间空隙的产生原因和解决办法</title>
     
    <style type="text/css">
     
    .parent .child {
     
    display: inline-block;
     
    background-color: #fdfd04;
     
    width: 100px;
     
    height: 100px;
     
    }
     
    </style>
     
    </head>
     
    <body>
     
    <div class="parent">
     
    <div class="child">child1</div>
     
    <div class="child">child2</div>
     
    </div>
     
    </body>
     
    </html>

效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpemhhbmd6enp6_size_16_color_FFFFFF_t_70_pic_center 1]

**空隙产生的原因：**

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

**解决办法**  
方法一：

<div class="parent">
     
    <div class="child">child1
     
    </div><div class="child">child2
     
    </div>
     
    </div>
     
    
     
    <div class="parent">
     
    <div class="child">child1</div><div class="child">child2</div>
     
    </div>

缺点：代码的可读性差

方法二： 给其父元素设置font-size:0;给其自身设置实际需要的字号大小

<div class="parent" style="font-size: 0px">
     
    <div class="child" style="font-size: 16px">child1</div>
     
    <div class="child" style="font-size: 16px">child2</div>
     
    </div>

缺点：inline-block元素必须设定字体，不然行内元素中的字体不会显示。 增加了代码量。

方法三：设置子元素margin值为负数

.parent .child + .child { 
     
    margin-left: -2px
     
    }

缺点：元素之间间距的大小与上下文字体大小相关；并且同一大小的字体，元素之间的间距在不同浏览器下是不一样的，如：font-size:16px时，Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以不同浏览器下margin-right的负值是不一样的，因此这个方法不通用。

注意：当marigin-right使用相对单位em来表示时，Chrome下可以正常去除间距,而Firefox下元素之间有重叠。

**方法四：设置父元素，display:table和word-spacing** **（最优方法）**

.parent{ 
     
    display: table;
     
    word-spacing:-1em; /*兼容其他浏览器，题主还未验证*/
     
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpemhhbmd6enp6_size_16_color_FFFFFF_t_70_pic_center]: /images/20221021/e1fe75c133c04277a7264dbc8cf1a542.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpemhhbmd6enp6_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221021/865c80ff62ff480e896de4740b0309f9.png