PHP自学之路-----DIV+CSS(第四天）

来源：互联网发布：淘宝卖家后台怎么进编辑：程序博客网时间：2024/05/22 04:36

浮动

在DIV+CSS中浮动分为左浮动，右浮动，清除浮动

1、右浮动

所谓的右浮动，指一个块元素向右移动，让出自己的空间向右移动知道碰到包含自己的父元素的最右边的边框。如下图所示：

测试代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> 浮动案例 </title>  <link rel="stylesheet" style="text/css" href="float.css"/> </head> <body>    <div class="div1" id="id1">div1</div>    <div class="div1">div2</div>    <div class="div1">div3</div>   </body></html>

.div1{   width:150px;   height:100px;   border:1px solid red;   background:pink;   margin-top:5px;}/*id 选择器*/#id1{   float:right;}

2、左浮动

只需要修改 CSS就可以了

.div1{   width:150px;   height:100px;   border:1px solid red;   background:pink;   margin-top:5px;   float:left;}/*id 选择器*/#id1{   float:right;}

左浮动，就是指某个块元素尽量往左边移动，这样就能让出它右边的空间，让别的块元素来填充！

注意：1、左浮动必须所有块元素都保持一致，否则或出现错误！

2、如果浮动元素的高度不同，那么当它向下进行换行是就会回其他元素卡住。

定位

常用的定位有四种：

1、 static （默认）

2、 relative 相对定位

所谓的性对定位是指，相对该元素应当显示的左上角重新定位，虽然它脱离的标准流，但它的空间，不能被占用！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> 定位 </title>  <link rel="stylesheet" style="text/css" href="pation.css"/> </head> <body> <div class="div1"> 为什么1</div><div class="div1"> 为什么2</div> <div class="div1"> 为什么3</div> <div class="div1"> 为什么4</div> </body></html>

.div1{    width:100px;height:50px;border:2px solid red;background-color:pink;float:left;}/**********相对定位*******************#pace{    position:relative;left:20px;top:100px;}********************************/

3、 Absolute 绝对定位

对该元素最近的那个脱离了标准六的元素定位

如果没有父元素，则相对body左上角定位

代码：

情景1：没有父元素

<body>

<divclass="div1"> 为什么1</div>

<divclass="div1"> 为什么3</div>

<divclass="div1"> 为什么4</div>

<divclass="div2"></div>

<divclass="div1" id="pace"> 为什么2</div>

</body>

情景2 有父元素，父元素未脱离标准流

<body>

<divclass="div1"> 为什么1</div>

<divclass="div1"> 为什么3</div>

<div class="div1">为什么4</div>

<divclass="div2">

<divclass="div1" id="pace"> 为什么2</div>

</div>

</body>

情景1,2 显示是一样的，都是上图：CSS也是一样的如下：

#pace{

/* 绝对定位，究竟对谁？对预算最近的那个脱离了标准流的元素定位*/

position:absolute;

left:20px;/*为正，向右移动*/

top:100px;/*为证，向下移动*/

}

.div2{

width:100px;

height:100px;

border:2px solid red;

background-color:pink;

float:left;

情景3 有父元素，父元素脱离标准流

HTML代码和情景二一样，CSS变动如下：

#pace{

/* 绝对定位，究竟对谁？对预算最近的那个脱离了标准流的元素定位*/

position:absolute;

left:20px;/*为正，向右移动*/

top:100px;/*为证，向下移动*/

}

.div2{

position:relative;

left:20px;

top:100px;

width:100px;

height:100px;

border:2px solid red;

background-color:pink;

float:left;

}

2、 Fixed 固定定位

不管怎样总是以试穿的左上角定位

HTML 使用情景二，CSS如下：

#pace{

/* 绝对定位，究竟对谁？对预算最近的那个脱离了标准流的元素定位*/

position:fixed;

left:20px;/*为正，向右移动*/

top:100px;/*为证，向下移动*/

}

.div2{

position:relative;

left:20px;

top:100px;

width:100px;

height:100px;

border:2px solid red;

background-color:pink;

float:left;

}

显示效果和情景二一样！

PHP自学之路-----DIV+CSS(第四天）

浮动

在DIV+CSS中浮动分为左浮动，右浮动，清除浮动

1、右浮动

所谓的右浮动，指一个块元素向右移动，让出自己的空间向右移动知道碰到包含自己的父元素的最右边的边框。如下图所示：

2、 左浮动

左浮动，就是指某个块元素尽量往左边移动，这样就能让出它右边的空间，让别的块元素来填充！

注意：1、左浮动必须所有块元素都保持一致，否则或出现错误！

定位

2、左浮动