div与span怎么使用

这篇文章主要介绍“div与span怎么使用”，在日常操作中，相信很多人在div与span怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”div与span怎么使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

我们提供的服务有：成都做网站、网站建设、微信公众号开发、网站优化、网站认证、莱州ssl等。为上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的莱州网站制作公司

内容提要

DIV标记的基本用法、常用属性。
DIV嵌套与层叠的含义。
SPAN标记的语法，灵活使用SPAN标记。
DIV与SPAN标记在使用上的差异。DIV用于多行的、大片区的；SPAN用于行内标记。
使用DIV+CSS进行和简易页面布局。

HTML块级元素

块级元素(block level element)在浏览器显示时通常会以新行开始。

例如：

、

HTML内联元素

内联元素(inline element)在浏览器显示时通常不以新行开始。
例如：、、、

案例1：





	div元素是块级元素 
	




	
		London
		
			London is the capital city of England.
			It is the most populous city in the United Kingdom,
			with a metropolitan area of over 13 million inhabitants.
		
		
		
		11111
		2222

		
		

		test
		hello

注意：搞清楚margin、padding、border这三个概念，不能混淆。

margin：容器自身与其他容器之间的距离

padding：容器内部的内容(content)与容器边框的距离。

border：容器的边框。

另外：top表示上、bottom表示下、left表示左、right表示右。

案例2：





    div元素没有特定的含义
    



    重点： div使用 span使用对比
    
        London
        London is the capital city of England.
            It is the most populous city in the United Kingdom,
            with a metropolitan area of over 13 million inhabitants.
    

    
        Paris
        Paris is the capital and most populous city of France.
    

    
        Tokyo
        Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
            and the most populous metropolitan area in the world.

讲解：

在这个案例中通过合理设置margin和padding，使得不同的div之间有合理的间距，div内部文本也有恰当的间距。
注意span标记的用法，它是对指定内容做特殊处理用的。在上述案例中对"div使用"改变了字体颜色。

案例3：





	
	DIV嵌套与层叠
	



	
		使用DIV+CSS进行和简易页面布局

讲解：

在.div1中定义了padding内部边距为50像素、background背景色为红色、width容器宽度为400像素、height容器高度为400像素、position定位类型为relative相对定位(相对定位会按照元素的原始位置对该元素进行移动)、left为容器左边坐标是10像素、top为容器上边坐标是10像素。
在.div2中定义了padding内部边距位60像素、background背景色为绿色、position定位类型为absolute绝对定位(绝对定位会按照页面的绝对位置定位元素，通过绝对定位可以将指定元素放置在页面上指定位置)，left为容器左边坐标是0像素、top为容器上边坐标是0像素。
postion定位类型有三种：

关注第二个块，这是正常状态或者说是相对定位水平及垂直偏移量为0时的初始位置：

position:relative;相对定位：对某元素设置了相对定位，那么首先这个元素会出现在文档流中该出现的位置，然后再根据该位置按设定的偏移量进行移动。

+ 这是第二个块在使用相对定位左边偏移50像素和上边偏移30像素后的结果。请注意：它有部分内容与第三个块重叠了，但它位于文档流中的初始位置仍然还在占着(虚线框标示的地方)，即使把偏移量设得再大它的初始位置也不会被第三个块填补。同时它的偏移位置也不会把别的块在文档流的位置挤开，如果有重叠它会和其他元素重叠。

position:absolute;绝对定位：相对于页面的绝对值来对元素进行定位。

下图中第二个块是未使用绝对定位时的样式。
使用了绝对定位的元素会脱离文档流，即它原来的位置会被其他元素占用，而且它会和其他元素重叠。
案例：
要使用绝对定位时，必须要有2个条件(口诀：父相子绝)：

必须给父元素(也可以是祖父级、曾祖父级)增加定位属性，一般建议使用position:relative。
给子元素加绝对定位position:absolute，同时指定left、right、top、bottom属性。

+ 下图中的第二个块是使用了绝对定位时的样式。

position:fixed;固定定位：将元素放置在浏览器窗口的固定位置，即使窗口滚动它也不会移动。

Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素会和其他元素重叠。

position:fstatic;静态定位：HTML元素的默认值，即没有定位，遵循正常的文档流对象。另外静态定位的元素不会受到 top、bottom、left、right影响。





	
	图层的嵌套
	
		.inline_div {
			display: inline-block;
			/* 行内显示方式*/
		}

		#wrap {
			width: 450px;
			height: 250px;
			border: 2px solid black;
		}

		#d1{
			height: 100px;
			width: 225px;
			background-color: green;
			margin: 20px red;
			float: left;
			/*margin表示边距*/
		}
		#d2 {
			height: 100px;
			width: 225px;
			background-color: green;
			margin: 20px red;
			float: left;
			/*margin表示边距*/
		}

		#d2 {
			background-color: yellow;
		}

		#d3 {
			height: 80px;
			width: 400;
			border: 2px solid black;
			background-color: #66ff33;
			margin: 0 auto;
			clear: both;
		}

		h4 {
		
			font-size: 28px;
			color: #0033ff;
		}
	



	图层嵌套的应用
	
		图层包含其它图层，称为图层的嵌套。
		
		图层嵌套经常需要与CSS样式一起使用
		使用DIV+CSS进行和简易页面布局

