这篇文章主要介绍“div与span怎么使用”,在日常操作中,相信很多人在div与span怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”div与span怎么使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
我们提供的服务有:成都做网站、网站建设、微信公众号开发、网站优化、网站认证、莱州ssl等。为上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的莱州网站制作公司
DIV标记的基本用法、常用属性。
DIV嵌套与层叠的含义。
SPAN标记的语法,灵活使用SPAN标记。
DIV与SPAN标记在使用上的差异。DIV用于多行的、大片区的;SPAN用于行内标记。
使用DIV+CSS进行和简易页面布局。
块级元素(block level element)在浏览器显示时通常会以新行开始。
例如:
、
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.
111112222testhello
注意:搞清楚margin、padding、border这三个概念,不能混淆。
padding:容器内部的内容(content)与容器边框的距离。
另外:top表示上、bottom表示下、left表示左、right表示右。
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.
DIV嵌套与层叠 使用DIV+CSS进行和简易页面布局
+ 这是第二个块在使用相对定位左边偏移50像素和上边偏移30像素后的结果。请注意:它有部分内容与第三个块重叠了,但它位于文档流中的初始位置仍然还在占着(虚线框标示的地方),即使把偏移量设得再大它的初始位置也不会被第三个块填补。同时它的偏移位置也不会把别的块在文档流的位置挤开,如果有重叠它会和其他元素重叠。
+ 下图中的第二个块是使用了绝对定位时的样式。
div标记是块标记,一般包含较大范围,在区域的前后会自动换行;span标记是行内标记,一般包含范围较窄,通常在一行内,在此区域的范围外不会自动换行。
但是块标记和行标记不是绝对的,可以通过定义CSS的display属性来相互转换。
div的使用
标签 | 用途 |
---|---|
header | 定义文档或节的页眉 |
nav | 定义导航链接的容器 |
section | 定义文档中的节 |
article | 定义独立的自包含文章 |
aside | 定义内容之外的内容(比如侧栏) |
footer | 定义文档或节的页脚 |
details | 定义额外的细节 |
summary | 定义details元素的标题 |
使用 HTML5 的网站布局 City Gallery
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.
对于HTML等文档类型,如果使用display不谨慎会很危险,因为可能违反HTML中已经定义的显示层次结构。
属性 | 用途 |
---|---|
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素,前后有换行。 |
inline | 默认,此元素会被显示为内联元素,前后没有换行。 |
inherit | 继承父元素的display属性值。 |