首页 > Web开发 > 详细

CSS的显示模式

时间:2017-11-26 16:35:51      阅读:206      评论:0      收藏:0      [点我收藏+]

div与span

div与span有什么区别
div单独占一行,span不会单独占一行
div是容器级的标签,而span是一个文本级的标签
容器级的标签有:div , h , ul , ol , dl , li ...
文本级的标签有:span , p , buis , del , em , ins ...
容器级的标签中可以嵌套其它所有标签
文本级的标签中只能嵌套文字/图片/超链接

CSS显示模式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5+CSS3</title>
<style>
    * {
        margin:0;
        padding:0;
        font-family: "Microsoft YaHei";
    }
    div {
        display:inline;
    }
    span {
        display:block;
        background:green;
        width:100px;
        height:100px;
    }
    .cc {
        background:blue;
        width:200px;
        height:200px;
        display:inline-block;
    }
</style>
</head>
<body>
<!--
在HTML中所有的标签分为两类:容器级与文本级
在CSS中将所有标签分为两类:块级元素与行内元素
1:什么是块级元素,什么是行内元素?
    块级元素独占一行:div , h , ul , ol , dl , li , dt , dd , p
    块级元素如果没有设置宽度就和父级元素一样宽;如果设置了宽高就和设置的一样宽高
    行内元素不会独占一行:span , buis , strong , em , ins , del
    行内元素如果没有设置宽度默认就和内容一样宽
    行内元素是不可以设置宽度和高度的
2:行内块级元素
    为了能够让元素既能够不独占一行,又可以设置宽度和高度,就出现了行内块级元素
3:显示模式的互相转换
    设置元素的display属性:block 块级, inline 行内, inline-block 行内块级
-->
<div>这是DIV</div>
<div>这是DIV</div>
<span>这是SPAN</span>
<span>这是SPAN</span>
<p class="cc">这是P</p>
<b class="cc">这是B</b>
</body>
</html>

  

CSS的显示模式

原文:http://www.cnblogs.com/ginvip/p/7899203.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!