1.每个HTML文件里面都有一个很重要的东西,Doctype,知道这是干什么的么?
1、Doctype描述了html文档的类型,对不同的Doctype类型,浏览器会使用不同的方法来解析
2、该标签告知浏览器文档所使用的HTML规范。告诉浏览器按照何种规范解析页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>关注江湖二哥</title>
</head>
<body>
</body>
</html>
2.简述一下你对HTML语义化的理解?
1)为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构
2)有利于SEO:利于被搜索引擎收录,更便于搜索引擎的爬虫程序来识别
3)方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页
4)便于项目的开发及维护,使HTML代码更具有可读性
3.href与src的区别
1、href:Hypertext Reference的缩写,超文本引用,它指向一些网络资源,建立和当前元素或者说是本文档的链接关系。在加载它的时候,不会停止对当前文档的处理,浏览器会继续往下走。常用在a、link等标签。
2、src:source的所写,表示的是对资源的引用,它指向的内容会嵌入到当前标签所在的位置。由于src的内容是页面必不可少的一部分,因此浏览器在解析src时会停下来对后续文档的处理,直到src的内容加载完毕。常用在script、img、iframe标签中,我们建议js文件放在HTML文档的最后面。如果js文件放在了head标签中,可以使用window.onload实现js的最后加载。
总结:href用于建立当前页面与引用资源之间的关系(链接),而src则会替换当前标签。遇到href,页面会并行加载后续内容;而src则不同,浏览器需要加载完毕src的内容才会继续往下走。
4.页面导入样式时,使用link和@import有什么区别?
1、从属关系区别
@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。
2、加载顺序区别
加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。
3、兼容性区别
@import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。
4、DOM可控性区别
可以通过 JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式。
5.CSS选择器优先级
!important > 内联样式 > ID选择器 > 类选择器(属性选择器、伪类选择器)> 元素选择器(伪元素选择器)> 通配符选择器
6.标准盒模型和IE盒子模型的区别?
首先盒子模型包含四部分内容: margin、border、padding、content
1、W3C标准盒子(content-box):
在这种盒模型下,我们所说的元素的width ,只包含 content
即盒子总宽度 = width+padding+ border+margin
2、IE盒子(border-box):
又称怪异盒模型(边框盒子),是指块元素box-sizing属性为border-box的盒模型。
在这种盒模型下,我们所说的元素的width ,包含了 content + padding + border
所以盒子总宽度=width+ margin
7.CSS margin重叠问题
块级元素的上外边距( margin-top )与下外边距( margin-bottom )有时会合并为单个外边距,
这样的现象称为 “margin 合并” 。
margin 合并的2 种场景:
1、相邻兄弟元素 margin 合并。
解决办法:
• 设置块状格式化上下文元素( float/position:absolute等 ),或设置其中一个元素的margin
2、父级和第一个 / 最后一个子元素的 margin 合并。
解决办法:
对于 margin-top 合并,可以进行如下操作(满足一个条件即可):
• 父元素设置为块状格式化上下文元素(float/position:absolute等);
• 父元素设置 border-top 值;
• 父元素设置 padding-top 值;
8.网页布局有哪几种,有什么区别
静态、自适应、流式、响应式四种网页布局;
静态布局:意思就是不管浏览器尺寸具体是多少,网页布局就按照当时写代码的布局来布置;
自适应布局:就是说你看到的页面,里面元素的位置会变化而大小不会变化;
流式布局:你看到的页面,元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
响应式布局:每个屏幕分辨率下面会有一个布局样式,同时位置会变而且大小也会变。
9.position属性和值的含义
position 属性规定元素的定位类型。
值 | 描述 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
absolute | 生成绝对定位的元素,距离最近已经定位的父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed | 生成固定定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
sticky(了解) | 粘性定位(而sticky相当于加了一个滚动事件的处理,当页面滚动到相对应的元素上,就会变成固定定位的效果。当滚动到父元素不在可视区域范围内时,定位效果就会消失。) |
static | 默认值。没有定位,元素出现在正常的流中 |
10.display:inline-block为什么显示间隙,如何删除间隙?
- 将子元素放置在同一行
- 为父元素中设置font-size: 0,在子元素上重置正确的font-size
- 为inline-block元素添加样式float:left
- 设置子元素margin值为负数
11.你对BFC的理解?
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域。
创建BFC
- html根元素
- 设置浮动,float的值是left或者right
- 设置定位
-
- position不是static或者relative
- 是absoulte或者fixed
- display的值是inline-block,table-cell(表格单元格)
- 设置overflow
-
- overflow的值不是visible
- 是hidden,auto,scroll
- 弹性布局,flex
利用BFC解决问题
- 解决外边距的塌陷问题(垂直塌陷)
- 利用BFC解决包含塌陷
- 清除浮动产生的影响
- BFC可以阻止标准流元素被浮动元素覆盖