《网页设计与制作》课件——第六章 CSS常用属性.pptVIP

七、定位绝对定位当position的取值设置为absolute时，代表绝对定位。元素通过设置left、right、top和bottom属性进行定位，绝对定位元素将选取其“最近的上级定位元素，直到body元素为止”的元素作为定位参考。绝对定位的元素将脱离标准文档流，不受标准文档流的限制，在标准文档流中不占用其空间，不影响标准文档流中的元素，看似悬浮于页面之上。七、定位绝对定位相对文档原点坐标，向右偏移100px，向下偏移30px。#box2{background-color:#00f00f;position:absolute;left:100px;top:30px;}七、定位绝对定位思考：如果将上例中class属性为box的元素（父元素）的定位方式改为relative，class属性为box2的元素会怎么移动？#box{border:3pxsolidred;margin-top:100px;position:relative;}相对父元素原点坐标，向右偏移100px，向下偏移30px。七、定位固定定位当position属性设置为fixed时，即固定定位。设置为固定定位的元素脱离文档流，这里的“固定”指的是在浏览器窗口上固定。请同学们练习P148-149代码06_07_02_05.html，比较定位距离与外边距的差别。七、定位层叠效果自然层叠顺序：根据HTML元素出现的先后顺序自定义层叠顺序：使用CSS的“z-index”属性，“z-index”只对定位元素有效，其值越大，层叠顺序越高八、其他常用属性不属于某类，但很常用的属性cursor：设置光标类型（形状）visibility：设置元素是否可见clip：设置元素的形状zoom：IE下激活对象的hasLayout模式opacity：设置元素的不透明度本章小结CSS属性的作用、拼写，常用的值，适用哪些元素，有无继承性，兼容性怎样在文档流中，HTML元素摆放的特点是“行布局”的形式在文档流中，所有的HTML元素可以分成“块级元素”和“内联元素”CSS中控制文字样式的属性可以分为两类：文本属性（font）和字体属性（text）网页中所有的HTML元素都可以看作是一个盒子，会占据一定的页面空间，在已占据的空间内，不能再放置其它任何占据页面空间的元素本章小结盒子模型由content（内容）、border（边框）、padding（间隙）、margin（间隔）四个部分组成，其中border、padding、margin又可以分为上下左右四个方向网页中的图片有两个作用：“作为内容”和“作为背景”CSSSprites是一种网页图片应用处理方式浮动元素将从正常文档流中脱离出来，不占有正常文档流的空间CSS支持四种定位方式，通过“position”属性设置，分别是：普通定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）定位元素可以通过“top、bottom、left、right”四个属性调节位置，我们称这四个属性为“定位距离”。只有定位元素可以使用定位距离“z-index”属性只对定位元素有效，“z-index”的值越大，层叠顺序越高，视觉上越靠上6.9独立实践6.9独立实践6.9独立实践6.9独立实践右对齐，与上边和右边相距15px，字体12px，颜色为#00c居中对齐，超链接字体14px，颜色#00c按钮背景图片见素材，高度32px，宽度95px，无默认的边框，填充，边界输入框边框1px，实线，颜色#ccc，宽度418px，高度30px居中对齐，段落上外边距为10px，字体12px，颜色为#00c居中对齐，段落上外边距为10px，字体12px，颜色为#666Page*本章知识点CSS属性简述文档流文本和字体列表盒子模型浮动定位其他常用属性一、CSS属性简述我们最终是通过属性来控制HTML元素的样式继承性某些CSS属性具有继承性，即在父元素中对某属性进行了设置，那么该父元素的所有后代元素都会自动获得该属性的设置如后代元素需要该属性，在其CSS中就不需重复设置；否则，该属性就必须在其CSS中重新声明兼容性CSS经历了多次版本修订，浏览器的版本更新更加频繁，导致某些属性在某些浏览器中其效果不能实现建议以Firefox浏览器为测试的主浏览器，IE为次