ray-sh / interview Goto Github PK

0.0 2.0 0.0 0 B

interview's Issues

聊一聊选择器优先级

优先级判断的大规则： !important > 内联属性样式 > 设置的样式 > 浏览器默认样 > 继承的样式
对于同一级别的样式，比如都带有!important 则比较选择器权重
对于设置的样式，计算选择器权重。如果权重相同，位置靠下的覆盖位置靠上的。如果权重不同，权重高的覆盖权重低的。
权重的计算：内联千位；id百位；class、属性、伪类十位；标签、伪元素个位。> 、~、+、:not 不计入

盒模型有哪些属性

margin属性：外边距
padding属性: 内边距
border属性：边框
width属性：宽
height属性：高
题目来自饥人谷

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

<div class="father">
<div class="child">child</div>
</div>
<style>
.father {
display: flex;
/*声明我是flex容器,使用flex布局*/
align-items: center; /*我的孩子要垂直居中*/
justify-content: center; /*我里面的内容要水平居中*/
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
}
.child {
width: 50%;
padding: 10px;
background: #fff;
}
</style>

题目来自饥人谷

如何声明页面是HTML5页面?

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

浏览器根据doctype来决定如何渲染。
最开始，网页要为网景浏览器和IE浏览器做不同的适配，他们的代码和可能是不同的。
后来w3c标准出现，规范了html以及浏览器应该如何渲染，但是老的网站还在，为了兼容那些老的网站，浏览器在支持新的规范的同时还可以渲染老的网站，这样就要求浏览器里面有个开关，可以实时切换。

这个开关就是docktype

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

图片的基线就是图片的下边缘，默认情况下图片的基线和父亲的基线对齐。而父亲的基线就是父亲内文字（假设有一个字母g）的基线，文字的基线和底线之间是一段距离的，展现出来的缝隙就是这段距离。解决：一般情况下给图片设置vertical-align不为baseline的值都能解决，比如可以给图片设置 vertical-align: bottom可以解决缝隙问题；也可以给div设置line-height:0 或者给div设置 font-size: 0解决缝隙问题
题目来自饥人谷

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

一个浮动盒会向左或向右移动，直到其外边碰到包含块边沿或者另一个浮动元素的外边。如果存在行盒，浮动元素的上边沿会与当前行盒的上边沿对齐。如果没有足够的水平空间来放置浮动盒，它会向下移动到合适位置。

因为浮动盒不在普通流内，在浮动盒之前或者之后创建的普通流中的块盒无法感知浮动盒的存在。但浮动盒之后的行盒会感知浮动元素的存在，并围绕浮动盒。

浮动元素常见的副作用有两个，一是父元素感知不到浮动子元素的存在导致高度塌陷；另一个是浮动元素对其后行盒产生影响，进而影响到行盒所在的块盒的大小和布局

题目来自饥人谷

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

通用元素选择器，匹配页面任何元素（这也决定了我们很少使用）
#id id选择器，匹配特定id的元素
.class 类选择器，匹配class包括（不等于）特定类的元素
element 标签选择器
E,F 多元素选择器，用,分隔，同时选中E和F
E F 后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素，子元素向下递归）元素F
E>F 子元素选择器，用>分隔，匹配E元素的所有直接子元素
E+F 直接相邻选择器，匹配E元素之后的相邻的同级元素F
E~F 普通相邻选择器

HTML中引入CSS有哪几种方式?列举并给出范例

通过标签引用

通过CSS语法@import引入
@import test.css

内部样式

<style>
p {
  background: orange;
}
</stype>

内联样式

<p style="background: orange; font-size: 24px;"><p>

渐进增强和优雅降级分别是什么意思？

渐进增强
是针对低版本浏览器进行构建页面，保证最基本的功能，
然后再针对高级浏览器进行效果、交互等改进和追加功能
达到更好的用户体验

优雅降级
是一开始就针对高级浏览器构建完整的功能，然后再针对
低版本浏览器进行兼容做功能降级。

“题目来自饥人谷”

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

