1、简述!DOCTYPE的作用？
决定浏览器渲染方式；
帮助浏览器正确地显示网页
文档类型声明（简称为 "DTD"），告诉浏览器这个文件的类型，让浏览器知道该用哪个规范来解析文档。
声明必须在HTML中的第一行，Doctype 是一条声明它不是一个HTML标签，只起到声明作用。
：用HTML5的doctype声明文件包含HTML5标记2、常见的浏览器及其内核有哪些？
有五大浏览器，分别是：
1、chrome 浏览器 --Google公司
特点 安全、高效、安全
2013年前使用苹果公司的webkit内核，13年后开始使用 webkit 的分支 Blink 内核
内核 webkit,Blink
2、Firefox 浏览器 --Mozilla公司
特点 非盈利、Gecko项目开源
内核 Gecko
3、safari 浏览器 --苹果公司
特点 移动端占有率高
内核 webkit
4、Opera 浏览器 --Opera Sftware ASA公司
特点 自主研发presto内核
使用自研的 Presto 内核 2016年被收购后改用 webkit 内核，后跟随谷歌改用 Blink 内核
内核 presto、webkit -> blink
5、 IE 浏览器 --Microsoft微软公司
特点 依托强大的Windows系统的市场占有率捆绑安装不可卸载
内核 trident
1）使用trident内核的IE，及一些国产浏览器
2）使用Gecko内核的Mozilla Firefox
3）使用blink内核的chrome、opera
4）使用webkit内核的Safari、chrome，及一些国产的双核浏览器3、常见的块级标签和行内标签分别有哪些？
块级标签
h1-h6、p、div、ul、ol、dl、li、dt、dd、br、hr
行内标签
span、i、em、b、strong、sub、sup、del4、b 和 strong （i 和 em ）标签的区别？
b 和 strong
默认情况下它们起的均是加粗字体的作用
二者所不同的是，标签是一个实体标签，用来呈现文字的粗体效果
而标签是一个语义标签，它的作用是加强字符的语义，用来表示重要文本，在文本中呈现粗体效果
i 和 em
默认情况下它们起的均是倾斜字体的作用
二者所不同的是，标签是一个实体标签，文本呈现为斜体，没有特殊语义
而标签是一个语义标签，它的作用是用来呈现被强调的文本，在文本中呈现斜体效果5、谈谈对语义化的理解？
即根据页面内容的结构，选择合适的标签，便于开发者阅读和写出更优雅的代码，便于浏览器、搜索引擎解析，有利于SEO，便于团队开发和维护。如：标题用h1~h6,段落使用p标签
语义化的好处：
1）在没有css的情况下，页面也能呈现出较好的内容结构；
2）语义化使代码更具有可读性，便于团队开发和维护；
3）语义化有利于用户体验
4）语义化有利于SEO搜索引擎优化6、如何合并表格单元格？
表格合并
跨行合并 rowspan
跨列合并 colspan7、thead、tbody、tfoot 有什么作用？
thead、tbody、tfoot标签结合起来使用，用来规定表格的各个部分（表头、主体、页脚）
标签默认不会影响表格布局8、常见表格元素有哪些？
标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
caption 元素定义表格标题。
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
标签定义 HTML 表格中的行。tr 元素包含一个或多个 th 或 td 元素。
td（标准单元格）|th（表头单元格）元素 定义表格内的表头单元格。
9、引入css的方式有几种?
引入的三种方式：
行内样式/内部样式/外部样式
行内样式
内容
内部样式
外部样式
10、单行文本水平垂直居中如何实现？
先设置高度
height:10px;
行高等于高度
line-height:10px;
文本居中
text-align:center;
11、选择器优先级如何计算？
一般来说选择器的权值越大，优先级越高
基本选择器的权值由小到大分别为：
通配符选择器（0）<标签选择器（1）
12、哪些CSS属性是可以继承的？
子标签可以继承父标签的样式
1）、字体系列属性
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
line-height：行高
2）、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
color：文本颜色
13、简述css盒模型？
盒模型又称框模型（Box Model）在页面布局中，将页面元素合理有效地组织在一起，形成一套完整的、行之有效的原则和规范。,包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。css盒模型的本质是一个盒子，封装周围的HTML元素
盒模型由：
元素的内容(content) + 内边距(padding) + 边框(border) + 外边距(margin)要素组成
元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；
元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。
14、如何使用border实现小三角?
三角形
.box1 {
width: 0;
height: 0;
border: 40px solid;
border-color: #f30 transparent;
border-bottom: 0;
/* 清除ie6下默认高度和最小高度问题 */
overflow: hidden;
font-size: 0;
line-height: 0;
}
空三角
.box2 {
width: 1em;
height: 1em;
border-right: 2px solid currentColor;
border-top: 2px solid currentColor;
transform: rotate(135deg);
}
15、margin外边距常见问题及处理方法？
（1）父子关系外边距塌陷问题——元素嵌套关系，子元素的margin值会叠加给父元素
现象：给子元素设置外间距，会和父元素的外间距合并，最终会表现其中较大的外间距的值
原因：父盒和子盒公用一个上外间距的区域
解决方法：
给父元素设置边框或内边距；
给父元素添加overflow:hidden属性，触发BFC，改变父元素的渲染规则
（2）兄弟关系的外边距叠加——元素并列关系，垂直方向上相邻的margin值相遇会出现叠加
现象：上一个盒子设置下外间距，下一个盒子设置上外间距，两个值相同时，取当前值，如果两个值不同，取较大值
原因：上、下两个兄弟关系的盒子共用一个外间距区域
解决方法：
给两个盒子都套一个父盒子，父盒添加overflow属性
--->改变父级的渲染规则有以下四种：
position: absolute/fixed;
display: inline-block;
float: left/right;
overflow: hidden;
16、CSS选择器有哪些？优先级算法如何计算？内联和important哪个优先级高？
基本选择器：通配符选择器、标签选择器、类选择器、id选择器
基本选择器权值：通配符选择器（0）、标签选择器（1）、class选择器（10）、id选择器（100）
复合选择器：群组选择器、后代选择器、父子选择器、交集选择器、伪类选择器
div,p div p div>p div.box1
复合选择器权值计算方式：组成复合选择器的所有单一选择器的权值累加
选择器的权值越大，优先级越高，选择器中的权值使用加法计算，如果权值相同后写的内容覆盖先写的内容
行间样式的优先级高于id选择器的优先级
继承样式的权值为0，子元素中设置的样式，会覆盖继承到的样式；
在样式中定义!important ，优先级高于行间样式
17、行内元素和块级元素的特性，具体区别是什么？行内元素有哪些？块级元素有哪些？
行内元素：宽度自适应；高度自适应；默认并列在一行显示；具有部分盒模型特征（默认没有宽高[css定义宽高时无效]，有横向间距margin-right、margin-left和留白padding-left、padding-right，没有纵向margin-top、margin-bottom和留白padding- top、padding-bottom，边框保留）；换行会被解析成空格
行内元素: a b strong em i del sup sub span
块级元素：宽度100%；高度自适应；默认独立成行；具有盒模型特征（默认可以设置盒子的宽、高、外间距、内填充、边框）
块级元素：div p h1 h2 h3 h4 h5 h6 form ul ol li dl dt dd
18、margin外间距常见问题及处理方法
（1）父子关系外边距塌陷问题——元素嵌套关系,子元素的margin值会叠加给父元素
解决方法：
给父元素设置边框或内填充；
给父元素添加overflow:hidden属性，触发BFC，改变父元素的渲染规则
（2）兄弟关系的外边距叠加——元素并列关系，垂直方向上相邻的margin值相遇会出现叠加
解决方法： 给两个盒子都套一个父盒子，父盒添加overflow属性
触发bfc，改变父级渲染规则的方法
19、浮动产生的问题，清浮动的方案？
元素浮动以后，脱离正常文档流，导致父元素高度塌陷，影响与父元素同级的后续元素的正常布局
1）为浮动元素的父级盒加固定的高度——不够灵活
2）为浮动元素的父级盒加浮动——会产生新的浮动问题
3）为浮动元素的父级盒设置overflow属性，属性值可以是hidden|scroll|auto——可能会导致内容显示不完全；代码简洁
4）在浮动元素之后，跟浮动元素呈并列关系的位置，加一个空div，在空div上添加一个属性clear: both;——代码冗余；通俗易懂、书写方便
5）推荐方法：
给浮动元素的父元素添加.clearfix，(不会在结构上产生冗余代码，可多次重复使用)
.clearfix{ *zoom: 1; } /*处理ie6,7兼容*/
.clearfix:after{ content: ""; display: block; clear: both; }
20、简述BFC规则，及解决的问题？
1）什么是BFC？
BFC(Block Formatting Context)是web页面的可视化CSS 视觉渲染的一部分，是页面中的一个独立的渲染区域。用于决定块盒子的布局及浮动元素与其他元素交互的一个区域，可以改变父级的渲染规则。
2）BFC规则：
内部的标签会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠
每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。
BFC的区域不会与float的标签区域重叠
计算BFC的高度时，浮动子标签也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签，反之亦然
3）BFC解决的问题
解决外边距折叠问题
自适应两栏或三栏布局
防止字体环绕
清除浮动
21、如何让盒子水平垂直居中
1）margin负间距
必须知道居中盒的宽度和高度；
为居中盒设置绝对定位；
距离定位父级左边框和上边框的距离设置为50%；
将元素分别左移和上移，移动元素宽度和高度的一半
2）margin: auto；实现绝对定位元素的居中
必须知道居中盒的宽度和高度；
为居中盒设置绝对定位；
分别设置left: 0; right: 0; top: 0; bottom: 0;
为居中盒设置margin: auto;
22、等高布局、圣杯布局、双飞翼布局的实现原理？
等高布局：
方法一：利用内外间距相抵消，注意为父元素设置“overflow: hidden;”
方法二：利用内容撑开父元素的特点，给每一列添加相对应的容器，进行相互嵌套，并在每个容器中设置背景色
方法三：利用边框模拟背景，实现等高列显示效果
圣杯布局：
圣杯布局和双飞翼布局都是为了实现左右两栏固定宽度，中间部分自适应的三栏布局，不过两者的实现原理有所不同。圣杯布局的实现思路：
1）HTML结构中，先主体内容后侧边栏
2）两侧固定宽度，中间内容宽度设置100%;
3）主体内容和左右侧边栏分别加浮动；
4）将左侧拉到最左边，将右侧拉到最右边；
5）将中间露出来；
6）分别为左侧边和右侧边设置position:relative; 然后还原左侧边和右侧边
双飞翼布局：
1）HTML结构中--先主体后侧边栏；
2）两侧固定宽度，中间宽度100%；
3）主体内容和左右侧边栏分别加浮动；
4）将左侧拉到最左边，将右侧拉到最右边；
5）在主体内容的子盒上设置margin值，将中间内容露出来
23、简述精灵图(css sprites)的原理及优缺点，如何使用
css sprites——精灵技术、雪碧技术，通常也称“css图像拼合”或“贴图定位”。将一堆小图整合到一张大图上，通过background-image、background-repeat属性显示图片，并且使用background-position属性实现图片的精确显示，减少服务器对图片的请求数量。
好处：
1）减少网页的http请求，从而大大的提高页面的性能
2）图片命名上的困扰
3）更换风格方便
缺点：
1）必须要限定容器大小符合背景图元素位置 ，需要计算
2）维护的时候比较麻烦—图片修改麻烦
步骤：
1）制作一张具有多个状态的拼合图片
2）给要显示背景的盒一个固定的尺寸，以背景方式加载让其局部显示
3）通过背景图定位控制不同的显示状态
24、你能想出几种方法让元素在页面中消失？
1）display: none; 元素的隐藏，将整个元素隐藏，不占用任何空间
2）visibility: hidden; 元素内容不可见，只隐藏内容，占位空间仍然保留
3）通过position属性设置元素位置，让其消失
4）overflow属性实现，将要隐藏元素移出父元素的范围
5）opacity属性，实现元素的不可见
25、css3新增了哪些选择器
属性选择器：
element[attr^=value]{ } 指定了属性名，并且属性值以value开头的element元素
element[attr$=value]{ } 指定了属性名，并且属性值以value结尾的element元素
element[attr*=value]{ } 指定了属性名，并且属性值中包含value的element元素
结构性伪类选择器
:root{ } 匹配根元素
element:first-child{ } 选择一组相同元素中的第一个元素
element:last-child{ } 选择一组相同元素中的最后一个元素
element:nth-child(n){ } 选择一组相同元素中的第n个元素
element:nth-last-child(n){ } 选择一组相同元素中的倒数第n个元素 element:nth-of-type(n){ } 一组元素中选择特定类型的元素
element:nth-last-of-type(n){ } 一组元素中选择特定类型的元素，但是需要从最后一个开始计算
状态伪类选择器
element:checked{ } 选择页面中处于选中状态的element元素
element:disabled{ } 选择页面中处于禁用状态的element元素
element:enabled{ } 选择页面中处于可用状态的element元素
26、如何处理HTML5新标签的浏览器兼容问题？
方案一：使用javascript新增元素的方法解决
document.createElement(“header”);
document.createElement(“footer”);
…
由于创建出来的元素是内联元素，所以需要转换成块级，宽度和高度才能生效。
header,footer{ display:block;}
方案二：使用封装好的插件html5shiv.js解决兼容性问题。
27、说说常见浏览器兼容问题
1）ie8中图片边框问题：
解决方案:img{ border:none; }
2) ie8中背景复合属性写法问题：
在标准浏览器中能正常显示背景图片，但在ie8中图片显示异常。
.bg{ background:url(“./images/bg.jpg”)no-repeat center; }
解决方案:
.bg{ background:url(“./images/bg.jpg”) no-repeat center; }
3) 在 IE6 及更早浏览器中定义小高度的容器问题？
解决方案：#test{ overflow:hidden; height:0px; font-size:0; line-height:0; }
4) IE6 及更早浏览器浮动时产生双倍边距的 BUG问题 ？
解决方案：针对 ie6 设置该标签的 display 属性为 inline 即可
#test{ float:left; _display:inline; }
5) IE7 下子标签相对定位时父标签 overflow 属性的 auto|hidden 失效的问题
解决方案：给父标签也设置相对定位 position:relative;
6)块转内联块 ie7- 不在一行显示问题
解决方案：div { display:inline-block; *display:inline; *zoom:1; }
7) IE7 及更早浏览器下当 li 中出现 2 个或以上的浮动时，li之间产生的空白间隙
解决方案：给加vertical-align:middle/top/bottom
li{ vertical-align:top; }
28、HTML5中新增的表单元素和表单属性有哪些？
新增表单标签--input类型
1）url类型：包含访问协议的URL地址的输入域
2）email类型：包含e-mail地址的输入域
3）search类型：用于检索关键字的输入域
4）tel类型：用于输入电话号码的输入域
5）number类型：用于包含数值的输入域
6）range类型：生成一个数字滑动条
7）color类型：生成一个颜色选择器
8）date类型：日期选择器
9）datetime类型：输入日期时间
10）datetime-local类型：日期和时间选择器
11）month类型：月选择器
12）time类型：时间选择器
13）week类型：周选择器
14）datalist类型：选项列表，与input元素配合使用
新增表单属性：
1）min、max、step属性：输入域中所允许的最小值、最大值、步长
2）placeholder属性：为输入域设置提示信息
3）list属性：通过input元素和datalist元素实现可选的下拉列表
4）autocomplete属性：是否启用自动完成功能
5）autofocus属性：自动获取焦点
6）form属性：定义表单元素所属的表单区域
7）required属性：提交表单时，表单元素不能为空
8）pattern属性：对用户输入内容做验证
9）multiple属性：选择多个值
29、简述rem布局原理
rem是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。 比如说html的font-size大小为100px，一个div的width为1rem，则div的width大小为100px。
rem布局实现步骤
1）设置页面的viewport
2）动态计算并设置html的fontsize值
3）按照pc端布局方式正常布局，把px单位换算成rem
30、什么是less?less有什么好处？
拥有一套自定义的语法和一个解析器，将程序员编写的样式规则，通过解析器编译成对应的css文件，才能被浏览器识别。
好处：
结构清晰，结构清晰，便于扩展，可以屏蔽浏览器中私有语法的差异，可以实现多重继承，完全兼容css代码，可以方便地应用到老项目中。
31、常见的移动端布局解决方案有哪些？原理如何？
1）流式布局
垂直方向高度固定，水平方向使用百分比实现，并且使用弹性布局、浮动、定位等技术综合使用创建可扩展的流式布局
优先：可以很好解决自适应需求
缺点：实际效果可能会不协调，设计存在局限性
2）rem布局
rem——相对于根元素的font-size属性值的单位，css3新增单位
未经调整的浏览器的默认字号为16像素，1rem = 16px
rem布局的实现：
设置页面的viewport；
动态计算并设置html的font-size值;
按照PC端布局方式正常布局，将px单位换算成rem单位
3）vw适配
vw——viewport's width css3规范中视口单位
vh——viewport's height
vw和vh都是将屏幕分成100份，1vw等于屏幕宽度的1%
4）flexible.js
将设备划分成10份，确定好html标签的font-size属性值。假设有750px的设计稿，则html{ font-size: 75px; }，页面中元素的rem值 = 元素的px值/75
5）响应式布局
一站适配所有终端。通过媒体查询检测不同的设备屏幕尺寸，适当调整标签显示布局，在每种设备屏幕宽度下呈现出不同的页面效果
6）grid网格布局
将页面划分成相应的表格进行布局
32、如何解释这句话呢？
viewport 虚拟窗口
width 虚拟窗口的宽度
device-width设备宽度
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户手动缩放窗口
自定义虚拟窗口，指定虚拟窗口的宽度为设备宽，初始缩放比为1倍，最大缩放比1倍，最小缩放比1倍，同时不允许用户手动缩放
相关推荐
- JavaScript中常用数据类型，你知道几个?
-
本文首发自「慕课网」，想了解更多IT干货内容，程序员圈内热闻，欢迎关注！作者|慕课网精英讲师Lison这篇文章我们了解一下JavaScript中现有的八个数据类型，当然这并不是JavaScr...
- 踩坑:前端的z-index 之bug一二（zh1es前端）
-
IE6下浮动元素bug给IE6下的一个div设置元素样式,无论z-index设置多高都不起作用。这种情况发生的条件有三个：1.父标签position属性为relative;2.问题标签无posi...
- 两栏布局、左边定宽200px、右边自适应如何实现?
-
一、两栏布局（左定宽，右自动）1.float+margin即固定宽度元素设置float属性为left,自适应元素设置margin属性，margin-left应>=定宽元素宽度。举例：HTM...
- 前端代码需要这样优化才是一个标准的网站
-
网站由前端和后端组成，前端呈现给用户。本文将告诉您前端页面代码的优化，当然仍然是基于seo优化的。 就前端而言，如果做伪静态处理，基本上是普通的html代码，正常情况下，这些页面内容是通过页面模...
- 网页设计如何自学（初学网页设计）
-
1在Dreamweaver中搭建不同的页面，需要掌握HTML的语句了，通过调整各项数值就可以制作出排版漂亮的页面，跟着就可以学习一些可视化设计软件。下面介绍网页设计如何自学，希望可以帮助到各位。Dre...
- 1、数值类型（数值类型有）
-
1.1数据类型概览MySQL的数据类型可划分为三大类别：数值类型：旨在存储数字（涵盖整型、浮点型、DECIMAL等）。字符串类型：主要用于存储文本（诸如CHAR、VARCHAR之类）。日期/...
- 网页设计的布局属性（网页设计的布局属性是什么）
-
布局属性是网站设计中必不可少的一个重要的环节，主要用来设置网页的元素的布局，主要有以下属性。1、float：该属性设置元素的浮动方式，可以取none，left和right等3个值，分别表示不浮动，浮在...
- Grid网格布局一种更灵活、更强大的二维布局模型!
-
当涉及到网页布局时，display:flex;和display:grid;是两个常用的CSS属性，它们都允许创建不同类型的布局，但有着不同的用法和适用场景。使用flex布局的痛点当我们使...
- React 项目实践——创建一个聊天机器人
-
作者：FredrikStrandOseberg转发链接：https://www.freecodecamp.org/news/how-to-build-a-chatbot-with-react/前言...
- 有趣的 CSS 数学函数（css公式）
-
前言之前一直在玩three.js，接触了很多数学函数，用它们创造过很多特效。于是我思考：能否在CSS中也用上这些数学函数，但发现CSS目前还没有，据说以后的新规范会纳入，估计也要等很久。然...
- web开发之-前端css(5)（css前端设计）
-
显示控制一个元素的显示方式，我们可以使用display:block;display:inline-block;display:none;其中布局相关的还有两个很重要的属性:display:flex;和...
- 2024最新升级–前端内功修炼 5大主流布局系统进阶(分享)
-
获课：keyouit.xyz/14642/1.前端布局的重要性及发展历程前端布局是网页设计和开发的核心技能之一，它决定了页面元素如何组织和呈现。从早期的静态布局到现代的响应式布局，前端布局技术经历了...
- 教你轻松制作自动换行的CSS布局，轻松应对不同设备!
-
在网页设计中，自动换行的CSS布局是非常常见的需求，特别是在响应式设计中。它可以让网页内容自动适应不同屏幕尺寸，保证用户在不同设备上都能够获得良好的浏览体验。本文将介绍几种制作自动换行的CSS布局的方...
- 晨光微语!一道 CSS 面试题，伴你静享知识治愈时光
-
当第一缕阳光温柔地爬上窗台，窗外的鸟鸣声清脆悦耳，空气中弥漫着清新的气息。在这宁静美好的清晨与上午时光，泡一杯热气腾腾的咖啡，找一个舒适的角落坐下。前端的小伙伴们，先把工作的疲惫和面试的焦虑放在一边，...
- 2023 年的响应式设计指南（什么是响应式设计优缺点）
-
大家好，我是Echa。如今，当大家考虑构建流畅的布局时，没有再写固定宽度和高度数值了。相反，小编今天构建的布局需要适用于几乎任何尺寸的设备。是不是不可思议，小编仍然看到网站遵循自适应设计模式，其中它有...
- 一周热门
-
- 最近发表
-
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)