行块级元素

行块级元素

• 块级元素 block
  例如：div, p, h1~h6, li

  • 独占一行
  • 宽度默认与浏览器一致
  • 高度默认与内容一致
  • 宽高, 行高, 内外边距可以手动控制
  • 容纳性: 任何元素

• 行级元素 inline
  例如：b，i，u，span，del，strong

  • 同在一行
  • 宽度默认与内容一致
  • 高度默认与内容一致
  • 行高, 内外的左右边距可以手动控制
    宽度,内外上下无法控制
  • 容纳性: 行级元素

<style>
        b, div{  
            border: 1px solid red;
            width: 300px;
            height: 100px;
            /* line-height: 100px; */
        }
        .small{
            width: 100px;
            height: 50px;
            background: pink;
        }
</style>

老母鸡
    <b>小母鸡<div class="small">hello</div><i>hi</i></b>
    <p>黑母鸡<br>嘿嘿嘿</p>
    <div>铁公鸡<div class="small">块级元素</div></div>