3.CSS页面样式设计解析.ppt

盒子模型和定位 内边距属性 元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性 设置元素的上内边距。 padding-top 设置元素的右内边距。 padding-right 设置元素的左内边距。 padding-left 设置元素的下内边距。 padding-bottom 简写属性。作用是在一个声明中设置元素的所内边距属性。 padding 描述 属性 盒子模型和定位 外边距属性 围绕在元素边框的空白区域是外边距，控制该区域最简单的属性是 margin属性 设置元素的上外边距。 margin-top 设置元素的右外边距。 margin-right 设置元素的左外边距。 margin-left 设置元素的下外边距。 margin-bottom 简写属性。在一个声明中设置所有外边距属性。 margin 描述 属性 盒子模型和定位 定位 CSS 定位属性允许你对元素进行定位，也就是HTML控件进行布局定位 主要有四种基本的定位机制： 普通流、浮动、绝对定位、相对定位 除非专门指定，否则所有框都在普通流中定位，也就是说，普通流中的元素的位置由元素在 HTML 中的位置决定，而绝对、相对定位和浮动都是在普通流之上 盒子模型和定位 DIV 普通流定位效果 默认都是普通流定位，并且自动换行 盒子模型和定位 框1右边浮动在页面上，其他两个框默认 DIV浮动定位用float属性，我们可以设置DIV的浮动定位，让它根据我们的要求放置 div style=border:1px solid #F00;width:200px;height:100px;float:right 框1 /div 盒子模型和定位 框1左浮动效果 框1浮动在左边，框2、3默认，框1把框2覆盖，但是框2的内容被挤出，在浮动的时候，DIV和文字布局是不一样的 分析：我们用红、绿、蓝分别给三个DIV描边 去掉框1的边框，分析框2的位置 盒子模型和定位 框1、2左浮动效果 同理，框3被框1、2覆盖，框3的内容被挤出 分析：去掉框1的边框，分析框3的位置 盒子模型和定位 框1、2、3左浮动效果 分析：其实浮动就是在当前页面的上一层 当框1浮动，那么框2、3就在下面一层默认放置 如果框1、2浮动，那么框1、2在同一层，并列放置，框3在下一层放置 如果框1、2、3都浮动，那么他们同在上面一层并列放置 盒子模型和定位 绝对、相对定位 通过使用?position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 static 生成相对定位的元素，相对于其正常位置进行定位。 因此，left:20 会向元素的 LEFT 位置添加 20 像素。 relative 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 left, top, right 以及 bottom 属性进行规定。 fixed 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 left, top, right 以及 bottom 属性进行规定。 absolute 描述 值 盒子模型和定位 定位属性 设置元素的堆叠顺序。 z-index 设置元素的垂直对齐方式。 vertical-align 设置元素的形状。元素被剪入这个形状之中，然后显示出来。 clip:rect(0px,20px,100px,0px) 需要绝对定位 clip 设置当元素的内容溢出其区域时发生的事情。 overflow 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 left 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 bottom 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 right 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 top 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 position 描述 属性 盒子模型和定位 absolute 绝对定位 元素框从文档流完全删除，并相对于其包含块定位，元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样 fixed绝对定位 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身 relative 相对定位 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留 注意：fixed是相对于浏览器的绝对定位，absolute是相对于父容器的绝对定位，不过这个父容器不能是普通流 CSS 选择器 样式的选