前端知识点

CSS

#1 什么是盒模型？

盒子模型（Box Model），Box Model自内向外，由content，padding，border，margin构成。页面中的每一个元素都可以看做一个矩形的盒子（包括内联元素）

  • 符合W3C标准的浏览器认为一个元素的宽度只等于content的宽度（content的宽度就是css的width属性），用公式表示就是：

    width = contentWidth

  • IE9以下版本的浏览器解释盒模型认为一个元素的宽度包含
    content，padding，border的宽度总和，用公式表示就是：

    width = contentWidth + paddingLeftWidth + paddingRightWidth + borderLeftWidth + borderRightWidth

个人理解，W3C的标准不利于页面开发时计算元素宽度和高度，相比旧版本IE对于盒模型的解释更符合人类思维。所以可以使用CSS中的box-sizing属性，设置为border-box，让盒模型按border-box形式进行解析。这样做既可以兼容旧版IE浏览器标准，有避免了不必要的计算。

#2 Doctype的几种类型

DOCTYPE指文档类型声明，表示页面上HTML(XML)的版本。

DOCTYPE的规则：

HTML [顶级元素] [可用性] ["注册//组织//类型 标签//定义 语言"] [“URL”]

例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DOCTYPE类型 

XHTML1.0中有3种DTD(文档类型定义)，声明可以选择：Transitional(过渡的)、Strict(严格的)、Frameset(框架的)
HTML4.01中也有3种DTD：Transitional、Strict、Frameset
HTML5声明简单只需要写<!DOCTYPE html>现在已经都在使用了。不需要对DTD进行引用。
  1. Transitional–过渡的不严格DTD，允许页面使用XHTML4.01的标签，符合XHMLT语法标准
  2. Stirict–严格的DTD，不允许使用任何表现层的标示和属性
  3. Frameset–专门针对框架页面使用的DTD

#3 如何布局左侧宽度不变，右侧自适应宽度的两列布局？

1. float+margin方式 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/reset.css" >
		<style>
			html, body {
				margin : 0; padding : 0;
				height : 100%; width : 100%;
			}
			#wrap {
				padding-left : 220px;
				background-color : #ffd700;
				overflow : hidden;
			}
			#content {
				float : right;
				width : 100%;
				background-color : #ff7f50;
				border-left	: 220px solid red;
				margin-left : -220px;
			}
			#side {
				float : right;
				width : 220px;
				background-color : green;
				margin-left : -220px;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="content">
				正文...
			</div>
			<div id="side">
				侧边栏
			</div>
		</div>
	</body>
</html>