The interview from sw503544488

什么是HTML5

分为⼴义和狭义的定义，
狭义的HTML5指新版本的HTML语⾳，具有新的元素、属性、⾏为。
⼴义的HTML5泛指实现复杂⽹站⽤到的⼀系列新技术集。

inline-block产生缝隙的原因是什么？如何解决

TAB、LF、FF、CR、PACE 都是空白字符多个连续的空白字符
会合并成一个空格，而空格也占据一个字符的空间
white-space 属性可以修改合并规则

如何解决？

通过设置font-size
解决通过更改布局方式来解决，比如使用float、flex、grid布局

题目来自饥人谷

聊一聊选择器优先级

优先级的顺序是：@import> 内联样式>选择器样式> 浏览器默认样式> 继承样式
对于同一级别的样式，比如都带有@import则比较选择器的权重
对于权重相同的，位置靠下的覆盖位置靠上的，对于权重不同的权重高的覆盖权重低的
权重计算规则：内联千位；id选择器百位；伪类、类、属性十位；标签、伪元素个位。根据含有的选择器计算权重。‘>、~、+、:not` 不计入

第一种：

通过link标签引入
<link rel=”stylesheet” href=”index.css”>

第二种：

通过css语法@import引入

1）放在style标签或者css文件中
2）@import必须放在css文件开头
3）语法后面的分号必不可少
如：
<style>
@import url("copy.css");
@import url('index.css');
@import url(index.css);
@import 'index.css';
@import "index.css";
</style>

第三种：

将css放在style标签内

第四种：

内联样式
直接将style放在标签内（拓展性差）

常见的行级标签有哪些？

span,a,em,strong,img,input,label,textarea,select,button,code

饥人谷

什么是层叠上下文？如何形成叠上下文？层叠顺序是怎样的？

层叠上下文

一个多方参与的构建的遵循一定规则的、独立的环境。
子项可能创建新的上下文，与外层上下文有通用的规则，且与外层上下文隔绝。

形成条件

根元素(HTML)
z-index不为auto的绝对定位和相对定位元素
fixed 定位元素和sticky定位元素(z-index不用加也可以形成)
z-index不为auto的flex item
z-index不为auto的grid item
opacity小于1的元素
transform不为none的元素

层叠规则

属于同一层叠上下文的同级元素比较
当层叠上下文属于某一层级时，其内的层叠上下文都属于对应层级

区块段落：section,article,nav,header,main,footer,aside
音频视频：audio,video
表单类型：type="color",date,email,number,search,range,tel,time
语义元素：mark,figure,figcaption,time,output,progress
废弃的标签：font,s,center,frameset,frame,rb

使用table、thead、tbody、tfoot、tr、th、td、caption、colspan、rowspan实现一个标准的表格

学生信息统计

班级	年纪	分数	班级
小谷	4	90	一班
小丽	20	99	一班
小明	21	80	二班
更多信息查看官网

什么是可替换元素，有哪些可替换元素？

指展现效果不是有css元素来控制的，这些元素是一种外部现象，他们的外观渲染是独立于css的。
典型的可替换元素有<iframe>

列举你知道的全局属性

class、id、style、title、contenteditable、tabindex、hidden、data-*

常见的块级标签有哪些？

div,p,header,ul,ol,li,nav,table,section,footer,main
饥人谷

列举并解释你知道的选择器类型？

元素选择器
ID选择器
类选择器（class选择器）
通用选择器
属性选择器
组合选择器
- A, B
  A, B 同时选中A 和 B
- A B
  选中A的后代B元素，注意A和B之间有个空格(所有后代元素)
- AB
  选中既是A又是B的元素，注意A和B之间没有空格(同时拥有AB的元素)
- A > B
  选中A 的直接子元素B
- A + B
  选中A 的下一个相邻元素B
- A ~ B
  选中A 的后面全部相邻元素B

浮动元素有哪些特性？浮动带来的问题

特性：

１．一个浮动元素会向左或向右移动，直到其外边（outer edge）挨到包含块边沿或者另一个浮动元素的外边。如果存在行盒，浮动元素的外top（边）会与当前行盒的top（边）对齐如果没有足够的水平空间来浮动，它会向下移动，直到位置合适。
２．因为浮动元素不在普通流内，在浮动盒之前或者之后创建的未定位的（nonpositioned）块盒会竖直排列，就像浮动不存在一样。然而，浮动元素之后的行盒会进行必要的缩短，为了给浮动元素的margin box让出空间。

原理：

１．float 属性能让一个元素放在其容器的左侧或右侧，允许文本和内联元素环绕它。
２．设置浮动的元素从网页的普通流(normal flow)中脱离，但不是完全脱离。

影响：

１．块盒看不到浮动，但是文本能看到。
２．浮动的块级元素会收缩，行内元素可以设置宽度、高度、内外边距。
３．对后续元素位置产生影响。
４．父容器无法包裹子元素。
－　饥人谷

你知道的伪类有哪些？说明它们的用法

:first-child:选择第一个子类
:last-child:选择最后一个子类
:nth-child(n):选择第n个子类
:first-of-type:选择不重复标签的第一个子类
:last-of-type:选择不重复标签的最后一个子类
:nth-of-type(n):选择不重复标签的第n个子类
：link:选中未访问的链接
:hover:选中鼠标放置上的链接
:active:选中鼠标按下未松开的链接
:visited:选中访问过的链接
书写为顺序为:link→:visited→:hover→:active，否则可能出现显示不正确的错误
:checked:选中被勾选的表单元素
:disabled:选中被禁用的表单元素
:focus:选中被激活的表单元素
:root:选中根节点
:target:选中页面上id为当前hash的元素
:not(xx):选中不为xx的元素

块级盒子有哪些特征？

盒子会在水平方向上扩展并占据父容器在该方向上的所有可用空间
每个盒子都会换到新行
width和height 属性有效内边距（padding） , 外边距（margin）和边框（border）会将其他元素从当前盒子周围推开
可通过display 属性改变显示类型
常见块级元素
饥人谷

id与class有什么区别

Id表示独一无二的“身份”，一个元素只能有一个id，不同元素不能有相同的id
Class表示“特征”，一个元素有多个class，不同元素可以由相同class，多个class用空格分割。

Doctype作用? 怪异模式和标准模式分别是什么？

doctype的作用是告诉浏览器以标准模式来解析页面。
标准模式是指，浏览器按W3C标准解析页面。
怪异模式则是浏览器使用自己的方式解析页面。

如何清除浮动

clear:left; 要求该盒的top border边位于源文档中在此之前的元素形成的所有左浮动盒的底边下方
clear:right; 要求该盒的top border边位于源文档中在此之前的元素形成的所有右浮动盒的底边下方
clear:both; 要求该盒的top border边位于源文档中在此之前的元素形成的所有左、右浮动盒的底边下方

饥人谷

你了解哪些meta类型

1.charest 设置页面的解析类型
2.http-equiv 告诉浏览器使用标准解析页面
3.keywords 告诉搜索引起页面与什么相关
4.viewport 告诉浏览器这个页面需要适配移动端

使用grid布局实现经典两栏布局

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="wrapper">
    <header>header</header>
    <main>main



    </main>
    <aside>aside</aside>
    <footer> footer</footer>

  </div>
  <style>
    * {
      height: 100%;
    }

    .wrapper {
      display: grid;
      min-height: 100%;
      align-items: center;
      /* justify-items: center; */
      grid-template: auto 1fr auto /200px 1fr;
    }

    header {
      grid-area: 1/1/2/3;
      background-color: red;
    }


    main {
      grid-area: 2/2/4/3;
      background-color: pink;
      align-items: center;
      justify-items: center;
    }

    aside {
      grid-area: 2/1/4/2;
      background-color: yellow;
    }

    footer {
      grid-area: 3/1/4/3;
      background-color: green;


    }
  </style>
</body>

</html>

题目来自饥人谷

div内部图片底部出现缝隙原因是什么？有什么解决方案

原因：
图片的基线就是图片的下边缘，默认情况下图片的基线和父亲的基线对齐。
而父亲的基线就是父亲内文字（假设有一个字母g）的基线，
文字的基线和底线之间是一段距离的。
解决：
可以给div > img 设置 vertical-align: bottom
可以给div > img 的vertical-align设置top、middle、bottom
给div的font-size设置为0。
给div的line-height设置为0。

饥人谷

使用flex布局实现经典三栏布局

main aside aside
footer header { background: red; } footer { background: yellow; } .content { display: flex; } main { flex: 1; order: 2; background: blue; } .aside1 { order: 1; width: 100px; background: green; } .aside2 { order: 3; width: 100px; background: orange; }  ```
- 题目来自饥人谷

