HTML CSS常见的面试题

1 知道的网页制作会用到的图片格式有哪些

png-8
png-24
gif
jpeg
svg
Webp(重点)
webp是谷歌开发的一种旨在加载图片加载速度的图片格式，图片压缩体积大小只有jpeg的三分之二，并能节省大量的服务器带宽资源和数据空间。

2 SGML(标准通用标记语言) 和HTML (超文本标记语言)

SGML是一个用于定义标记语言的系统。为用户提供一种类似语法的机制，用于定义文档的结构和指示文档结构的标签
SGML声明。SGML声明指定义了应用程序中可能出现的字符和分隔符。
文档类型定义(DTD document type definition) 。 DTD定义了标记构造的语法，
描述标记所表达的语义。此规范还定义了无法在DTD中表达的语法的限制。
包含数据和标记的文档实例。每个实例都包含了一个对DTD的引用，用于解释它。
标准答案：
SGML是一个标准，告诉我们怎么去指定文档标记。他是只描述文档标记应该是怎么样的元语言HTML是被用SGML描述的标记语言你。
因此利用SGML创建HTML参照和必须共同遵守的DTD，你会经常在HTML页面的头部发现"DOCTYPE"属性，用来定义用于解析目标DTD
总之，SGML是所有类型的父亲，较旧的HTML利用SGML，HTML4.0使用派生自XML的XHTML

3 你对CSS中浮动的理解以及如何清除浮动？

设置了浮动属性的元素会脱离普通标准文档流的控制，移动到其父元素中指定的位置的过程，将块级元素放在一行，浮动会脱离标准流，不占位置，浮动只有左右浮动，没有上下浮动，浮动元素摆脱了块级元素和行内元素的限制，
清除浮动：

给浮动元素的父级标签添加overflow:hidden或者overflow:auto属性
为浮动元素的下一个兄弟元素添加clear:both属性。
父级div元素定义zoom
父级div定义height

4 CSS的引入方式？ Link和@import的区别？

外部链入一个CSS文件，在HTML头部分标明：<link rel="stylesheet" type="text/css" href="css存放路径">
头部直接写入CSS：<style type="text/css"> *{padding:0;margin:0;}要写的样式</style>
直接在HTML标签里写入：<div style="height:100px;width:100px"></div>
外接多个CSS文件时：<style type="text/css">@import url(my.css)</style>

5 link和@import的区别：

link属于XHTML标签，而@import完全是CSS提供的一种方式
当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。
由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题
当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

5 CSS中的选择器?

选择器在你想要应用一个样式的时候，帮助你去选择元素，例如
类选择器：

.app{height:100px;width:100px}
<div class=app></div>

此外还有 ID选择器，标签选择器，等等

6 如何使用ID值来应用一个CSS样式？

您可以使用"#"选择器和"id"的名字一样来创建一个样式，并把CSS样式应用到段落标签中，例如：

<style>
#myid{
height:50px;
width:50px;
background-color:#0000cd;
}
<div id="myid"></div>
</style>

7 CSS中使用列布局是什么?

css列布局帮助你分割文本变为列，例如考虑下面的杂志新闻在一个大的文本中，但是我们需要在他们之间使用边界划分为3列，指定列数我们需要使用column-count，对于Chrome和Firefox分别需要"webkit"和"moz"
例如：

<style>
.app{
-moz-column-count:3;
-webkit-column-count:3;  
column-count:3; //列数(栏数)

-moz-column-gap:30px;
-webkit-column-gap:30px;
column-gap:30px; //列间距(沟壑)

-moz-column-width:20px;
-webkit-column-wdith:20px;
column-width:20px; //栏的宽度

-moz-column-rule:5px #ff0000;
-webkit-column-rule:5px #ff0000;
column-rule:5px #ff00000; //(列样式)
}
</style>
<body>
<div class="app">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias consectetur  n   a m placeat pos simus   sint laudantium id    mollitia temporibu   s nisi ut sed nesciunt aliquam! Explicabo voluptatem a ea ipsum dolorem ad?
</div>
</body>

