1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素?
行内元素：和有他元素都在一行上，高度、行高及外边距和内边距都不可改变，文字图片的宽度不可改变，只能容纳文本或者其他行内元素；其中img是行元素
块级元素：总是在新行上开始，高度、行高及外边距和内边距都可控制，可以容纳内敛元素和其他元素；
行元素转换为块级元素方式：display：block；
.描述块级元素与行内元素的区别？写出五个块级元素及五个行内元素？img是块级元素还是行内元素？怎么指定元素以块级元素展示？
a 区别
内元素会在一条直线上排列，水平方向排列；块级元素各占据一行，垂直方向排列
块级元素可以包含行内元素和块级元素，行内元素不能包含块级元素，只能包含文字或其它行内元素
行内元素设置width，height无效，margin上下无效，padding上下无效
b 列举
行内元素： span，a, em, strong, i， input, select
块级元素：div,ul,ol, li, h1-h6,p
c img和input属于行内替换元素，height/width/padding/margin均可用。效果等于块元素
d display:block;
2.将多个元素设置为同一行?清除浮动有几种方式?
将多个元素设置为同一行：float，inline-block
清除浮动的方式：方法一：添加新的元素 、应用 clear：both；
方法二：父级div定义 overflow: hidden；
方法三：利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。
.clear{zoom:1;}
.clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
3.怪异盒模型box-sizing？弹性盒模型|盒布局?
在标准模式下的盒模型：盒子总宽度/高度=width/height+padding+border+margin
在怪异模式下的盒模型下，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
box-sizing有两个值一个是content-box，另一个是border-box。
当设置为box-sizing:content-box时，将采用标准模式解析计算；
当设置为box-sizing:border-box时，将采用怪异模式解析计算。
Ps:什么叫css盒模型？有几种盒模型？margin与padding的区别？
css盒模型是css技术的一种思维模式。每个盒模型有内容（content），填充（padding），边框（border），外边距（margin）组成
css盒模型有两种，IE盒模型和w3c标准盒模型，其中IE模型的width=content+padding+border，而标准盒模型width=content
margin是自身容器边框到另一个容器容器边框的距离，就是容器的外边距
padding是自身容器边框到自身内容之间的距离，是为内边距
5.href和src区别? title和alt
href (Hypertext Reference)指定网络资源的位置（超文本引用），从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系，在 link和a 等元素上使用。
src (Source)属性仅仅嵌入当前资源到当前文档元素定义的位置，是页面必不可少的一部分，是引入。在 img、script、iframe 等元素上使用。
title：既是html标签，又是html属性，title作为属性时，用来为元素提供额外说明信息.
alt：alt是html标签的属性，alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息.
6.页面导入样式，使用link与@import有什么区别？
a、从属关系：link是html标签，@import是css提供的
b、加载差异：页面加载时，link会同事加载；而@import引入的css会在页面加载完成后加载
c、兼容性： link没有兼容问题，@import不兼容ie5一下的浏览器
d、link可以通过js操作dom插入link标签改变样式，而@import不能
7.H5有哪些新特性？
a 语义化标签： header,footer,section,nav,aside,article
b 增强型表单：input新增多个实用type
c 新增表单元素： datalist，keygen, output
d 新增表单属性：placehoder,require,min,max
e 音频，视频： video,audio
8.cookie，localStorage,sessionStorage的区别
| 特性 | cookie | localStorage | sessionStorage |
| 存储大小 | 4k | 5M | 5M |
| 数据有效期 | cookie在设置的有效期内保存，超过有效期自动清理 | 缓存数据永久有效，可手动清除 | 当前会话有效，关闭页面或浏览器会自动清除 |
| 与服务器通讯 | cookie会参与服务器的通信，每次都会携带在http的头部信息中 | 不参与通信 | 不参与通信 |
| 作用域区别 | 不同浏览器不能共享localStorage，sessionStorage中的数据 | 相同浏览器不同页面可以共享相同的localStorage(页面属于相同的域名及端口)，但是不同页面及标签间不能共享相同的sessionStorage |
9.css选择器有哪些？优先级？
a.通配符选择器（*）：用来选择所有元素，或者某个元素的所有子元素
b.元素选择器（E）：常见，最基本的选择器
c.id选择器（#ID）：id选择器只能选择页面中的唯一一个ID
d.class选择器（.class）:类选择器会选择页面中class名为指定名的所有标签，组成一个类数组
e.后代选择器（E F）：E为父元素，F为子元素
f.子元素选择器（E>F）：使用大于号 “>”指定
g.相邻选择器（E+F） : 选择一个指定元素的兄弟元素
h.选择器优先：！important > 内联 > ID选择器 > class选择器 > 标签选择器
10.Doctype作用？标准模式与兼容模式各有什么区别? 你知道多少种Doctype文档类型
a、告诉浏览器解析器以什么文档标准来解析文档，DOCtype不存在或者编写错误会以兼容模式来呈现
b、 标准模式下排版和js运行模式都以浏览器支持的最高标准运行
兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为已防止页面无法工作
c、常用的Docytpe有：html5、htm4.1 strict、html4.1 transitional、html4.1 frameset
11.说说你对语义化的理解
（1）一个语义元素能够清楚的描述其意义给浏览器和开发者，即使在去掉或丢失样式的时候，也能够让页面呈现出清晰的结构；
（2）有利于SEO优化，让页面和搜索引擎建立良好的沟通，爬虫依赖于标签来确定上下文和各个关键词的权重，有助于爬虫抓取更多的有效信息；
（3）方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备等），并以具有意义的方式来渲染网页；
（4）便于团队开发和维护，语义化更具有可读性，遵循W3C标准的团队都遵循语义化标准，可以减少差异化；
12.html与xhtml的区别？
xhtml必须被正确地嵌套
xhmtl便签必须小写
xhtml空标签也必须被关闭
xhtml文档必须有根元素<html></html>
13.css3新增伪类选择器
a、E:not(ele) 除了ele以外的都选中，常用于除最后一个li外就下边框 ---ul li:not(:last-of-type)
b、E:root 获取根元素---:root {background:red}
c、E:first-child 第一个子元素;E: last-child 最后一个子元素; E:only-child 判断是否是独生子，如果是就选中
d、E:nth-child(n) 选中第n个元素，n从1开始；n也可以是表达式，如2n+1;可以配合odd（奇数），even（偶数）使用
e、E:nth-last-child(n),与E:nth-child(n)用法一样，但是是从末尾开始计数的，就是倒数 ;
f、以上cde所述选择器都会受到其它元素的影响，例如父元素的第n个元素不是指定元素，就选不了了
g、E:first-of-type在父元素下查找第一个E；E:last-of-type在父元素下查找最后一个E；E:only-of-type判断是否是独生子，如果是就选中；
h、E:nth-of-type(n) 与nth-child(n)一样，不过不会受到其它元素影响
i、E:nth-of-last-type 与E:nth-of-type(n)相反，是倒数计数
j、以上ghi所述选择都不会受到其它元素影响
k、E:empty 选中一个空元素，里面什么都没有，包括空格
l、E:checked 匹配被选中的表单，radio或者CheckBox
m、E:enabled,E:disabled 匹配input的正常状态和不可操作状态
14. div+css布局的好处
- 代码精简，且结构与样式分离，易于维护
- 代码量减少了，减少了大量的带宽，页面加载的也更快，提升了用户体检
- 对seo搜索引擎更加友好，且H5又新增了许多语义化标签更是如此
- 允许更多炫酷的页面效果，丰富了页面
- 符合W3C标准，保证网站不会因为网络应用的升级而淘汰
15. 盒模型及如何转换
- box-sizing: content-box （W3C盒模型，又名标准盒模型）： 元素的宽高大小表现为内容的大小
- box-sizing: border-box（IE盒模型，又名怪异盒模型）：元素的宽高表现为内容 + 内边距 + 边框的大小
16.flex的兼容性怎么样？？
- IE9（包括IE9）以下不支持，IE10~11部分支持，但是需要-ms-前缀
- 其他主流浏览器包括安卓iOS基本都支持了
17.请列举几种隐藏元素的方法
visibility:hidden，这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在；
opacity:0，是CSS3的属性，设置元素为完全透明，和 visibility 的效果类似，但是该属性修饰的元素可以使用 transition 和 animate 设置动画效果；
display:none，设置元素为不可见，不会占用文档的空间；
hidden属性，该属性是HTML5中新增的属性，效果和 display 相同；
18.请简述CSS的权重规则
行内样式 > ID > 属性选择器/class类/伪类选择器 > 元素名/伪对象选择器；
关系选择器将拆分为两个选择器再计算权重。
19.在CSS样式中使用px、em，各有什么优势，在表现上有什么区别？
px是相对长度单位，相对于显示器屏幕分辨率而言的；
em是相对长度单位，相对于当前对象内文本的字体尺寸；
px定义的字体，无法用浏览器字体放大功能；em的值并不是固定，会继承父级元素的字体大小，
20.CSS3有哪些新特性？
新增特性有：圆角（border-radius）、阴影（box-shadow）、对文字加特效（text-shadow）、线性渐变（gradient）、变形（transform）；
增加了更多的CSS选择器，媒体查询，多栏布局，多背景rgba，引入伪元素::selection。
21.解释一下浮动及其工作原理？
浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）；
浮动元素碰到包含它的边框或者浮动元素的边框停留。
22.什么是FOUC（无样式内容闪烁）？你如何来避免FOUC？
如果使用@import方式对CSS进行导入，会导致某些页面在windows下的IE出现一些奇怪的现象：
以无样式显示页面内容的瞬间闪烁，这种现象被称为文档样式短暂失效，简称FOUC
原理：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
23.:link、:visited、:hover、:active 的执行顺序是怎么样的？
:link > :visited > :hover > :active
24.经常遇到的浏览器兼容性有哪些？如何解决？
浏览器默认的 margin 和 padding 不同
IE6双边距bug
在IE6、IE7中元素高度超出自己设置高度，原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的
min-height 在IE6下不起作用
透明性IE用filter.Alpha(opcity=60)，而其他主浏览器用opacity:0.6
input边框问题，去掉input边框一般用 border:none 就可以了，由于IE6在解析input样式时的bug（优先级问题），在IE6下无效
25.有哪些方式可以对一个DOM设置它的CSS样式？
- 外部样式表，使用 <link>标签引入一个外部CSS样式
- 内部样式表，将CSS代码放在 <style> 标签内部
- 内联样式，将CSS样式直接定义在HTML元素内部
26.什么是外边距重叠？重叠的结果是什么？
外边距重叠就是margin-collapse；
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式称为折叠，并且因而所结合成的外边距称为折叠外边距；
折叠结果计算规则：
两个相邻的外边距都是正数时，折叠结果是他们两者之间较大的值；
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值；
两个外边距一正一负时，折叠结果是两者的相加的和
27.CSS属性content有什么作用？有什么应用？
css的content属性专门应用在 after/before 伪元素上，用于插入生成内容，可以配合自定义字体显示特殊符号。
115、重排和重绘
部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算。这被称为重排。注意这里至少会有一次重排-初始化页面布局。
由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新。这样的更新被称为重绘。
116、什么情况会触发重排和重绘
添加、删除、更新 DOM 节点
通过 display: none 隐藏一个 DOM 节点-触发重排和重绘
通过 visibility: hidden 隐藏一个 DOM 节点-只触发重绘，因为没有几何变化
移动或者给页面中的 DOM 节点添加动画
添加一个样式表，调整样式属性
用户行为，例如调整窗口大小，改变字号，或者滚动。
扫一扫
432
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