HTML5有哪些新特性

新增⼀些语义化标签，
性能的提升，
新的通信机制，
离线存储的⽀持，
2D、3D绘图，
硬件设备的⽀持，
多媒体的⽀持，
更丰富的效果。

输入表单有哪些常见属性，列出5种以上

action,target,method,name,required,tabindex,value,autofocus,disabled,autocomplete,novalidate

盒模型分为哪些类型？有什么区别？

Content: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
Padding: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置
Border: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

题目来自饥人谷

使用flex布局实现三列等分效果

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .content{
        display: flex;
        height:50px;
    }
    main{
        flex: 1;
        background: gray;
    }
    .aside1{
        background: yellow;
        flex:1;
    }
    .aside2{
        background: green;
        flex:1;
    }
</style>
<body>
  <div class="content">
    <aside class="aside1">aside1</aside>
    <main>main</main> 
    <aside class="aside2">aside2</aside>
  </div>
    
</body>
</html> ```
- 饥人谷

聊一聊页面乱码是如何产生的

文件在保存的时候会有一种编码方式，当浏览器被页面解析的时候浏览器会用一定的方式区作解析，正常情况下编码方式和解码方式是一样的，但如果因为我们没有在html中设置解码方式，浏览器在解码时会随机选择一种解码方式去解码，吃时容易产生乱码。

<meta http-equiv="X-UA-Compatible" content="IE=Edge" >

告诉浏览器使用ie最新版本的标准

列举10种以上的输入表单类型

text,date,email,number,range,search,tel,url,password,radio,checkbox,select,file,submit,hidden

行级盒子有哪些特征？

盒子不会产生换行
width和height属性将不起作用
内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
可通过display 属性改变显示类型

题目来自饥人谷

什么是BFC？如何形成BFC？BFC有什么使用场景

BFC指的是:

由多个子项参与构建的、遵循一定规则的、独立的环境；
2子项可能创建新的上下文，与外层上下文有同样的规则；
新上下文中的子项与外层上下文的子项隔绝.

BFC形成条件:

根元素<html>
float属性不为none；
position为absolute、 fixed、 sticky
display为 inline-block、 table-cell
display: flow-root(当作根元素创建,副作用相对小,但是兼容性差) 或者 flow-root list-item
overflow为hidden、 scroll、 auto(副作用相对小)；

BFC应用

阻止块级元素与浮动元素的覆盖
清除浮动

题目来自饥人谷

聊一聊HTML语义化

便于开发者阅读、便于搜索引擎理解、便于读屏器阅读

给元素添加clear: left的确切含义是什么

要求该盒的top border边位于源文档中在此之前的元素形成的所有左浮动盒的底边下方。

题目来自饥人谷

使用flex布局实现垂直水平居中效果

child
.father { display: flex; justify-content: center; align-items: center; width: 500px; height: 500px; background: #0; } .child { background: #fff; } <title>Document</title>
child
.father { display: flex; width: 500px; height: 500px; border: 2px solid black; } .child { margin: auto; background: red; } ``` 
- 题目来自饥人谷

