html和css面试题

面试题 html css

div和span的区别

• div 块级元素 （容器级别）
• span 、i、b-strong、u、s是行内元素（文字级别）

1. 阐述块元素、行内块、行内元素的特点，及他们之间的区别，他们之间的转换。

   • 块元素（div、p、hr、h1-h6、header、footer、ul>li 、 dl dt dd）: 可设宽高-padding-border-margin-line-height。 比较霸道，会单独占一行，也可以容纳其他标签和文本
   • 行内元素(span 、i、b-strong、u、s、a)： 不可设置宽高、可设置水平方向的padding-margin,垂直方向不行，多个行内元素会在同一行上显示，行内元素里面一般存放文本，但a标签除外
   • 行内块元素（input、button、select、img）： 可设宽高-padding-border-margin-line-height, 多个行内块元素会在同一行上显示。要去除input和button默认的轮廓使用outline

   如何转换：

   ​ display: block|inline-block|inline

2. 说下对浮动的理解，及浮动会带来什么不好的现象及解决办法。

   作用：浮动就是为了让多个元素能够并排显示，同时也会将元素隐性的转换成行内块元素。

   缺点：会导致父元素高度坍塌（height:0px）。

   ​ 解决办法：

     		1. 父元素设置`overflow:hidden` 触发BFC机制
     		2. 通过after伪元素，设置clear：both
     		3. 通过双伪元素，设置clear：both
   

3. 说下对定位的理解

   定位就是某个元素定在页面中的某一个位置，或者说是压在页面某个元素之上。

   当业务中需要将元素压在页面中某个元素的上面的时候，就可以用到定位。

   它分为了：绝对定位（absolute）、固定定位(fixed)、相对定位(relative)、粘性定位(sticky)

   绝对定位和固定定位是会脱离文档流的，并且同时也会将元素隐性转换成行内块

4. 说下子绝父相定位方式

   子绝父相就是父元素中使用相对定位，子元素使用绝对定位。父元素使用相对定位，盒子外面的元素就不会向上顶，此时的子元素相对的是父容器而定位，如果父元素没有使用相对定位，那么子元素就是相对祖先元素来进行定位的。

5. 谈下对w3c盒子模型和IE盒子模型的理解

   ​ 盒子模型是由内容，边框，内边距，外边距组成的

   ​ w3c标准盒子模型： content部分不包含了padding和border

   ​ IE盒子模型：content部分包含了padding和border

   ​ 通过box-sizing：border-box可以将盒子转成ie盒子模型，并且会自动进行內减。

6. css继承性， 会继承哪些属性

   只有文字的属性能够继承，盒子的属性不能继承

   文字属性：color、font-系列、line-系列、text-系列

   盒子属性: background-系列、width、height、border-系列、浮动、定位

7. css优先级

   1. 权值： 选择器的针对性越强，权值越高。

   2. 把元素选择器出现的权重进行累加求和，权重越大优先级越高。

   3. 权重一样，后者覆盖前者。

      个： 标签和伪元素

      十：类和伪类

      百：id

      千： style

      无穷大： !important

      !important>内联样式>id>类和伪类>标签和伪元素

8. 你知道哪些h5新标签和c3新属性

   h5:

   ​ header、footer、video、audio、 canvas等语义化标签

   ​ 增强了浏览器的存储功能，localStorage在离线的状态下也可以长期保存数据，在浏览器关闭后数据也不会被删除。但是sessionStorage 在浏览器关闭后数据会自动删除。

   ​ 增加了一些表单控件，例如input中type属性值为email，number

   css3:

   ​ 动画（transform、transition、animate）

   ​ border-radius：设置圆角；box-shadow：设置阴影

   ​ 媒体查询@media

   ​

9. 说下标准流的理解和哪些布局方式会脱离标准流，脱离标准流对其他元素……会有什么影响

   ​ 标准流就是页面元素从上到下，从左到右依次排列，并且不会出现层叠的现象。

   ​ float、fixed、absolute都会脱离文档流，脱离标准流之后，不会占有空间，下方中的元素会往上顶来代替它的位置。

   ​

10. 使用css实现三角形和圆形和椭圆形的原理

• 三角形： 宽高度设为0, 一边设置颜色，其他三边设置透明（tranparent）

• 圆形： 宽高一样，border-radius：50%

• 操场（两边半圆）： border-radius：设置高度的一半

• 椭圆：宽度必须大于高度，然后设置border-radius为50%

  ​

11. 拿着一张UI给的ps设计稿，说下使用html+css还原静态网页的思路

    确定页面版心

    根据设计稿分析出对应行和列的大致轮廓

    使用合适的标签实现对应的行和列

    量取设计稿中相应元素的尺寸，颜色，行高。编写css样式，将公共的样式进行抽离，以便复用。

