CSS基础详解-7+使用CSS进行布局

第3章CSS第7节使用CSS进行布局网页的布局使用table布局网页的内容和样式有效的分离了吗？如果要重新调整布局，修改方便吗？本节内容div+CSS进行布局布局方法：浮动定位布局类型：固定宽度、流式table和div进行布局W3C：Tablesshouldnotbeusedpurelyasameanstolayoutdocumentcontentdiv+css:页面加载速度更快节约带宽成本改版和维护容易利于网站排名块儿出现的位置？导航栏A内容B内容C脚注D本节内容div+CSS进行布局布局方法：浮动定位布局类型：固定宽度、流式浮动的概念imgsrc=“a.jpg”align=“right”-----让图片居右(浮动方式)浮动改变页面中对象的前后流动顺序浮动的概念Demo3-7-1leftright对象居右浮动，文本流向对象的左侧none对象不浮动浮动的方式inheritfloat:none|left|right|inherit对象居左浮动，文本流向对象的右侧浮动的方式做Demo3-7-1清除浮动left不允许左边有浮动的对象right不允许右边有浮动的对象both不允许有浮动的对象清除浮动noneclear:left|right|both|none改进Demo3-7-1本节内容div+CSS进行布局布局方法：浮动定位布局类型：固定宽度、流式定位定位方式position：static|relative|absolute|fixedstatic：静态定位方式;（默认的定位方式）内容遵循正常从上到下的HTML流；Demo3-7-2.html定位—relativeposition:relative;相对定位；相对元素自己的定位；通过top,left,right,bottom属性设定自己的新显示位置；#box_relative{position:relative;left:30px;top:20px;}定位--absoluteposition:absolute;绝对定位；把一个元素从页面流中去除；由偏移量（leftrighttop和bottom）四个属性决定；堆叠绝对定位可以将元素定位在在网页的任何，如果重叠到其他元素上怎么办呢？堆叠次序：z-index:auto|数值|inheritauto:默认值，由浏览器自动控制；数值：大上小下；inherit:继承父级样式；堆叠父元素给它的子元素定义了堆叠次序一般的，定位元素的堆叠顺序遵循它们在HTML代码中的顺序Z-index的值越大，元素就出现在越接近堆叠顶部的地方Z-index值尽量留间隔本节内容div+CSS进行布局布局方法：浮动定位布局类型：固定宽度、流式固定宽度流式15%15%布局类型网页布局类型：固定宽度、流式内容回顾div+CSS布局VS表格布局内容回顾1.浮动：float:leftrightnone2.清除浮动：clear:leftrightnone3.定位方式：relativeabsolute4.堆叠次序：z-index5.固定宽度和流式布局HTMLCSSJavaScript结构样式行为