div+css样式
CSS是Cascading Style Sheets的英文缩写,即层叠样式表.
margin: 值1 上下左右margin: 值1 值2 上下 左右margin:值1 值2 值3 值4 上 右 下 左
CSS样式属性字体属性font（缩写形式）font-weight（粗细） font-size（大小） font-family（字体）Color（字体颜色） 文本属性line-height （行高） text-align （对齐） letter-spacing （字符间距）text-decoration （文本修饰 ）盒子属性margin（外边距/边界） border（边框） padding（内边距/填充 ）width（宽）Height（高）背景相关的属性background（简写形式）background-color（设置背景颜色）background-image（设置背景图片）background-repeat（设置背景的平铺方式）background-position（设置背景的坐标，偏移量）
CSS样式表分类：行内样式特征：使用标签的style属性定义的样式eg:<a style="color:red;" href="#">G1T57</a><p style="color:red;">g1t57</p>内嵌样式特征：使用<style>标签嵌入在HTML文档中，通常写在<head>与</head>之间优点：1、代码结构清晰2、应用方便、灵活3、实现内容与表现的分离外部样式导外部样式1)<style type="text/css">@import url("路径/文件名.css");</style>2)<link rel="stylesheet" type="text/css" href="路径/文件名.css">
<style type="text/css">//标签选择器标签选择器{属性:值;}//类选择器 class.类选择器{属性:值;}//ID选择器id#ID选择器{属性:值;}//包含选择器 特点：只有{前的那个选择器才遵循属性样式选择器1 选择器2{属性:值;}//组合选择器 特点：都遵循样式规则属性选择器1,选择器2{属性:值;}//伪选择器选择器:伪类名{属性:值;}</style>
相同样式属性就近原则不同样式属性叠加
CSS中的常用选择符有标签选择符、ID选择符、Class选择符、伪类选择符、包含选择符、组合选择符CSS的优先级：行内样式>内嵌样式>外部样式ID选择器的优先于Class选择器
-----------------------------------------------------------------------------------------
传统table布局存在的缺陷1\代码冗余，结构不清晰2\页面加载速度慢3\定位不灵活
DIV+CSS布局的优点1\可以现实内容与表现分离?2\代码简洁、结构清晰3\对搜索引擎支持好4\易于版面布局修改5\定位准确、灵活内容与表现分离是DIV+CSS布局设计的基础内容就是页面实际要传达给用户的信息，包含数据、文档或者图片等表现指的是内容的修饰性部分，例如标题字体的大小、背景等内容与表现分离的优点1\网页文件体积小能较快被客户端下载2\数据的多样显示，通过不同的样式表适应不同的设备，做到内容与设备无关3\保持整个站点的视觉一致性，修改样式表就可以轻松改版4\页面结构简洁，数据的集成、更新和处理更加方便灵活5\便于被搜索引擎搜索
实现内容与表现分离的步骤1\使用div来定义语义结构2\使用CSS来美化网页，如加入背景、线条边框、对齐属性等3\在DIV里添加内容，如文字、图片等（没有表现属性的标签）盒子模型：盒子模型由content(内容)、border(边框)、padding(内补丁)、margin(外补丁)四部分组成分类：1、标准W3C盒子特点：标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分使用范围：适用于所有浏览器计算公式：1）标准W3C盒子模型，盒子需要占据的位置为：宽公式：margin*2 + border*2 + padding*2 + 宽高公式：margin*2 + border*2 + padding*2 + 高2）标准W3C盒子模型的实际大小为：宽公式：border*2 + padding*2 + 宽高公式：border*2 + padding*2 + 高2、IE盒子特点：IE 盒子模型的范围也包括 margin、border、padding、content 与标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding使用范围：适用于IE浏览器计算公式：IE盒子模型，盒子需要占据的位置为：宽公式：margin*2 + 宽高公式：margin*2 + 高盒子的实际大小为：宽公式：宽高公式：高盒子之间的关系1\盒子的水平间距当两个盒子在一行显示时，它们之间的距离为BOX1的margin-right和BOX2的margin-left的和2\盒子的垂直间距当两个盒子在垂直方向显示时，它们之间的距离为BOX的margin-bottom和BOX2的margin-top中较大者，而不是两者之和3\盒子的重叠可以将其中一个盒子的margin属性值设置为负值，实现盒子的重叠
盒子定位定义：定位是将某个元素放到某个位置上分类：1、浮动定位2、盒子的流动定位3、position定位3.1、position定位作用：position 属性用于控制页面元素位置语法：position:static/absolute/relative;注意：标准的W3C盒子模型和IE盒子模型最关键的区别在于IE 盒子模型的 content 部分包含了 border 和 padding
-----------------------------------------------------------------------------------1标准文档流是浏览器端的一个管道；浏览器从文档流里读取数据，并按先后顺序进行解析2流动（Flow）是默认的网页布局模式3相对定位会遵循流动模型布局规则，跟随HTML文档流自上而下流动4浮动元素自动被设置成一个块状元素显示，可以设置其width和height属性5浮动元素始终位于包含元素内，不会脱离文档流
流动模型定义： 流动模型是基于标准文档流布局模式，除绝对定位、固定定位和浮动元素 之外，任何元素将默认为流动布局模式 故：任何元素在没有定义拖出文档流定位方式属性 （position: absolute; 或position: fixed;）、 没有定义浮动于左右的属性（float: left; 或 float: right;）时， 这些元素都将具有流动模型的布局模式， 都将依据文档流的默认方式进行布局和显示特点：块状元素会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%行内元素会在所处的包含元素内从左到右水平分布显示相对定位流动：遵循流动模型布局规则，跟随HTML文档流自上而下流动相对定位的元素被定义便移位置后，不会挤占其他流动元素的位置，但能覆盖其他元素浮动模型：
浮动模型实现：
注意：XHTML是以xml规则重构HTML4的一种新规范XHTML适应多种网络设备和应用的需要XHTML语义更严谨、更规范浮动模型浮动模型特点： 任何浮动元素自动被设置成一个块状元素显示浮动元素在垂直方向上与文档流中的元素位置一致；在水平方向上停靠包含元素边缘 浮动元素不会脱离文档流，始终位于包含元素内浮动塌陷 若父级元素只包含浮动元素，高度塌陷为零浮动清除 CSS中用于清除浮动的方式： clear属性 空div标签 overflow属性 after伪选择符 注意：在绝对定位模型中，元素的位置是基于包含块的左上角偏移 绝对定位元素是完全脱文档流