Html、Css常见面试题

最新推荐文章于 2024-08-09 20:45:54 发布

cx&lavender

最新推荐文章于 2024-08-09 20:45:54 发布

阅读量381

点赞数

分类专栏：面试文章标签： html 前端

本文链接：https://blog.csdn.net/m0_57391092/article/details/121844265

版权

面试专栏收录该内容

6 篇文章 1 订阅

订阅专栏

DOCTYPE有什么作用

告诉浏览器使用哪个版本的Html规范渲染文档

标准模式和混杂模式的区别

标准模式：以浏览器支持最高标准运行

混杂模式：向后兼容

DOCTYPE不存在或形式不正确会导致Html 文档以混杂模式显示

浏览器内核

介绍：浏览器所采用的渲染引擎，渲染引擎主要负责获取页面内容然后进行解析从而渲染页面。渲染引擎决定浏览器如何显示页面，不同浏览器有不同的内核，它们对网页的语法解释也不同，所以显示网页的内容以及页面格式信息也就不同，因此同一网页在不同的内核的浏览器里的渲染显示效果也可能不同，这也是网页编写者需要在不同内核的浏览器测试网页效果的原因

分类：

渲染引擎和js引擎

常见的浏览器内核：

1、Trident：IE,360,搜狗浏览器

2、Webkit：Safari Chrome

3、Geckos：FireFox Mozilla Suite/SeaMonkey

4、Presto：Opera7

渐进增强和优雅降级的不同

渐进增强：针对低版浏览器保证最基本的功能，再针对高级浏览器改进和追加功能

优雅降级：一开始构建完整的功能，再对低版浏览器进行兼容

Html5新特性

一、新增元素

1、画布canvas

2、媒体元素video和audio元素

3、本地离线缓存：localStorage永久性存储，sessionStorage临时性存储

4、新增语义化标签：header、nav、article、section、footer

5、表单控件：date url email calendar 等

二、移除元素

basefont center s strike tt

块级元素，行内元素及行内块元素

块级元素：

特点：可设置宽高，占满整行，会自动换行

常见：div p h1-h6 ul form table

行内元素：

特点：不能设置宽高，不会占满整行，也不会自动换行

常见：span img input button a label

行内块元素：可设置宽高，不会自动换行

转换：

display:block
display:inline-block

lable的作用

作用：定义表单控件间的关系，当用户选择该标签时，浏览器会自动将焦点转到呵标签相关的表单控件上

说明：

for属性：表示label标签要绑定的html元素

box-sizing属性

介绍：控制元素的盒模型，默认是content-box（标准模型）

盒模型组成部分：content(内容)，padding(内边距)，border(边框)，margin(外边距)

属性值：

content-box：标准模型，元素的width/height值的是content的宽高，即不包括padding,border,margin

border-box：怪异模型（IE传统盒模型）,元素的height/width属性指的是content部分的高/宽+border + padding +margin

标准的CSS中的盒模型与低版本IE的盒模型有什么不同之处？

标准盒模型：元素宽高等于内容宽高

低版本IE的盒模型：元素宽高等于内容宽高+border+padding+margin

CSS常用选择器

介绍：标签选择器（div，p）类选择器（.wrap） id选择器（#box）后代选择器（div span）子选择器（ul>li）相邻选择器(h1 + p) 、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）

优先级：!important>内联>id>类>标签

display的值及作用

值	作用
block	块级
inline	默认内联
inline-block	行内块
none	隐藏
table	表格
list-item	项目列表

position常见的定位方式

值	说明
static	默认，按照正常文档流进行排列
relative	相对定位，参考自身位置
absolute	绝对定位，让元素依据最近已定位的父元素进行定位，如果没有就依据整个浏览器进行定位
fixed	固定定位，参照整个浏览器而言
sticky	粘性定位

display:none与visibility：hidden的区别？

display：none隐藏元素，在文档布局中不保留原来的空间

visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间

阐述一下CSS Sprites

介绍：将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。

优点：

1.减少网页请求，从而提高页面性能

2.减少图片字节

3.CSS Sprites解决了网页设计师在图片命名上的困扰

4.CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

缺点：

（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。
（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。
（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。
（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节

为什么要初始化CSS样式

因为浏览器兼容问题，不同浏览器对标签的默认值是不同的，如果没有初始化不同的浏览器页面会显示差异

清除浮动

原因：父元素高度坍塌（即父元素高度为0）

方式一：给父元素设置高度（不推荐）

方式二：父级添加overflow属性（父元素添加overflow:hidden）（

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

不推荐使用

不推荐）

方式三：额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（添加无意义标签，语义化差不推荐）

方式四：使用after伪元素清除浮动（推荐使用）

    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
 
<body>
    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>
</body>

方式五：使用before和after双伪元素清除浮动

     .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }
 
 <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
    <div class="footer"></div>

px、rem、em的区别，及vw、vh

值	区别	举例
px	绝对长度单位，相对屏幕分辨率而言
rem	相对长度单位，相对根元素字体大小
em	em是相对长度单位，相对父元素字体大小
vw（自适应布局单位）	1vw等于视口宽度的1%。	浏览器高度950px，宽度为1920px, 1vw = 1920px/100 =19.2 px。
vh（自适应布局单位）	1vh等于视口高度的1%	浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，

常见兼容性问题

原因：不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况

浏览器内核：浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎，内核更加倾向于说渲染引擎

常见内核：

常见兼容性问题：

1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同

解决方案： css 里增加通配符 * { margin: 0; padding: 0; }

2、IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题

解决方案：设置display:inline;

3、当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度

解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度

4、图片默认有间距

解决方案：使用float 为img 布局

5、IE9一下浏览器不能使用opacity

解决方案：opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

6、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；

解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；

7、cursor:hand 显示手型在safari 上不支持

解决方案：统一使用 cursor:pointer

8、两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；

解决方案：父级元素设置position:relative

元素水平垂直居中的方式

方式一：flex布局

<style>
*{
	margin: 0;
  padding: 0;
}
#wrap {
  width: 500px;
  height: 500px;
  background: grey;
  display: flex;
	justify-content: center;
	align-items: center;
}
#wrap .box {
	width: 200px;
  height: 200px;
  background: pink;
}
</style>

方式二：定位+平移

<style>
*{
	margin: 0;
  padding: 0;
}
#wrap {
	width: 500px;
  height: 500px;
  background: grey;
  position: relative;
}
#wrap .box {
	width: 200px;
  height: 200px;
  background: pink;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
</style>
<body>
<div id="wrap">
<div class="box"></div>
</div>
</body>

方式三：定位+margin

<style>
*{
	margin: 0;
  padding: 0;
}
#wrap {
	width: 500px;
  height: 500px;
  background: grey;
  position: relative;
}
#wrap .box {
	width: 200px;
  height: 200px;
  background: pink;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top:-250px;
    margin-left:-250px
}
</style>

方式四：定位+margin:0 auto

<style>
*{
	margin: 0;
  padding: 0;
}
#wrap {
	width: 500px;
  height: 500px;
  background: grey;
  position: relative;
}
#wrap .box {
	width: 200px;
  height: 200px;
  background: pink;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
	margin: auto;
	position: absolute;
}
</style>