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