块级元素和行内元素以及转换

    <!-- 标准文档流里面等级森严 标签分为块级元素和行内元素
    块级元素：霸占一行，不能与其他任何元素并列，能接受宽高，如果不设置将默认为父亲的100%
    行内元素：与其他行内元素并排，不能设置宽高，默认的宽度就是文本的宽度 -->
    <!-- 在html中 将标签分为文本级和容器级
    文本级：p span a b i u em
    容器级：div h系列 ul li dt dd 等 -->
    <!-- css里面分类和上面的差不多 基本上所有的文本级标签都是行内元素 除了p
    所有的容器级标签都是块级元素 
 -->    
    <style type="text/css" media="screen">
    /*块级元素和行内元素可以互相转换*/
    /*块级元素转换成行内元素*/
    div{
        display: inline;
        background-color: pink;
        width: 500px;
        height: 500px;
    }
    h1{
        display: inline;
        background-color: green;
        font-size:20px;
    } /*display 显示模式 用来改变元素的行内，块级性质 一旦给标签设置diplay：inline  inline就是行内的意思
    那么这个标签将变为行内元素和span无异 此时该不能设置宽高 可以和其他行内标签并排*/

    /*行内元素转换成块级元素*/
     span{
         display: block;
         width: 200px;
         height:200px;
         background-color: blue;
         font-size: 40px;
     }/*display:block; 让标签变为块级元素 此时标签和一个div无异  block 转头 表示块级元素
     能够设置宽高 必须霸占一行 如果不设置宽度 将撑满父亲元素*/

    /*标准流里面限制很多  css有三种方法脱离标准文档流
    ①浮动   ②绝对定位  ③固定定位*/
    </style>
</head>
<body>
    <div>我是一个div</div>
    <div>我是一个div</div>
    <h1>我</h1><h1>是</h1><h1>h</h1><h1>1</h1>
    <span>我是一个span</span> 
    <span>我是一个span</span>
</body>
相关博客

最热博客
