1、你对CSS中浮动的理解以及如何清除浮动？
float：left； 左浮动
float：right；右浮动
清除浮动:
01.父级div定义overflow:hidden
02.结尾处加空div标签clear:both
03.父级div定义height
04.父级div定义overflow:auto
05.父级div定义伪类:after和zoom
2、CSS引入的方式有哪些？Link和@import的区别是？
//Link引入
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />
//@import
<style type="text/css" media="screen">
@import url("CSS文件");
</style>
Link和@import的区别:
1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
3：link无兼容问题；@import低版本的浏览器不支持。
4：ink支持使用控制DOM去改变样式；而@import不支持。
3、CSS（cascading style sheets级联样式表）中的选择器是
在应用样式时用来选择元素的
4、如何使用ID值来应用一个CSS样式？
假设你一个ID为“mytext”的HTML段落标记，如下面的代码片段所示。
<p id="mytext">This is HTML interview questions.</p>
你可以使用有着“id”名称的“#”选择器创建一个样式，并应用CSS值到段落标记。为了应用样式到“mytext”元素，我们可以使用“#mytext”，如下面的CSS代码所示。
<style>#mytext{background-color:yellow;
}</style>
5、CSS中使用列布局是什么？
css3中的列布局：就是创建多个列来对文本进行布局，
column-count 属性规定元素应该被分隔的列数
column-width 列的宽度
columns：column-width column-count的简写
column-gap 属性规定列之间的间隔
column-rule （column-rule-color column-rule-width
column-rule-style）属性设置列之间的宽度、样式和颜色规则column-span 元素应该横跨的列数
6、你能解释一下CSS的盒子模型么？
CSS css盒子模型 包含了
元素内容（content）、内边距（padding）、
边框（border）、外边距（margin）
元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；
元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。
7、你能解释一些CSS3中的文本效果么？
阴影文本效果
.specialtext
{
text-shadow: 5px 5px 5px #FF0000;
}
文字包装效果
<style>
.breakword
{word-wrap:break-word;}
</style>
8、什么是Web Workers？为什么我们需要他们？
for (i = 0; i < 10000000000000; i++) { x = i + x; } }比方说上面的循环代码在HTML按钮点击以后执行，现在这个方法执行是同步的，换句话说这个浏览器必须等到循环完成才能操作 ,这个会进一步导致浏览器冻结并且没有相应，屏幕还会显示如下的异常信息.如果你能移动这些繁重的循环到Javascript文件中，采用异步的方式运行，这意味着浏览器不需要等到循环接触，我们可以有更敏感的浏览器，这就是web worker的作用
Web worker帮助我们用异步执行Javascript文件
9、Web Worker线程的限制是什么？
Web worker线程不能修改HTML元素，全局变量和Window.Location一类的窗口属性。你可以自由使用Javascript数据类型，XMLHttpRequest调用等。
10、display:none和visibility:hidden的区别是什么？
visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。
display: none----将元素的显示设为无，即在网页中不占任何的位置。
11、如何让一段文本中的所有英文单词的首字母大写
text-transform:capitalize; 首字母大写
12、为什么要初始化CSS样式
1.浏览器差异
不同浏览器对有些标签的默认值是不同的，如果没对css初始化会出现浏览器之间的页面显示差异
2.提高编码质量
如果不初始化，整个页面做完会很糟糕，重复的css样式很多
13、css定义的权重
以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：
/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}
如果权重相同，则最后定义的样式会起作用
因为样式相同时，后面的是会覆盖掉前面的。
14、列出display的值，说明他们的作用。position的值，
display的值：
- block 像块类型元素一样显示。
- none 像行内元素类型一样显示。
- inline-block 像行内元素一样显示， 但其内容像块类型元素一样显示。
- list-item 像块类型元素一样显示，并添加样式列表标记。
position的值：
- absolute absolute 生成绝对定位的元素，相对于 static
定位以外的第一个父元素进行定位，若父元素都没有定位则相对于html的根元素 （浏览器窗口）定位。
- fixed fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。
- relative relative生成相对定位的元素，相对于其原来所在的文档流中的位置进行定位。
- static static 默认值。没有定位，元 素出现在正常的流中 （忽略 top, bottom, left, right
z-index 声明）
15、CSS3新增伪类举例：
p:last-of-type 选择其父元素的最后的一个P元素
p:last-child 选择其父元素的最后子元素(一定是P才行)
p:first-of-type 选择其父元素的首个P元素
p:first-child 选择其父元素的首个p元素(一定是p才行)
p:only-child 选择其父元素的只有一个元素(而且这个元素只能是p元素，不能有其他元素)
p:only-of-type 选择其父元素的只有一个p元素(不能有第二个P元素，其他元素可以有)
**选第N个**
p:nth-child(n) 选择其父元素的第N个 刚好是p的元素
p:nth-last-child(n) ..............................................从最后一个子元素开始计数
p:nth-of-type(n) 选择其父元素的n个元素
p:nth-last-of-type(n) ........................从最后一个子元素开始计数
**用在input上**
:enabled:
16、如何居中div？如何居中一个浮动元素？
居中一个div：
给div设置一个宽度，
margin:0px auto。
position:absolute top:50%,left:50% transform:translate(-50%，-50%)弹性盒居中
justify-content:center align-items:center居中一个浮动元素：
居中一个浮动元素（套一个大盒子给它
margin:0px auto。）设置当前div的宽度，然后设置
margin-left:50%; position:relative;
left:-250px;其中的left是 宽度的一半。
17、CSS 选择符有哪些？哪些属性可以继承？优先级算
CSS 选择符有哪些？
1.id选择器（#id）
2.类选择器（.class）
3.标签选择器（div，h1，p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[title]）
9.伪类选择器（a:hover，li:nth-child）
可继承的样式
1.字体系列属性 font，font-family，font-weight，font-size，font-style，font-variant，font-stretch，font-size-adjust
2.文本系列属性 text-indent，text-align，line-height，word-spacing，letter-spacing，text-transform，direction，color
3.元素可见性 visibility
4.表格布局属性 caption-side，border-collapse，border-spacing，empty-cells，table-layout
5.列表布局属性 list-style-type，list-style-image，list-style-position，list-style
6.生成内容属性 quotes
7.光标属性 cursor
8.页面样式属性 page，page-break-inside，windows，orphans
9.声音样式属性 speak，speak-punctuation，speak-numeral，speak-header，speech-rate，volume，voice-family，pitch，pitch-range，stress，richness，azimuth，elevation
优先级算法如何计算？
1.优先级就近原则，同权重情况下样式定义最近者为准；
2.载入样式以最后载入的定位为准；
3.!important > id > class > tag；
4.important 比 内联优先级高，但内联比id要高；
18、浏览器的内核分别是什么?
IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)
19、常见兼容性问题？
png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.
-
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
-
IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
-
浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）
#box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
- 渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
详情百度
20、GET和POST的区别，何时使用POST？
GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值， 也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。然而，在以下情况中，请使用 POST 请求： 无法使用缓存文件（更新服务器上的文件或数据库） 向服务器发送大量数据（POST
没有数据量限制） 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更安全
21、渐进增强和优雅降级
渐进增强：先解决页面基本布局，再逐渐根据需求进行完善，达到最好的用户体验。
优雅降级：一开始就搭建好完整的功能，后续针对低版本进行向下兼容。类似“先富带动后富”
22、HTTP和HTTPS
HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议，就是常说的HTTPS。
默认HTTP端口号是80，HTTPS的端口号是443。
23、什么是Etag？
最典型的情况是，Etag请求Web资源，条件是这些资源自用户上次访问该站点以来已被更新。例如：
用户可以访问具有每周更改的背景的网站。在新一周的第一次访问中，浏览器会检查缓存，如果找不到图像或过时的图像，则会下载当前背景并将其缓存。如果用户在那周已经访问过该站点，浏览器将收到图像未更改的返回响应。在这种情况下，浏览器将使用缓存中的本地副本，从而节省带宽并加快加载时间，加载网站速度更快。
通过Etag启用的HTML5本地存储和缓存cookie也是一种用于更新cookie的方法。消费者跟踪公司使用更新cookie来解决用户删除或拒绝cookie的问题。这种做法还可以用于跟踪用户的其他目的，例如监控黑客。
24、Expires和Cache-Control
Expires要求客户端和服务端的时钟严格同步。HTTP1.1引入Cache-Control来克服Expires头的限制。如果max-age和Expires同时出现，则max-age有更高的优先级。
Cache-Control: no-cache, private, max-age=0
ETag: abcde
Expires: Thu, 15 Apr 2014 20:00:00 GMT
Pragma: private
Last-Modified: $now // RFC1123 format