第五讲 CSS盒子模型

一、Display属性

CSS使用display设置的标签的显示方式

• block“块”元素
• inline“行内”元素 inline-block
•  行内块元素
• none 隐藏

注意区别：<div>主要用于HTML文档中独立的“大块”内容

<span>主要用于HTML文档中需要特别定义的内容

二、文档流定位

1、标准文档流”

Normal Document Stream 浏览器解析HTML代码的基本方式，根据标签的不同“display”来确定标签的定位和显示方式

• float 造成标签“浮动”，影响“文档流”的空间
• float:left;“左浮动”
• float:right;”右浮动”
• 对span元素添加一个float:left，span元素已经“块”化。

2、 绝对定位和绝对定位

前言：除了基于“文档流”的定位，CSS还定义了标签的其他定位方式，CSS使用position属性指定标签的定位方式

position的值：

static，默认值，即使用基于“文档流”的定位

relative，相对定位，即在“文档流”的基础上，结合left和top属性，相对定位

absolute，绝对定位，即脱离“文档流”，并基于它的“包含框”，使用left和top属性来定位

fixed，固定定位，即特殊的绝对定位，即它的“包含框”为浏览器

（1） position:relative; 相对定位

注意：相对与原来的位置，使用left,right进行偏移 原来的位置对于后继元素的定位(float)依然有效 对于使用float的元素，realative也同样起作用

（2）position:absolute; 绝对定位

注意：绝对定位脱离了”文档流“， 使用绝对定位时，注意找准”包含框“，即包含该标签，并且距它最近的，position不等于static的标签 如果没有，那么将以浏览器左上角为准来定位 特别 只定义position:absolute;没设置left和top，标签位置仍安“文档流”定位，但已经“脱离文档流”。

（3） float具有“破坏性”，它会导致父元素“坍塌”，这将不是所要看到的。              

介绍4种清除浮动的方法              

• 为父元素添加overflow:hidden            
•   为父元素增加height              
•   clear:both通过在所有浮动元素下方添加一个clear:both的元素，可以消除float的破坏性。  
•  伪元素消除

三、列表样式

• list-style-type   列表样式类型 disc/circle/square
• list-style-image  列表样式图片
• list-style-position  列表样式位置 outside / inside 

四、其它样式补充

元素不可见 display:none    

visibility：visible/hidden

光标样式 cursor:pointer/help/wait/url(),auto 
   opacity   不透明度  取值范围 [0,1]
   兼容ie8及以下版本 filter : alpha(opacity=数值)    数值取值范围[0,100]
   cursor   光标样式
   值：1）default   默认  白箭头
          2）text   默认  文本工字型
          3）wait   等待状态
          4）help   帮助状态
          5）pointer  链接样式   小手状
          6）url("图片路径"),auto   自定义光标样式