html+css基础面试题

1.1 HTML面试题

面试题:行内元素有哪些?块级元素有哪些? 空(void)元素有哪些?

行内元素:span、img、input...
块级元素:div、footer、header、section、p、h1...h6...
空元素:br、hr...


元素之间的转换问题:
display: inline;            把某元素转换成了行内元素      ===>不独占一行的,并且不能设置宽高
display: inline-block;  把某元素转换成了行内块元素        ===>不独占一行的,可以设置宽高
display: block;                 把某元素转换成了块元素            ===>独占一行,并且可以设置宽高

面试题:页面导入样式时,使用link和@import有什么区别?

区别一:link先有,后有@import(兼容性link比@import兼容);
区别二:加载顺序差别,浏览器先加载的标签link,后加载@import

面试题:title与h1的区别、b与strong的区别、i与em的区别?

title与h1的区别:

定义:
    title:概括了网站信息,可以告诉搜索引擎或者用户关于这个网站的内容主题是什么
    h1:文章主题内容,告诉蜘蛛我们的网站内容最主要是什么
区别:
    title他是显示在网页标题上、h1是显示在网页内容上
    title比h1添加的重要 (title > h1 ) ==》对于seo的了解
场景:
    网站的logo都是用h1标签包裹的   
b与strong的区别:

定义:
    b:实体标签,用来给文字加粗的。
    strong:逻辑标签,用来加强字符语气的。
区别:
    b标签只有加粗的样式,没有实际含义。
    strong表示标签内字符比较重要,用以强调的。
题外话:为了符合css3的规范,b尽量少用该用strong就行了。
i与em的区别:

定义:
    i:实体标签,用来做文字倾斜的。
    em:是逻辑标签,用来强调文字内容的
区别:
    i只是一个倾斜标签,没有实际含义。
    em表示标签内字符重要,用以强调的。
场景:
    i更多的用在字体图标,em术语上(医药,生物)。

面试题:img标签的title和alt有什么区别?

区别一:
    title : 鼠标移入到图片显示的值
    alt   : 图片无法加载时显示的值
区别二:
    在seo的层面上,蜘蛛抓取不到图片的内容,所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词。

面试题:png、jpg、gif 这些图片格式解释一下,分别什么时候用?

png:无损压缩,尺寸体积要比jpg/jpeg的大,适合做小图标。
jpg:采用压缩算法,有一点失真,比png体积要小,适合做中大图片。
gif:一般是做动图的。
webp:同时支持有损或者无损压缩,相同质量的图片,webp具有更小的体积。兼容性不是特别好。

1.2 CSS面试题

面试题:介绍一下CSS的盒子模型

CSS的盒子模型有哪些:标准盒子模型、IE盒子模型
CSS的盒子模型区别:
    标准盒子模型:margin、border、padding、content
    IE盒子模型 :margin、content( border +  padding  + content )
通过CSS如何转换盒子模型:
    box-sizing: content-box;    /*标准盒子模型*/
    box-sizing: border-box;   /*IE盒子模型*/

面试题:line-height和heigh区别【大厂】

line-height是每一行文字的高,如果文字换行则整个盒子高度会增大(行数*行高)。
height是一个死值,就是这个盒子的高度。

面试题:CSS选择符有哪些?哪些属性可以继承?

