我的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

本文来自投稿,不代表科技代码立场,如若转载,请注明出处https://www.cwhello.com/201.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
上一篇 2015年10月14日 10:38
下一篇 2015年10月23日 09:43

相关推荐

  • 第六章——css部分:基本属性与CSS

    一、标签属性与样式 1、网页内容根据想要在作用选择对应在标签 2、找到对应在标签,敲空格看提示,选择对应在单词(或style)来描述该标签。 直接能够敲的出来我们成为属性(attribute),类似于字体在color等。 ...

    2017年5月22日
    0422
  • 我的php学习第五天之css篇

    昨日回顾 表单 主要功能:收集客户的信息。 表单的开发分两个部分:前台静态页面制作、后台PHP程序来处理。 <form name= “form1”action=“register.php”method=“GET” enctype=“application/x-www-form-urlencod...

    2015年10月14日 css自学教程
    0355
  • 我的php学习第六天之css篇

    昨日回顾 CSS的介绍 CSS,Cascading Style Sheets层叠样式表。 一个网页由三个部分:结构、表现、行为,对应的标准是:XHTML、CSS、JavaScript。 这三个标准语言,是浏览器直接可以识别的,并且能直接进行解释(翻...

    2015年10月14日 css自学教程
    0301

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息