盒模型分为两种：
1.boder-box IE盒模型
2.content-box 标准盒模型。
他们之间的区别：
标准盒模型的宽度： content+padding+border
IE盒模型的宽度：content+border
width: 100%，在标准盒模型下当前元素的content的宽度等于父亲的content宽度。
width: 100%，在IE盒模型下当前元素的content+padding+border宽度等于父亲的content宽度
题目来自饥人谷

你会如何解决特定浏览器的样式问题？

可以用IE条件注释
只在IE9及以下能用，在其他浏览器看来就是普通的注释
范例
···

···

可以用CSS Hack
利用不同浏览器的Bug来达到识别浏览器的目的
范例
···
.box {
color: red;
_color: blue; /仅ie6能识别/
*color: pink; /ie67能识别/
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.clearfix {
zoom: 1; / 仅对ie67有效 */
}
.target {
display: inline-block;
*display: inline;
*zoom: 1;
}
···

“题目来自饥人谷”

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

text / password / checkbox / radio / hidden / button /
submit / reset / email / file / number / search / tel / date /
time / range / search / url

行级盒子有哪些特征？

1.设置宽高对它无效。
2.盒子间不会换行
3.可以通过display改变显示类型
4.margin，padding ，border会被应用，但是不会把其它处于inline状态的元素推开。
题目来自饥人谷

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

告诉浏览器使用IE 最新版本的 Standards

块级盒子有哪些特征？

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

列举你知道的全局属性

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

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

结构层，表现层，行为层

如何让一个块级盒子居中

给它设置margin:0 auto;
`
div {
margin: 0 auto;
}

`
题目来自饥人谷

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

_blank
新窗⼝加载

_self
在当前⻚⾯加载，默认属性

_parent
在当前⻚⾯框架的⽗级框架加载。如果⽗级不存在就在当前⻚⾯加载

_top
在当前⻚⾯框架的最顶级框架加载。如果最顶级框架不存在就在当前
⻚⾯加载

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

name / autofocus / checked / disabled / value / placeholder / required / tabindex

继承属性有哪些？

color
font-size
font-family
line-height
表示些文本格式的大部分为继承属性。

常见的行级标签有哪些？

<a>
<input>
<span>
<em>
<strong>
<label>
<img>
<code>
<button>
<texteare>
<select>

题目来自饥人谷

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

产生原因：
在html中，空格也代表一个字符，连续的空格也是只代表一个空格。
将元素设置成inline-block后，两个元素之间，我们相关的写代码的操作，比如回车，空格都将会保留下来。形成字符，所以造成了从视觉效果来看，inline-block间产生缝隙。

解决方法：
通过全局属性*，设置font-size：0；然后在给这两个inline-bolck元素的content设置适应的font-size，这样就可以避免了。
题目来自饥人谷

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

:first-child的作用是匹配某父元素的第一个子元素
:last-child的作用是匹配某父元素的最后一个子元素
:first-of-type的作用是匹配父元素下使用同种标签的第一个子元素
:last-of-type的作用是匹配父元素下使用同一种标签的最后一个子元素
:link的作用是选中未访问的链接
:hover的作用是选中鼠标放置上的链接
:active的作用是选中鼠标按下未松开时的链接
:visited的作用是选中访问过的链接
:checked选中被勾选的表单元素
:disabled选中被禁用的表单元素
:focus选中被激活的表单元素
:root选中根节点

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

1.对它设置宽高有效
2.对它设置margin，padding，border等属性，会向外把其它元素推开
3.inline-block元素具有inline元素的特征，可以并排在同一行。
题目来自饥人谷

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

页面的编码方式和浏览器的解码方式不同

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

方法一：

<body>
  <div class="wrapper">
    <header>header</header>
    <aside>aside</aside>
    <main>
      <p>首页</p>
      <p>优惠</p>
    </main>
    <footer>footer</footer>
  </div>

  <style>
    .wrapper {
      display: grid;
      grid: auto auto auto/1fr 200px;
    }
    .wrapper > header {
      background-color: red;
      grid-row: 1/2;
      grid-column: 1/3;
    }
    .wrapper > aside {
      background-color: pink;
      grid-row: 2/3;
      grid-column: 2/3;
    }
    .wrapper > main {
      background-color: green;
      grid-row: 2/3;
      grid-column: 1/2;
    }
    .wrapper > footer {
      background-color: blue;
      grid-row: 3/4;
      grid-column: 1/3;
    }
  </style>
</body>

方法二：

<body>
  <div class="wrapper">
    <header>header</header>
    <aside>aside</aside>
    <main>
      <p>首页</p>
      <p>学习</p>
    </main>
    <footer>footer</footer>
  </div>

  <style>
    .wrapper{
    display:grid;
    grid-template-columns:1fr 200px;
    grid-template-rows:auto auto auto;
  }
  header{
    background-color: green;
    grid-row-start:1;
    grid-row-end:2;
    grid-column-start:1;
    grid-column-end:3;
  }
  aside{
    background-color: pink;
    grid-row-start:2;
    grid-row-end:3;
    grid-column-start:2;
    grid-column-end:3;
  }
  main{
    background-color: red;
    grid-row-start:2;
    grid-row-end:3;
    grid-column-start:1;
    grid-column-end:2;
  }
  footer{
    background-color: blue;
    grid-row-start:3;
    grid-row-end:4;
    grid-column-start:1;
    grid-column-end:3;
  }
  </style>
</body>

问题来自饥人谷

如何优化网页的打印样式？

···
/* 打印的时候，页面文字是20px */
@media print {
body { font-size: 20px; }
}
/*屏幕展示的时候页面文字是16px */
@media screen {
body { font-size: 16px; }
}
···
题目来自饥人谷

聊一聊外边距合并的场景

相邻元素
相邻的两个块级元素之间的外边距会折叠

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

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

题目来自饥人谷

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

.wrapper {
  display: flex;
  flex-flow: row wrap;
  
  max-width: 800px;
  margin: 0 auto;
}

.wrapper > * {
  width: 100%;
}



header {
  background: pink;
}

main {
  order: 2;
  background: grey;
  flex: 1 0;
}

.aside-1 {
  order: 1;
  background: yellow;
  width: 100px;
}

.aside-2 {
  order: 3;
  background: blue;
  width: 100px;
}

footer {
  order: 4;
  background: green;
}

题目来自饥人谷

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

::before的作用是创建隐藏的标签
::first-line选中段落的第一行
::first-letter选中段落的第一个字符
::selection匹配被鼠标选中的文字内容

id与class有什么区别

ID是用来表示一个元素的唯一表示，不同元素的ID不能相同，
class可以理解为tag，用来标记一个元素，一个元素可以有多个class

什么是HTML5

它是一个新版本的HTML语言，具有新的元素，属性和行为，
它有更大的技术集，允许构建更多样化和更强大的网站和应用程序。这个集合有时称为HTML5和它的朋友们，不过大多数时候仅缩写为一个词 HTML5

语义：能够让你更恰当地描述你的内容是什么。
连通性：能够让你和服务器之间通过创新的新技术方法进行通信。
离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。
多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。
性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。
设备访问 Device Access：能够处理各种输入和输出设备。
样式设计: 让作者们来创作更加复杂的主题吧！

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

让浮动元素的上边缘位于之前所有左浮元素的下方

题目来自饥人谷

get和post类型有什么区别

1.Get 是通过url来发送数据，有长度限制，post没有
2.语意上的差别，get通常用来发送少量数据来获取数据，post表示提交大量数据到服务器
3.Get的访问会被保存到历史，不太安全

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

每个CSS属性都具有inherit、initial、unset这三个属性值，用来控制继承
inherit：当属性的值为inherit时，表示该属性继承父元素的样式。
initial：当是属性的值为initial时，表示该属性使用最初的规定样式的值。
unset：若是继承属性相当于inherit，非继承属性则相当于initial。相当于重置样式。

HTML5新增了哪些标签和表单类型

<section>, <article>, <nav>, <header>, <main>, <footer>,<aside>

 type=“color”, date, email, number, search, range, tel, time

聊一聊HTML语义化

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

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

两栏布局： http://js.jirengu.com/vefu/1/edit
三栏布局： http://js.jirengu.com/jawu/1/edit

题目来自饥人谷

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

BlockFormattingContext，块级元素参与构建的、遵循一定规则的独立环境；参与的子项可能会创建新的块级格式化上下文，与外层上下文有同样的规则；3.新上下文中的子项与外层上下文的子项隔绝。

形成条件：1. 根元素；2. float属性不为none；3. position为absolute、fixed、sticky; 4. display为inline-block、table-cell; 5. display:flow-root; 6. overflow为hidden、scroll、auto。

使用场景： 1. 阻止父子外边距合并； 2. 阻止块级元素与浮动元素的覆盖； 3. 清除浮动，撑开浮动元素父容器。

来自饥人谷

如何清除浮动

方法1

.clearfix::after {
content: '';
display: block;
clear: both;
}
方法2：

创建BFC

题目来自饥人谷

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

<link>是HTML的标签，在页面上代表一个元素，可以被JS选中修改；
@import是CSS的语法，JS无法操控

两个link标签，文件会并行加载。一个link的CSS里包含一个@import，
文件串行加载会更慢。因此不推荐用@import

什么是精灵图(雪碧图)

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

题目来自饥人谷

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


<div class="father">
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
</div>
<style>
.father {
display: flex; /*使用flex布局*/
box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.3);
}
.child {
flex: 1;
/*子项在容器内1:1:1宽度伸展*/
border: 1px solid #ccc;
}
</style>