CSS选择符:
    通配(*)
    id选择器(#)
    类选择器(.)
    标签选择器(div、p、h1...)
    相邻选择器(+)
    后代选择器(ul li)
    子元素选择器( > )
    属性选择器(a[href])
    
CSS属性哪些可以继承:
        文字系列:font-size、color、line-height、text-align...
***不可继承属性:border、padding、margin...

面试题:CSS优先级算法如何计算?

优先级比较:!important > 内联样式 > id > class > 标签 > 通配
CSS权重计算:
第一:内联样式(style)  权重值:1000
第二:id选择器                 权重值:100
第三:类选择器                   权重值:10
第四:标签&伪元素选择器   权重值:1
第五:通配、>、+         权重值:0

面试题:用CSS画一个三角形

用边框画(border),例如:
{
        width: 0;
        height: 0;

        border-left:100px solid transparent;
        border-right:100px solid transparent;
        border-top:100px solid transparent;
        border-bottom:100px solid #ccc;
}

面试题:一个盒子不给宽度和高度如何水平垂直居中?

方式一:
<div class='container'>
    <div class='main'>main</div>
</div>

.container{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 300px;
        height: 300px;
        border:5px solid #ccc;
}
.main{
        background: red;
}
方式二:
<div class='container'>
    <div class='main'>main</div>
</div>

.container{
        position: relative;
        width: 300px;
        height: 300px;
        border:5px solid #ccc;
}
.main{
        position: absolute;
        left:50%;
        top:50%;
        background: red;
        transform: translate(-50%,-50%);
}

面试题:display有哪些值?说明他们的作用。

none                隐藏元素
block               把某某元素转换成块元素
inline              把某某元素转换成内联元素
inline-block    把某某元素转换成行内块元素

面试题:对BFC规范(块级格式化上下文:block formatting context)的理解?

BFC就是页面上一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。

1. 了解BFC : 块级格式化上下文。
2. BFC的原则:如果一个元素具有BFC,那么内部元素再怎么弄,都不会影响到外面的元素。
3. 如何触发BFC:
        float的值非none
        overflow的值非visible
        display的值为:inline-block、table-cell...
        position的值为:absoute、fixed

面试题:清除浮动有哪些方式?

1. 触发BFC
2. 多创建一个盒子,添加样式:clear: both;
3. after方式
    ul:after{
            content: '';
            display: block;
            clear: both;
    }

面试题:在网页中的应该使用奇数还是偶数的字体?为什么呢?

偶数 : 让文字在浏览器上表现更好看。

另外说明:ui给前端一般设计图都是偶数的,这样不管是布局也好,转换px也好,方便一点。

面试题:position有哪些值?分别是根据什么定位的?

static [默认]  没有定位
fixed  固定定位,相对于浏览器窗口进行定位。
relative  相对于自身定位,不脱离文档流。
absolute    相对于第一个有relative的父元素,脱离文档流。


relative和absolute区别
1. relative不脱离文档流 、absolute脱离文档流
2. relative相对于自身 、 absolute相对于第一个有relative的父元素
3. relative如果有left、right、top、bottom ==》left、top
     absolute如果有left、right、top、bottom ==》left、right、top、bottom

面试题:写一个左中右布局占满屏幕,其中左、右俩块固定宽200,中间自适应宽,要求先加载中间块,请写出结构及样式。

双飞翼

面试题:什么是CSS reset?

reset.css           是一个css文件,用来重置css样式的。
normalize.css   为了增强跨浏览器渲染的一致性,一个CSS 重置样式库。

面试题:css sprite是什么,有什么优缺点

1. 是什么
    把多个小图标合并成一张大图片。
2. 优缺点
    优点:减少了http请求的次数,提升了性能。
    缺点:维护比较差(例如图片位置进行修改或者内容宽高修改)

面试题:display: none;与visibility: hidden;的区别

1. 占用位置的区别
display: none;              是不占用位置的
visibility: hidden;   虽然隐藏了,但是占用位置

2. 重绘和回流的问题

visibility: hidden; 、 display: none;  产生重绘
display: none;     还会产生一次回流

产生回流一定会造成重绘,但是重绘不一定会造成回流。

产生回流的情况:改变元素的位置(left、top...)、显示隐藏元素....
产生重绘的情况:样式改变、换皮肤

面试题:opacity 和 rgba区别

共同性:实现透明效果

1. opacity 取值范围0到1之间,0表示完全透明,1表示不透明
2. rgba   R表示红色,G表示绿色,B表示蓝色,取值可以在正整数或者百分数。A表示透明度取值0到1之间

区别:继承的区别
opacity会继承父元素的opacity属性,而RGBA设置的元素的后代元素不会继承不透明属性。

1.3 H5/CSS3面试题

面试题:什么是语义化标签

1. 易读性和维护性更好。
2. seo成分会更好,蜘蛛抓取更好。
3. IE8不兼容HTML5标签的。解决:可以通过html5shiv.js去处理。

面试题:::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。

1. 区别
    :是伪类、::伪元素  ===》是为了做区分

2.是什么?作用
    元素before之前 、 元素after之后
    作用:清除浮动、样式布局上也有作用

面试题:如何关闭IOS键盘首字母自动大写

<input type="text" autocapitalize='off'>

面试题:怎么让Chrome支持小于12px 的文字?

Chrome默认字体大小是:16px
**每个浏览器默认字体大小可能都不一样

<style type="text/css">
div{
    font-size:10px;
}
div span{
    display: inline-block;
    -webkit-transform:scale(1.6);
}
</style>

面试题:rem和em区别

相对于font-size

em针对于父元素的font-size
rem针对于根(html)元素的font-size

面试题:ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

<style>
    a,button,input,textarea{
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
</style>

面试题:webkit表单输入框placeholder的颜色值能改变吗?

<style type="text/css">
    input::-webkit-input-placeholder{
        color:red;
    }
</style>

面试题:禁止ios长按时触发系统的菜单,禁止ios&android长按时下载图片

禁止ios 长按时触发系统的菜单,禁止ios&android长按时下载图片
html,body{
    touch-callout: none;
    -webkit-touch-callout: none;
    
    user-select:none;
    -webkit-user-select:none;
}

面试题:禁止ios和android用户选中文字

html,body{
    user-select:none;
    -webkit-user-select:none;
}

面试题:自适应

淘宝无限适配【移动端】:淘宝无限适配 + 布局单位使用rem

面试题:响应式

1. 是什么?
    一个URL可以响应多端
2. 语法结构
    @media only screen and (max-width: 1000px){
        ul li:last-child{
            display: none;
        }
    }

    only : 可以排除不支持媒体查询的浏览器
    screen : 设备类型
    max-width | max-height
    min-width | min-height 
3. 响应式图片【性能优化】
    <picture>
        <source srcset="1.jpg" media='(min-width:1000px)'>
        <source srcset="2.jpg" media='(min-width:700px)'>
        <img srcset="3.jpg">
    </picture>

布局方案

一、什么情况下采用响应式布局
    
    数据不是特别多,用户量不是特别大,纯展示类的项目适合响应式布局
    
    例如:公司的官网、专题页面
    
    特别追求性能的项目,不太适合响应式,因为如果添加了很多的响应式就会造成加载速度变慢。

二、pc + 移动端应该做什么样的布局方案
    注意:访问量还可以或者比较大,类似于淘宝网。
    
    pc是一套,会加入一点点响应式。
    移动端是一套,会使用自适应的布局方式。

三、pc的设计图

    ui:1980
    笔记本电脑:1280
    ui图的宽度和电脑的宽度不对应该怎么办?
        1. 把ui图进行等比缩放,缩放成和电脑一样的尺寸
        2. 换1980的电脑
        
四、移动端的设计图

    宽度:750
    因为750设计图/2就是375,正好是iphone6的尺寸,我们要把iphone6的尺寸做为基准点。