CSS+DIV 盒子模型

最新推荐文章于 2023-03-20 20:40:27 发布

Lionel Crazy

最新推荐文章于 2023-03-20 20:40:27 发布

阅读量686

点赞数

分类专栏： ※HTML※

※HTML※ 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、DIV 和 SPAN 标记的区别
DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样

式表。两者最明显的区别在于DIV是块元素，而SPAN是行内元素(也译作内嵌元素)。
　　具体步骤：
　　1.所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行，测试一下下面的代

码你会有更形象的理解：
　　测试＜span>紧跟前面的"测试"显示＜/span>＜div>这里会另起一行显示，还可以有其他标记

＜/div>

　　2.块元素和行内元素也不是一成不变的，通过定义CSS的display属性值可以互相转化，如：
　　测试＜div style="display:inline">紧跟前面的"测试"显示＜/div>＜span style="display:block">

这里会另起一行显示＜/span>
　　提示：如果不对DIV元素定义任何CSS属性，其显示效果将行将于P元素。

二、盒子模型
盒子模型的组成部分：content (内容)、padding (间隙)、border(边框)、margin(间隔)。如图所示：

打个比方：相框，或者说是盒子，都有一些参数：比如相框中相片的所占空间（content）、相片

与相框的距离
(padding)、相框本身的宽度(border)、墙上两个相框之间的距离(margin).这下大家应该比较熟悉了

吧！！
小结一下：盒子模型的的高度（即相框模型的宽度）=content+padding+border+margin;
这几个参数可是说是“盒子模型”的基本属性名，我们可以通过css技术给这些属性定义不同的属性

值，就可以达到丰富
的效果了！
content作为网页内容，是由height、width等属性值对内容单独定义的。作为框架部分，下面列举

padding、border、
margin的部分常用属性，以做参考：
padding padding-Bottom padding-left padding-right padding-Top
border border-bottom border-bottom-color border-bottom-style border-bottom-

width 等等
margin margin-bottom margin-left margin-right margin-top
CSS盒子模型结构的实例剖析
网页“盒子模型”代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" c />
<title>酷扑工作室--CSS盒子模型结构的实例剖析</title>
<style type="text/css">

</style>
</head>
<body>
<div id="box">酷扑工作室--CSS盒子模型结构的实例剖析</div>
</body>
</html>
意：关于元素的宽度，元素之间并列间距的计算，大家在网页布局时一定注意。
注意：1、因为不同的浏览器对css的支持不同，一般话两个元素之间的间距或者说是距离大小，

并不是两个元素的margin相加，而是取较大的那个margin值！
2、当将margin设为负数时，会使得被设为负数的块向相反的方向移动，甚至覆盖在另外的

块上。
三、元素的定位
1、float定位向左右浮动。
2、clear清除浮动
3、position定位
　position定位与float一样，也是CSS排版中非常重要的概念，position从字面意思上看就是指定块

的位置，即块相对于其父块的位置和相对于它自身应该在的位置。
　　 position属性一共有4个值，分别为static（静态的），absolute（绝对的），relative（相对的

）和fixed（固定的）。其中static为默认值，它表示块保持在原本应该在的位置上，即该值没有任

何移动的效果。下面先来介绍absolute，它表示绝对位置。

四、自动选择CSS样式代码
<head>
<title>自动刷新CSS样式变</title>
<script language="javascript">
var number = new Date.getSeconds()%3 +1; //随机数，从1到3
//随机数选择CSS外部文件
document.write('<link href="0' + number.toString() + '/0' +number.toString() + '.css"

rel="stylesheet" type="text/css"');
</script>
</head>

Lionel Crazy

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS+DIV 盒子模型

一、DIV 和 SPAN 标记的区别DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样式表。两者最明显的区别在于DIV是块元素，而SPAN是行内元素(也译作内嵌元素)。　　具体步骤：　　1.所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行，测试一下下面的代码你会有更形象的理解：　　测试＜span>紧跟
复制链接

扫一扫