题目来自饥人谷

你了解哪些meta类型

charset, name, content

如何给你的团队制定编码规范？

HTML
小写
两个空格代替tab
属性用双引号
自闭合标签不要斜线
加
加lang、charset
引入CSS、JavaScript省略type
布尔类型属性不要赋值

CSS
另个空格代替tab
注意空格和换行
数值省略小数点前的0
十六进制小写尽量缩写
顺序：P B T V M
不用@import

“题目来自饥人谷”

HTML5有哪些新特性

新增一些语义化标签,如 header footer main section figure aside nav 等，拥有更丰富的表单类型
性能的提示,比如 Web Workers，对XMLHttpRequest升级，优化JavaScript引擎
新的通信机制,比如WebSock、服务端推送事件、WebRTC
离线存储的支持,比如localStorage、indexdb、离线缓存
2D、3D绘图,比如Canvas、SVG、WebGL
硬件设备的支持,比如调用摄像头、定位、检测设备方向
多媒体的支持,比如音频、视频、CameraAPI、WebRTC
更丰富的效果,比如阴影、边框、过渡、动画、3D等

常见的块级标签有哪些？

<h1>...<h6>、<p>、<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、
<header>、<main>、<footer>、<aside>、<nav>、<section>、<table>、<pre>

“题目来自饥人谷”

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