12. height和line-height理解

    行高指的是一行文本的高度，分为上间距，文本高度，下间距，并且上下间距是相等的，默认会有顶线，中线，基线，底线，上一个元素中的基线到下一个元素中的基线之间的距离就是行高。行高和高度必须相等才能使文本垂直居中，行高大于高度的话，文本就会偏下，行高小于高度的话，文本就会偏上。

    如果一个标签没有定义 height 属性，那么元素中的高度就是由行高来决定的。

13. css有哪些选择器。

    id选择器，类选择器，标签选择器，通配符选择器，子代选择器，后代选择器，相邻选择器

14. 对伪元素的理解，及常见应用场景

    伪元素类似于新增一个dom节点到dom树中，只能说是类似，因为它不是一个真正的元素，但是操作起来是和真实元素是一致的。只有双标签才能有伪元素，单标签是没有伪元素的，并且js是无法获取到伪元素代码的

    应用场景：

    ​ 用于清除浮动

    ​ 字体图标

    ​ 分割线

15. 弹性布局

    ​ 弹性布局也叫弹性盒子布局，任何一个元素都可以使用弹性布局，使用弹性布局的容器叫做flex容器，容器内的元素叫做flex项目，弹性布局默认分为主轴和交叉轴。

    ​ 常用的属性：

​ flex-warp:超出容器是否换行

​ flex-dricection:改变主轴的方向

​ justify-content:主轴对齐方式

​ align-item:交叉轴的对齐方式

​ flex-graw:瓜分容器剩下的空间

​ order:flex项目的排列顺序

16. 三栏布局，圣杯和双飞翼布局，左侧固定，右侧自适应

    圣杯和双飞翼布局：也叫三栏布局，左右定宽，中间自适应，但是中间布局部分必须先加载；双飞翼布局和圣杯布局一致，就是在中间部分使用一层父级元素包裹。使用圣杯布局的话，浏览器在缩小的过程中，布局会变形，双飞翼解决了圣杯中缩小变形的问题

    ​

17. 你知道哪些ps切图的方式

    基于参考线的切图

    基于图层切图

    基于切片切图

    基于第三方插件

18. 全屏幕滚动和视觉滚动效果原理

19. BFC机制

    bfc：格式化上下文，相当于是一个独立的容器。使用bfc的话可以让空间内的子元素不会影响到容器外面元素的布局。

    float的值不为none，display的值为inline-block，overflow的值为auto或者overflow的值为hidden都可以触发bfc。然后bfc是可以用来解决父容器高度坍塌问题还有外边距重合问题的。

20. css样式重置reset和normalize

    css reset的目的就是将浏览器中自带的样式给重置掉，这样的话更利于保证各浏览器渲染的一致性。

    normalize:是尽量保留浏览器中默认自带的样式,会自动修复浏览器中的bug,让各浏览器的渲染具有一致性。

21. css优化、css hack

    css优化：

    ​ 1.巧妙的运用css继承机制，父元素中已经定义了，子元素就没有必要再定义

    ​ 2.对css文件进行压缩

    ​ 3.将公共样式进行抽离，以便复用

    ​ 4.使用link异步加载css文件

    css hack：

    ​ 针对不同的浏览器，渲染不用的css样式。分别有三种不同的表现形式：css属性前缀法、选择器前缀法、ie条件注释法

    ​

22. 图片格式解释

    psd:没办法直接使用

    jpg:不支持透明半透明，所有空白区域自动填充白色。一般用于网页中的大图，高清图，广告等

    gif：支持透明，但是不支持半透明。一般用于网页中的小图标，动态图

    png8：支持透明，但是不支持半透明。一般用于网页中的小图标

    png24：支持透明，也支持半透明。一般用于图像中存在半透明效果的图片

23. ie有哪些兼容问题，及解决办法

    1.IE6 双倍边距的问题：在ie6 中设置浮动，同时又设置 margin，会出现双倍边距的问题

    解决：设置display: inline;

    2.IE6-7 line-height 失效 的问题:在ie 中 img 与文字放一起时，line-height 不起作用

    解决：都设置成 float

24. 量取设计稿的技巧

    把要量取的部分先用辅助线圈起来，然后使用标尺工具或选区工具从每个辅助线交叉点连接到另一个交叉点即可量取高度和宽度

    测量的时候，尽可能的把画布放大，这样的就会测量的更精准一些。

25. 响应式方案有哪些

    css3媒体查询:

    ​ 媒体查询可以让我们在不同的媒体类型下定义不同的样式,当重置浏览器窗口的时候,页面也会根据浏览器窗口的宽高度来重新渲染页面。

    百分比:

    ​ 通过百分比作为单位,随浏览器宽高的变化而变化,从而实现响应式布局效果。

    ​

