DIV+css布局

科技2022-09-03 127

DIV是块级元素；（块级元素是占用整个一行）span是内联元素；（内联元素是占用文本所需的一块)

具体效果如图所示：

盒模型：margin（盒子外边框） border（盒子边框）padding（盒子内边框）

盒模型主要用来控制各边框以及各块之间的布局

布局相关属性：

定位方式：1，relative 正常定位 2，adsolute 根据父元素进行定位 3，fixed 根据浏览窗口进行定位 4，static 没有定位 5.inherit 继承。

adsolute根据父元素进行定位

具体代码如下所示：

效果如下图所示；

fixed 根据浏览窗口进行定位

具体代码如图所示;

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>div+css布局</title> <style type="text/css"> body{ padding:0; margin:0; } .diva{ width:300px; height:300px; background-color: green; position: relative; top: 10px;left:10px; } span{ position: absolute; background-color:red; color: white; top: 30px; left: 10px; } .fixed{ position: absolute; background-color:red; color: white; top: 100px; left: 0px; } </style> </head> <body> <div class="diva"></div> <span> 浏览次数555</span>  <div class="fixed">  <p>联系电话：18740503137</p> <p>联系QQ：2464186900</p> <p>联系地址：陕西咸阳</p> </div> </body> </html>

运行效果如图所示：

4，static 没有定位

具体代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>div+css布局</title> <style type="text/css"> body{ padding:0; margin:0; } .diva{ width:300px; height:300px; background-color: green; position: relative; top: 10px;left:10px; } span{ position: absolute; background-color:red; color: white; top: 30px; left: 10px; } .fixed{ position: static; background-color:red; color: white; top: 100px; left: 0px; } </style> </head> <body> <div class="diva"></div> <span> 浏览次数555</span>  <div class="fixed">  <p>联系电话：18740503137</p> <p>联系QQ：2464186900</p> <p>联系地址：陕西咸阳</p> </div> </body> </html>

运行结果如图所示：

z-index:属性值（1，2，3，4）设置优先级

display: block; 块状显示

display: inline; 内联显示

Processed: 0.008, SQL: 10