WEB UI

 

 

1. block 和 inline

　　block（块级元素）独占整行，不和其他元素共享一行（例如：div，ul，li，p，h1，h2，h3......）。

　　inline（行级元素）和其他行级元素共享一行。（例如：span，img......）

 

2. block（块级元素）

　　2.1 如果两个block元素在垂直方向上设置了margin，则取大者。

1 <div style=" margin-bottom:20px">div>
2 <div style=" margin-top:30px">div>

 

以上两个div的垂直距离为30px;

 

　　2.2 block元素的width属性是指内容所占的区域的宽度，可以大于内容宽度。注意：不包括padding区域。如果设置了padding，则整个元素所占的区域是padding-left + padding-right + width

 

3. inline（行级元素）

　　3.1 inline元素不允许设置高度和宽度，其高度，宽度由内容决定。

　　3.2 inline的margin属性，上下无效，左右有效。

　　3.3 inline的padding属性，上下无效，左右有效。

 

4. display属性

　　display：block/inline； 让元素在block元素和inline元素之间的相互转换。

 

5.
一般只在

中出现。不要用于元素和元素之间的回车。如果要换行，则将inline转换成block

 

6. 使用"Reset.css"文件消除不同浏览器对CSS的默认值("Reset.css"是一个样式文件，可以在网上下载得到)

 

7.

将一组元素在逻辑上看作为一个整体时使用（不要滥用,如果div中只包含一个元素，这时最好不要使用div）

 

8. 用作页面整体框架的div的宽度设置为960px较好，对不同屏幕可以很好兼容。

 

9. float属性指将当前的元素从文档流中抽出，float属性需要配合clear属性一起使用。

　　任何元素如果设置了float以后，可以设置高度和宽度，且必须设置高度和宽度，inline元素使用float后，可以设置高度，并且还可以和别的元素分享同一行。（float的作用用语言不是很好解释，希望各位通过练习，自己理解）

 

10. 网页中的图片分为两种：

　　（1）数据型，（缺少会影响数据表达）使用img

　　（2）标记型，（缺少不会影响数据表达）使用background-image （别忘了设置width，和height）

11. 使用Table顺序 表头 表尾 表体。

　　 在浏览器中显示还是按照表头，表体，表尾。

　　目的：读取表格数据可以不用判断当前行是否是表尾行（如有不明白，各位可以参看其他资料）。

 

12. position(内容来自网络)

绝对定位：position: absolute;语法：

有如下两种情况
1，没有设定 Top、Right、Bottom、Left 的情况，默认依据父级的“内容区域原始点”为原始点
2，有设定 Top、Right、Bottom、Left 的情况，这里又分了两种情况如下：
(1)，父级没 position 属性，浏览器左上角(即 Body)为“坐标原始点”进行定位，位置由 Top、Right、Bottom、Left 属性决定
(2)，父级有 position 属性，父级的“坐标原始点”为原始点

相对定位：position: relative;
参照父级的“内容区域原始点”为原始点，无父级则以 Body 的“内容区域原始点”为原始点，位置由 Top、Right、Bottom、Left 属性决定，并且会在父块以外占据相同的大小，所以不推荐使用。

无论相对定位或绝对定位有一点需要注意的就是
left和right只能设置一个
top和bottom也只能设置一个 

 

 

 

最后：

这里给出几句开发中用得到的口诀：

　　如果需要设置一个元素的高度，该元素必须是block；
　　如果需要和其他元素分享行空间，则float
　　如果不和前一个元素分享，则clear
　　如果一行中，只要有一个兄弟元素设置了float，则所有元素都必须float