层叠上下文(stacking contexts, 又叫堆叠上下文、堆栈上下文)是一个多方参与构建的、遵循一定层叠规则的、独立的环境。对于属于同一个层叠上下文的定位元素来说，在当前层叠上下文内的层叠顺序由z-index 决定。对于属于不同层叠上下文的定位元素，其位置由其在当前层叠上下文内的层叠顺序以及其所属的层叠上下文对应的元素的层叠顺序共同决定。

以下方法都能创建层叠上下文：

根元素
position值为 absolute|relative，且 z-index值不为 auto
position 值为 fixed|sticky
z-index 值不为 auto 的flex子项和grid子项
opacity 属性值小于 1 的元素
transform、filter、 perspective不为none 的元素
当计算元素本身的层叠顺序时，先确定元素所属的层叠上下文元素（最近的创建层叠上下文的父级元素）在其所属的层叠上下文中的层叠顺序，在确定元素本身当前层叠上下文内的顺序。

在同一个层叠上下文内，其层叠规则如下：

形成堆叠上下文环境的元素的背景与边框；
拥有负 z-index 的子堆叠上下文元素（负的越高越堆叠层级越低）；
正常流式布局，非 inline-block，无 position 定位（static除外）的子元素；
无 position 定位（static除外）的 float 浮动元素；
正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）；
拥有 z-index:0 的子堆叠上下文元素
拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）
答案来自饥人谷

ray-sh / interview Goto Github PK

interview's Issues

Recommend Projects

Recommend Topics

Recommend Org