css案例学习之div与span的区别

简介:
+关注继续查看

代码:

复制代码
<html>
<head>
<title>div 标记范例</title>
<style type="text/css">
div.widthstyle{
    font-size:18px;                        /* 字号大小 */
    font-weight:bold;                    /* 字体粗细 */
    font-family:Arial;                    /* 字体 */
    color:#FFFF00;                        /* 颜色 */
    background-color:#0000FF;            /* 背景颜色 */
    text-align:center;                    /* 对齐方式 */
    /*width:300px;*/                        /* 块宽度 默认宽度为一行,两边有点距离*/
    height:100px;                        /* 块高度 */
    margin-top: 10px;
}

span{
    font-size:18px;                        /* 字号大小 */
    font-weight:bold;                    /* 字体粗细 */
    font-family:Arial;                    /* 字体 */
    color:#FFFFFF;                        /* 颜色 */
    background-color:#0000FF;            /* 背景颜色 */
    text-align:center;                    /* 对齐方式 */
    width:300px;                        /* 块宽度 span没有宽度的概念 */
    height:100px;                        /* 块高度 span没有高度的概念*/
    padding-left:10px;
    margin-left:10px;
}
</style>
</head>
<body>
    <div class="widthstyle">
    这是一个div标记1
    </div>
    <div class="widthstyle">
    这是一个div标记2
    </div>
    <div class="widthstyle">
    这是一个div标记3
    </div>
    <span>
    这是一个span标记1
    </span>
    <span>
    这是一个span标记2
    </span>
    <span>
    这是一个span标记3
    </span>
    
    <div>
    <span>
    这是一个div中的span标记1
    </span>
    <span>
    这是一个div中的span标记2
    </span>
    <span>
    这是一个div中的span标记3
    </span>
    </div>

    <div>
    <span>
    这是一个单独div中的span标记1
    </span>
    </div>
    <div>
    <span>
    这是一个单独div中的span标记2
    </span>
    </div>
    <div>
    <span>
    这是一个单独div中的span标记3
    </span>
    </div>
</body>
</html>
复制代码

说明:div默认占据一行,两边有所空隙。可以设置宽度、高度,即使是设置宽度了,div还是占据一行,只是盒子的内容空间小了。

span是行内元素,没有宽度和高度的概念。放在一个单独的div中,才会独自占据一行位置,这个位置也是div争取回来的。



本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/4987496.html,如需转载请自行联系原作者

相关文章
|
1月前
|
前端开发
CSS嵌套与Sass嵌套的区别
CSS 嵌套是指在 CSS 规则中嵌套选择器,以便更清晰地表示元素之间的层次关系。例如,使用 CSS 嵌套可以将子选择器放在父选择器内,使样式规则更具可读性。
|
1月前
|
编解码 前端开发 JavaScript
说说设备像素、css像素、设备独立像素、dpr、ppi之间的区别?
说说设备像素、css像素、设备独立像素、dpr、ppi之间的区别?
|
1月前
|
前端开发 JavaScript
说说react中引入css的方式有哪几种?区别?
说说react中引入css的方式有哪几种?区别?
|
1月前
|
前端开发
css过渡和动画区别?
css过渡和动画区别?
|
1月前
|
前端开发
css中:nth-child()和nth-of-type有何区别详解
css中:nth-child()和nth-of-type有何区别详解
|
1月前
|
编解码 前端开发 JavaScript
设备像素、css像素、设备独立像素、dpr、ppi之间的区别
设备像素、css像素、设备独立像素、dpr、ppi之间的区别
28 0
|
2月前
|
前端开发
css伪类和伪元素的区别
css伪类和伪元素的区别
|
2月前
|
前端开发 JavaScript SEO
b标签和strong标签的区别?css单行或多行溢出隐藏如何实现?浅谈this?
b标签只是文本加粗,而strong除了加粗还有强调的语义。
|
2月前
|
前端开发 JavaScript
link和@import的区别?css塌陷是怎么产生的? var、let、const有什么区别?
var、let、const都可以声明变量,var声明的范围是函数作用域,let和const声明的范围是块级作用域。let和const声明的变量不能在声明之前使用,因为它们有暂时性死区,而var可以。
link和@import的区别?css塌陷是怎么产生的?  var、let、const有什么区别?
|
2月前
|
前端开发 JavaScript Go
script标签中async和defer的作用和区别?简述css盒模型?什么是闭包?
浏览器遇到script标签没有async和defer属性时,页面将会暂停解析来下载并执行script脚本,执行完毕继续解析页面(这样会阻塞页面,所以建议把script标签放在html底部)。
script标签中async和defer的作用和区别?简述css盒模型?什么是闭包?