属性的值inherit、initial、unset分别有什么作用

Inherit 使用父级样式
Initial 使用该属性的initial value（该元素的默认值）
Unset 如果时继承属性就继承父级，如果不是就initialvalue

link方式和@import方式引入css有什么区别？推荐哪种方式？

Link是html的标签，在页面上代表一份元素，可以被js选中修改；@import是css的语法，js无法操控
两个link标签，文件会并行加载，一个link的css里包含一个@import，文件的串行加载，@import是串行加载。
推荐使用link方式可以并行加载，加载速度更快

get和post类型有什么区别

提交的数据形式不一样，get提交的数据是name（key）等于value的形式，然后用and符号连接在一起拼接在url上，post请求url不变数据是直接提交给服务器。
数据大小不同，get构造的url的长度过长会被服务器截断，所以get提交的数据大小是有限制的，post提交的数据大小没有限制。
语义上的差别，get适用查询，post适用提交数据。
安全性上的差别，get是拼接成url，历史记录能够查询，分析日志可以得到数据，post请求看不到，post安全性高于get。

聊一聊外边距合并的场景

父子合并

如果在父元素与其第一个子元素之间不存在边框、内边距、行内内容，也没有创建块格式化上下文、或者清除浮动将两者的 margin-top 分开，父子外边距会折叠