案例2，图层重叠：





	
	图层重叠
	
		body {
			margin: 0;
			/*margin表示边距*/
		}

		div {

			position: absolute;
			/* 定位方式为绝对定位 */
			width: 200px;
			height: 200px;
		}

		#d1 {
			background-color: black;
			color: white;
			/* z-index:图层层叠，子层永远在父层之上，值越大越在上层,前提条件是position属性值为“absolute”。 */

			z-index: 0;
			/* 该图层在最下面 */
		}

		#d2 {
			background-color: red;
			top: 25px;
			left: 50px;
			z-index: 1;
			/* 该图层在中间 */
		}

		#d3 {
			background-color: yellow;
			top: 50px;
			left: 100px;
			z-index: 2;
			/* 该图层在最上面 */
		}
	



	div1
	div2
	div3

div标记与span标记使用区别

div标记和span标记默认情况下都没有对标记内的内容进行格式化或渲染，只有使用CSS来定义相应的样式才会显示出不同。
div标记是块标记，一般包含较大范围，在区域的前后会自动换行；span标记是行内标记，一般包含范围较窄，通常在一行内，在此区域的范围外不会自动换行。
一般来说，div标记可以包含span标记，但span标记不能包含div标记。

但是块标记和行标记不是绝对的，可以通过定义CSS的display属性来相互转换。

案例：





	
	div的使用
	
		div {
			background-color: #f6f6f6;
			color: #000000;
			height: 2em;
			margin: 2px;
			/*margin表示边距*/
		}

		.inline_disp {
			display: inline;
			/*改变div显示方式*/
		}

		.block_disp {
			display: block;
			/*改变span显示方式*/
			height: 4em;
			background-color: rgb(200, 200, 200);
			margin: 2px;
			/*margin表示边距*/
		}
	



	这是div1
	这是div2
	这是span1
	这是span2
	这是div3
	这是div4
	这是span3，在使用CSS排版的页面中，div标记和span标记是两个常用的标记。利用这两个标记，加上CSS对其样式的控制，可以很方便的实现各种效果。
	这是span4，在使用CSS排版的页面中，div标记和span标记是两个常用的标记。利用这两个标记，加上CSS对其样式的控制，可以很方便的实现各种效果。

display:inline;指定元素显示在行内。
display:block;指定元素显示在块内。

使用
元素的HTML布局

元素常用作布局工具，因为能够轻松地通过CSS对其进行定位。

案例：





	
	图层重叠
	
		body {
			margin: 0;
			/*margin表示边距*/
		}

		div {

			position: absolute;
			/* 定位方式为绝对定位 */
			width: 200px;
			height: 200px;
		}

		#d1 {
			background-color: black;
			color: white;
			/* z-index:图层层叠，子层永远在父层之上，值越大越在上层,前提条件是position属性值为“absolute”。 */

			z-index: 0;
			/* 该图层在最下面 */
		}

		#d2 {
			background-color: red;
			top: 25px;
			left: 50px;
			z-index: 1;
			/* 该图层在中间 */
		}

		#d3 {
			background-color: yellow;
			top: 50px;
			left: 100px;
			z-index: 2;
			/* 该图层在最上面 */
		}
	



	div1
	div2
	div3

使用HTML5的网站布局

HTML5提供的新语义元素定义了网页的不同部分：

标签	用途
header	定义文档或节的页眉
nav	定义导航链接的容器
section	定义文档中的节
article	定义独立的自包含文章
aside	定义内容之外的内容(比如侧栏)
footer	定义文档或节的页脚
details	定义额外的细节
summary	定义details元素的标题

使用
、
、
以及
来创建多列布局。

案例：





     使用 HTML5 的网站布局
    




    
        City Gallery
    

    
        London

        Paris

        Tokyo

    

    
        London
        
            London is the capital city of England. It is the most populous city in the United Kingdom,
            with a metropolitan area of over 13 million inhabitants.
        
        
            Standing on the River Thames, London has been a major settlement for two millennia,
            its history going back to its founding by the Romans, who named it Londinium.
        
    

    
        Copyright W3Schools.com

CSS的display属性

display：规定元素应该生成的显示框类型。

对于HTML等文档类型，如果使用display不谨慎会很危险，因为可能违反HTML中已经定义的显示层次结构。

属性	用途
none	此元素不会被显示。
block	此元素将显示为块级元素，前后有换行。
inline	默认，此元素会被显示为内联元素，前后没有换行。
inherit	继承父元素的display属性值。

到此，关于“div与span怎么使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

本文名称：div与span怎么使用
分享网址：http://lszwz.com/article/ieidse.html

其他资讯

如何在Vue项目中对compile进行操作-创新互联
冒泡排序算法的实现和优化~-创新互联
利用Vue3如何实现一个响应式侦听与计算功能-创新互联
连接打印机遇到“你可能没有权限使用网络资源”的解决办法-创新互联
sshd如何在docker中开启-创新互联

乐山网站建设

div与span怎么使用

内容提要

HTML块级元素

HTML内联元素

HTML
元素

London

重点： div使用 span使用对比

London

Paris

Tokyo

HTML元素

与区别

div图层

图层CSS属性

图层嵌套与重叠

图层嵌套的应用

div标记与span标记使用区别

使用
元素的HTML布局

使用HTML5的网站布局

City Gallery

London

CSS的display属性

其他资讯

联系我们

135-1821-9792

028-86922220

快捷导航

二维码

友情链接交换友情链接

乐山网站建设

div与span怎么使用

内容提要

HTML块级元素

HTML内联元素

London

重点： div使用 span使用对比

London

Paris

Tokyo

图层嵌套的应用

London

其他资讯

联系我们

快捷导航

二维码

友情链接 交换友情链接

友情链接交换友情链接