FavoriteLoading
0

我的php学习第七天之css篇

昨日回顾

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>

实例:学生感言

image001

image003

 

CSS显示属性

Display:设置元素的显示方式,取值:none(隐藏)、block(块显示)、inline(行内元素显示)

 

CSS定位属性

position:定位的类型,取值:static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定)

left:定位元素距离左边的距离

right:定位元素距离右边的距离

top:定位元素距离顶边的距离

bottom:定位元素距离底边的距离

 

static:静态定位,普通文档流中的元素默认就是static定位;

fixed:固定定位,相对于当前浏览器窗口来进行的定位。

固定定位元素不再占用空间(跟浮动很像似),层级高于普通元素

固定定位元素是一个块元素,不管原来它是什么元素;

Relative:相对定位,相对于“原来的自己”进行的定位。

它所占的空间依然保留,层级会高于普通元素。

 

当fixed、relative、absolute三个定位元素,没有指定“定位坐标”时,它们还停留在原地。

四个坐标值,如果向它原来自己的“中心走”,则都是“正值”,如果向外走(离中心远),则都是“负值”。

 

Absolute:绝对定位,相对于祖先的定位元素(相对定位、绝对定位)进行的定位。它会一直往上走定位元素,如果找到,则相对于其进行位置偏移;如果整个上级都没有找到定位元素时,则相对于<body>来定位。

所占的空间消失,不占空间,层级高于普通元素;

绝对定位元素是一个块级框(块元素),不管原来是什么元素。

image005

欢迎分享本文,转载请保留出处!—重蔚自留地 站长邮箱:951076433@qq.com