空的块级元素

空的块级元素如果一个块级元素中不包含任何内容，并且在其margin-top 与margin-bottom 之间没有边框、内边距、行内内容、height、 min-height 将两者分开，则该元素的上下外边距会折叠

题目来自饥人谷

Web页面分为哪三层，分别是什么

分为结构层、表现层、行为层。
结构层就是html，代表页面的结构，表现层就是页面的样式就是css，行为层就是JavaScript可以对用户的行为作一些响应。

继承属性有哪些？

文本类型的：color、font-size、font-family、line-height

设置inline-block的元素有什么特性

有块级特性又有行内特性
设置width 和height 属性会生效。
padding, margin, 以及border 会推开其他元素
它不会跳转到新行
题目来自饥人谷

a标签的target属性有哪些值?分别说说这些值的作用

_blank新页面加载；
_self当前页面加载；
_parent 在当前页面框架的父级框架加载。如果父级框架不存在就在当前页面加载；
_top在当前页面得到最顶级框架加载，如果最顶级框架不存在就在当前页面加载。

如何让一个块级盒子居中

设置盒子的css属性：margin:0 auto;
题目来自饥人谷

什么是精灵图(雪碧图)?

CSS Sprites（精灵图、雪碧图）是指将多张图片（一般是小图标）合成一张大图，
不同元素共用这张大图作为背景图，并给这些的元素设置相应的background-position值，
在达到预期显示效果的同时，减少HTTP请求数的一种前端优化手法。
这是早期实现图标的方式，现在已被icon font和svg font取代。
题目来自饥人谷

如何使用浮动实现两栏和三栏布局？给出范例

三栏布局

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 <div class="aside1">侧边</div>
 <div class="aside">侧边</div>
 <div class="center">中间</div>
  <style>
    .aside 1{
      float:left;
      background:green;
      height:300px;
      width:100px;
    }
    .aside2{
     float:right;
     background:green;
     height:300px;
     width:100px; 
    }
    .center {
      margin-right:100px;
      margin-left:100px;
      background:blue;
      height:500px;
    }
  </style>
</body>
</html>

两栏布局

<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 <div class="aside">侧边</div>
 <div class="center">中间</div>
  <style>
    .aside {
      float:left;
      background:green;
      height:300px;
      width:100px;
    }
    .center {
      margin-left:100px;
      background:blue;
      height:500px;
    }
  </style>
</body>
</html>

题目来自饥人谷

盒模型有哪些属性

Content: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
Padding: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置
Border: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

题目来自饥人谷

你知道的伪元素有哪些？说明它们的用法

::before:在元素内插入一段内容，作为元素的第一个子类，必须有content属性，常用来代替图标、无实际意义的标签
::after:在元素内插入一段内容，作为元素的最后一个子类，和before一样必须有content属性
::first-letter:选中段落的第一个字符
::firsh-line:选中段落的第一行
::selection:匹配被鼠标选中的文字内容

sw503544488 / interview Goto Github PK

interview's People

Watchers

interview's Issues

如何解决？

第一种：

第二种：

第三种：

第四种：

特性：

原理：

影响：

父子合并

空的块级元素

Recommend Projects

Recommend Topics

Recommend Org