昨日回顾
CSS背景属性
Background-color：背景颜色
Background-image：背景图片，格式：background-image:url(images/bg.gif);
Background-repeat：背景平铺，取值：no-repeat、repeat-x、repeat-y、repeat
Background-position：背景定位，格式：background-position:水平方向 垂直方向
单词表示：left|center|right top|center|bottom 举例：background-position:center center; //背景图位于容器的正中间。
百分比表示：50% 50% 举例：background-position:50% 50%; //背景图位于容器的正中间
固定值表示：0px 10px 举例：background-position:0px 10px; //背景图距容器上边的距离
CSS浮动和清除
如果要将两个块元素放在同一行，这种情况下，就得使用“浮动”属性。
1、浮动的方向：浮动元素向左或向右浮动；
2、浮动到什么地方为止：碰到包含元素的边上为止，或者前一个浮动元素的边上为止；
4、浮动元素的层级：浮动元素的级别要比普通文档流中的元素的级别高，会发生覆盖的现象。
5、浮动元素不再占用空间；
6、浮动元素将变成“块元素”，而不管原来是什么元素；
清除浮动
Clear:清除浮动，取值：left、right(右)、both(两者)
说明：使用“clear”属性后，包含元素从“视觉上”能包围住浮动元素；
使用“clear”属性之后的其它元素，将恢复默认排版（默认特性）
Clear是清除其之上的元素的浮动特性。
清除属性放在所有浮动元素的后面，来进行清除浮动。
“盒子”模型
任何HTML元素，都可以看成是一个“盒子”。
一个“盒子”具有：内容宽和高(width、height)、边框线(border)、内填充(padding)、外边距(margin)。
提示：同一个class属性，可以同时设置多个类的名称，多个类名间用“空格”隔开。
<div class=“content float1 font2”></div>
<style type=“text/css”>
.content{width:500px;}
.float1{float:left;}
.font2{font-size:16px;}
</style>
实例：学生感言
CSS显示属性
Display：设置元素的显示方式，取值：none(隐藏)、block(块显示)、inline(行内元素显示)
CSS定位属性
position：定位的类型，取值：static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定)
left：定位元素距离左边的距离
right：定位元素距离右边的距离
top：定位元素距离顶边的距离
bottom：定位元素距离底边的距离
static：静态定位，普通文档流中的元素默认就是static定位；
fixed：固定定位，相对于当前浏览器窗口来进行的定位。
固定定位元素不再占用空间(跟浮动很像似)，层级高于普通元素
固定定位元素是一个块元素，不管原来它是什么元素；
Relative：相对定位，相对于“原来的自己”进行的定位。
它所占的空间依然保留，层级会高于普通元素。
当fixed、relative、absolute三个定位元素，没有指定“定位坐标”时，它们还停留在原地。
四个坐标值，如果向它原来自己的“中心走”，则都是“正值”，如果向外走(离中心远)，则都是“负值”。
Absolute：绝对定位，相对于祖先的定位元素(相对定位、绝对定位)进行的定位。它会一直往上走定位元素，如果找到，则相对于其进行位置偏移；如果整个上级都没有找到定位元素时，则相对于<body>来定位。
所占的空间消失，不占空间，层级高于普通元素；
绝对定位元素是一个块级框(块元素)，不管原来是什么元素。
本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/201.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