26. bootstrap响应式原理

    bootstarp提供了一套响应式，移动端设备优先的栅格系统，随着屏幕或视口尺寸的增加，系统会自动最多分为12列，如果超出了就会换行显示。

    ​

27. 元素的如何水平居中

    1.margin，值为0和auto

    2.绝对定位absolut，设置left为50%，margin为负的宽度的一半。

    3.弹性布局，设置justify-content值为center

28. 如何让元素水平垂直居中

    1.通过绝对定位，设置left和top都为50%，然后通过margin-left值为宽度的负一半，margin-top值为高度的负一半即可。

    2.也是通过绝对定位，设置left和top都为50%，然后通过transform：translate设置x轴和y轴的偏移量都为-50%。

    3.通过弹性布局，设置justify-content，align-item值为center

29. 说下对精灵图（雪碧图）的理解

    雪碧图大概就是将一些小图标合并成一张图片，能够减少网络请求次数，加快了页面的渲染。

30. css单位的理解：px、em、rem、vh

    px：屏幕分辨率的像素，1px就会等于1像素

    em：相对于父元素的字体大小，1em就会等于父元素的字体大小

    rem：相对于根元素的字体大小，1rem就会等于根元素的字体大小

    vh：视口的高度，1vh就会等于视口高度的百分之一

31. css3动画 transform 、transition、animation

    transform：设置元素偏移，旋转，缩放，倾斜，透明

    transition：过渡动画，平滑效果

    animation：和@keyframes配合一起使用，可以设置一帧一帧的动画效果

​ 一般会在哪里使用到？

​ 选择商品规格弹出的模态框

​ 页面loding加载

​ 下拉箭头的旋转

31. auto和%区别

    宽度设置为auto的话，会将子元素撑开至父容器的宽度，会减去子元素中的边框，内边距和外边距

    宽度设置为100%的话，会强制设置成跟父容器一样的宽度，如果给子元素设置额外的空间的话会溢出父容器的空间。

32. 谈谈外边距margin合并和塌陷问题，及如何解决

    当两个垂直外边距相遇的时候，他们只会形成一个外边距，合并的外边距只会取其最大的作为外边距高度，这就是margin合并。

    解决：

    ​ 只给其中一个元素设置外边距即可

    ​ 或者是给其中一个元素加上一个父级盒子，然后设置overflow：hidden

    当父盒子中没有文字，没有边框，也没有上内边距的时候，给子元素设置上外边距的时候，父盒子是一起往下移动的，这就是margin塌陷。

    解决：

    ​ 给父盒子设置边框或者是内边距，这样的话还要对父盒子进行內减（box-sizing:border-box）

    ​ 让父盒子触发bfc，设置overflow：hidden

    ​

33. line box 盒子和block box盒子

34. 移动端适配方案

    1.通过vh、vw来进行适配。vh和vw表示的是视口的宽高度，1vh=视口高度的百分之一，1vw=视口宽度的百分之一，使用vw和vw来适配的话也会方便很多。

    2.使用rem适配，设置理想视口，通过媒体查询或通过js监听页面的可视宽度。

    使用媒体查询的话，根据不同设备的大小来作为对应的分割点，首先我会先通过每个分割点来除以若干等份求出每一份的份额来作为根元素的字体大小

    使用js监听页面的可视宽度的话，通过onresize来监听页面视口的变化，通过innerWidth来获取出页面的可视宽度，通过获取出来的值来除以若干等份后作为根元素的字体大小

35. 如何实现0.5像素边框问题、0.5水平线

    水平线：高度设置为1，通过transform：scale 缩放0.5 边，transform-origin 设置缩放的起点为50%100%，让0.5的水平线更加实一点

    边框：父容器使用相对定位，然后使用伪元素，伪元素中通过绝对定位，设置宽高都为200%，transform：scale缩放x轴y轴都为0.5 缩放后出现的虚线通过transform-origin设置缩放起点为左上

36. display:none与visibility：hidden的区别？

    display：none不会对元素进行显示，并且文档不会为其分配空间

    visbility：hidden对元素进行隐藏，仍然会保留原来的空间位置

37. src和href的区别

    src引用外部资源来替换掉当前的元素，在img和script标签中使用，当加载到src时，会暂停对文档的处理，直到编译结束后才会继续处理下去。

    href标识超文本引用，用在link和a标签上面，加载到href的时候，会并行处理该资源，不会暂停对文档的处理。

38. 重绘和回流
    页面的首次加载就会产生回流（重排）

    重绘：改变页面元素样式，不影响它在文档中的位置，这就叫重绘

    回流（重排）：对dom节点信息进行更改，需要对dom结构进行重新计算，重新对页面进行布局，这就是回流

    回流一定会重绘，重绘不一定会回流
    产生重绘：
    color、background、borde-style…
    产生回流：
    页面首次渲染、浏览器视口发生变化、元素字体、内容、大小发生变化…