CSS+div美化和布局

1、<div>标记与<span>标记

            <div>(division)是一个区块容器标记 ,即<div>与</div>之间可以容纳段落,标题、表格、图片、乃至章节、摘要等各种HTML元素。

        因此可以把<div>与</div>的内容视为一个独立对象,用于CSS控制。

            <span>作为容器标记来讲,与<div>区别不大;二者作用都是独立出各个区块。

              区别:<div>是一个块级元素,包围的元素会自动换行;

                         <span>是行内元素,不换行,没有结构上的意义,纯粹是应用样式。

<body>
 

            <p>div标记不同行</p>
            <div><img src="jpg1"></div>
             <div><img src="jpg2"></div>
                                          //两张图片自动换行
             <p>div标记不同行</p>
             <span><img src="jpg1"></span>
             <span><img src="jpg2"></span>
                                         //两张图片在同一行
</body>

                         此外,<div>可以包含<span>,反之则不行。

                                    <div>用于大区块;

                                     <span>用于需要单独设置样式的小元素,eg:一个单词、图片、超链接等。



2、盒子模型

           盒子模型是CSS控制页面时一个重要概念。只有很好的掌握盒子模型以及每个元素的用法,才能真正地控制页面中各元素的位置。

           所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间。 

                                                                                          

                                                               盒子的实际宽度(或高度)= content+border+padding+margin


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值