盒子的显示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>显示模式</title>
        <style>
            div{
                background-color: pink;
                width:200px;
                height:400px;
                margin:auto;
            }
            span{
                width:200px;
                height:400px;
                background-color: pink;
                /* margin: auto; */
                
            }
        </style>
    </head>
    <body>
        <!-- 
         显示模式:
        1.块元素
          比较霸道,单独占一行
          默认宽度和父盒子一样宽
          可以给盒子设置宽和高
          可以给盒子设置水平居中
          块元素中可以包含行内元素和块元素
          div,p,h1~h6,ol,ul,li,dl,dd,dt
          不能装文本
        2.行内元素
          一行显示多个
          默认宽度和内容一样宽
          不能给盒子设置宽和高
          不能给盒子设置水平居中
          span,del,a
          只能装文本或其他行内元素
          针对连接标签:
             >链接里面不要再放链接
             >特殊情况下可以给a标签设置宽高,并包含块元素,但需要做显示模式的转换
        3.行内块元素inlink_block
          一行显示多个
          可以给元素设置宽和高
          input,img,td
        4.元素显示模式的转换
        display:block;   转化成块元素
         -->
        <div>hello div</div>    <!--块元素-->
        <p class="ys">段落标签</p>
        <h4 class="ys">4级标签</h4>
        <span>文本</span><del>删除线</del>    <!--行内元素-->
    </body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值