table布局 文本格式 字体、列表样式 背景属性 盒子模型 定位

内容大纲

整个页面的布局可以用到table来布局，还可以用div+CSS来对页面进行布局，相对于table布局来说，div+CSS将网页分为内容和表现形式，更利于后期整个网站的维护，一般只要修改css文件中的一个css属性就可以修改页面的样式，可以提高网页的打开速度，这是特性决定了他们的性能，因为浏览器打开网页的时候是同时下载html和css的，这样可以边加载边显示内容，而对于table布局来说，浏览器打开页面的时候，必须是浏览器下载以<table>开始，并以</table>结束后才显示块的内容，因此div+css大大提高了用户体验。更加灵活的控制页面布局。但缺点在于并没有对所有浏览器实现兼容。通过设置浮动属性来对div实现浮动，通过display来对元素进行转换。文本格式中实现对字体、列表的一系列改变，例如颜色、大小、首行缩进、对齐方式、文本修饰、加粗倾斜以及风格的改变。

二 笔记

页面布局

1. table布局（淘汰）

<table><tr><td><div></div></td></tr></table>

1. div + CSS布局

宽高的单位一般都是像素单位px

height：inherit；继承父元素高度

页面看成有两层，高层是浮动层，低层是一般层

浮动元素会放在浮动层中（脱离文档流）

浮动元素和一般元素重叠，浮动层会覆盖一般层

浮动层具有float属性，一般层不具有

1. float就是垂直排列块级元素变成水平排列，left从右到左，right从左到右
2. 当排列元素的宽度小于子元素水平排列宽度之和时，子元素会重叠在一起浮动，继续排列
3. 元素转换

1. 块级元素转内联元素 display = inline；
2. 内联元素转块级元素 display = block；（block显示的意思）
3. 块级/内联元素转块级内联元素 display = inline-block

文本格式

1. 字体颜色的三种表达方式

1. 规定颜色值为颜色名称 如 red green yellow
2. 颜色值为十六进制 如 #ff0000
3. 颜色值为rgb 如 rgb(255,0,0)

1. 文本修饰（text-decoration）

1. 下划线 underline
2. 上划线 overline