8 你能解释一下CSS中的盒子模型吗？

css盒模型是围绕在HTML元素周围的定义border，padding和margin的矩形空间
border(边界)：定义了元素包含的最大区域，我们能够使边界可见，不可见，定义高度宽度等；
padding(内边距)：定义了边界和内部元素的间距；
margin(外边距)：定义了边界和任何相邻元素的间距；
样式为：

.app{
width:100px;
padding:20px; //内容与边界会相距20px
margin:30px; //边界与外部元素相距30px;
border:3px solid red;  边界样式  宽度3px  solid(实线)  红色
}

9 你能解释一下CSS3中的文本效果吗？

两种需要注意的效果：
阴影文本效果：

.div{ text-shadow:5px 5px 5px #00ff00}

垂直偏移量，水平偏移量，模糊距离，阴影颜色；
文字包装效果：

.break{word-wrap:break-word}

10 什么是Web Workers？为什么我们需要它们？

考虑到以下会执行上百万次的繁重的循环代码

function myfun(){
for(var i=0;i<10000000;i++){
var x;
x = i+x;
}
}

比方说上面的循环代码在HTML按钮点击以后执行，现在这个方法执行是同步的，换句话说这个浏览器必须等到循环完成才能操作<input type="text" onclikc="myfun()"/>,这个会进一步导致浏览器冻结并且没有响应，
如果能移动这些繁重的循环到js中，采用异步方法，这意味着浏览器不需要等到循环接触，我们可以有更敏感的浏览器，这就是web workers的作业，它帮助我们用异步执行js文件

11 Web Workers线程的限制是什么？

Web Workers线程不能修改HTML元素，全局变量和Window.Location一类的窗口属性，你可以自由使用js数据类型，XMLHttpRequest调用等；

12 请列举几种可以清除浮动的方法

- 给浮动元素的父级标签添加overflow:hidden或者overflow:auto属性

为浮动元素的下一个兄弟元素添加clear:both属性。
父级div元素定义zoom
父级div定义height

13 display:none 和 visibility:hidden的区别？

display:none 不显示对应的元素，在文档流中不再分配空间(回流+重绘)(可以理解为消失)
visibility:hidden 隐藏对应元素，在文档流中仍然保留原来的空间(重绘) (可以理解为隐身/隐藏)

14 如何让一段文本中的所有英文首字母大写？

添加 text-transform：capitalize；//作用首字母大写

15 为什么要初始化CSS样式？

因为浏览器兼容原因，有些浏览器默认自带边距，如果不初始化，页面显示效果有有所差异，
最简单的初始化:

*{ padding:0;margin:0;} //*代表全部/所有

16 CSS定义的权重：

权重规则：
元素选择符：1；
class选择符：10；
id选择符：100；
元素标签：1000；

17 列出display和position的值，并说明

display：
block ：像块元素一样显示(独占一行)
none：缺省值，像行内元素类型一样显示
inline-block：像行内元素一样像是，但其内容像块元素一样显示
list-item：像块元素一样显示，并添加样式列表标记
position：
absolute：绝对定位，相对于第一个带有position并且值不为static的父元素定位
fixed ：固定定位，相对于浏览器进行定位
relative ：相对定位，相对于自身正常位置进行定位
static 默认值，没有定位，
inherit：规定从父元素继承position属性的值。

18 CSS3新增伪类？

p：first-of-type 选择属于其父元素的首个p元素
p：last-of-type 选择属于其父元素的最后一个p元素
p：only-of-type 选择属于其父元素唯一的p元素
p：only-child 选择属于其父元素的唯一子元素
p：nth-child（）：
（num）选择属于其父元素的第num个p元素
（even）选择属于其父元素的位置为偶数的p元素
（odd）选择属于其父元素的位置为奇数的p元素
：enabled ：disabled 控制表单控件的禁用状态
：checked 单选框或复选框被选中

19 如何居中div? 如何居中一个浮动元素？

居中div；

.div{
width：200px;
margin:10px auto;
}

居中一个浮动元素
确定容器的宽高，设置层的外边距

.app{
width:500px;
height:300px;
margin：-150px 0 0 -250px;
position:relative;
left:50%;
top:50%; 
}

20 CSS选择符有哪些？哪些属性可以继承？优先级？

选择符：

id选择器 (# app)
类选择器(.app)
标签选择器(div)
相邻选择器(h1 + p)
子选择器 (ul < li)
后代选择器 (div p)
通配符选择器( * )
属性选择器( a[rel=“external”])
伪类选择器(a:hover li:nth-child)

可继承的：

font-size
font-family
color
ul li
dl dd dt

不可继承：

border
padding
margin
width
height

优先级就近原则，同权中情况下样式定义最近者为准；
载入样式以最后载入的定位为准

优先级为：

!important  > id > class > tag

!important比内联优先级高(最高)

21 浏览器的内核分别是什么？

IE浏览器内核Trident、Mozilla的Gecko、Chrome的Blink(webkit的分支)、Opera的内核为Presto，现为Blink、Firefox的Gecko

22 常见兼容性问题？

png24位的图片在ie6浏览器上出现背景 —解决方案做成png8
浏览器默认margin和padding不同 —解决方案 *{padding：0；margin：0；}
块属性标签float后，又有横行的margin情况下，在IE6显示的margin比设置的大 —解决方案在float的标签样式控制中加入 display：inline-block将其转化为行内属性
设置较小高度标签（一般小于10px，在ie6，ie7，遨游中高度超出自己设置高度 —解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

23 GET和POST的区别，何时使用POST？

GET：一般用于信息获取，使用URL传递参数，对所发信息的数量也有限制，一般在2000个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。
GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，也就是说GET是通过地址栏来传值，而POST是通过提交表单来传值
然而，在以下情况下，请使用POST:

无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST没有数据量限制)
发送包含未知字符的用户输入时，POST比GET更稳定也更可靠。

24 渐进增强和优雅降级

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果，交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

25 HTTP 和 HTTPS

HTTP协议通常承载与TCP协议之上，在HTTP和TCP之间添加一个安全协议层(SSL或TSL),这个时候，就成了我们常说的HTTPS

HTTP默认端口号为80  HTTPS默认端口号为443

26 为什么HTTPS安全？

因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用https，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等等。保障了传输过程的安全性

27 什么是Etag？

http协议规格说明定义Etag为"被请求变量的实体值"。另一种说法是，Etag是一个可以与web资源关联的记号(token)。典型的web资源可以一个web页，也可能是JSON或XML文档。

28 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 Apr201420:20:00GMT
Pragma：private
Last-Modified：$now //RFC1123 format

ETag应用：
etag由服务器生成，客户端通过if-match或者说if-none-match这个条件判断请求来验证资源是否修改。常见的是使用if-none-match。请求一个文件的流程可能如下：
---- 第一次请求
1.客户端发起http get 请求一个文件；
2 服务器处理请求，返回文件内容和一堆Header，当然包括etag
---- 第二次请求
客户端发起http get 请求一个文件，注意这个时候客户端同时发送一个if-none-match头，这个头的内容就是第一次请求时服务器返回的etag：2e681a-6-5d0448402.服务器判断发送过来的etag和计算出来的etag匹配，因此if-none-match为false。不返回200，返回304，客户端继续使用本地缓存；流程很简单，问题是，如果服务器又设置了Cache-Control：max-age和Expires
答案是同时使用，也就是说在完全匹配if-modified-since和if-none-match即检查完修改时间和etag之后，
服务器才能返回304
为什么使用Etag请求头？
Etag主要为了解决Last-Modified无法解决的一些问题