zoukankan      html  css  js  c++  java
  • HTML中的span标记和div标记

    HTML中的span标记和div标记

    在使用css排版网页时,span和div常用的两个的标记。利用这个两个标记,加上css样式控制,可以实现很复杂的网页效果,下面为大家详细讲解一下他们区别和使用。

     

    span和div概念区别和相似点

    div标记是html3.0时提出来的,但是不常用,直到css的出现才慢慢变得应用广泛起来。HTML4.0以后span才被引入,主要针对样式表设计的。div与之间可以理解成一个容器,这个容器可以放段落、标题、图片等各种HTML元素。div与之前的内容可看做一个独立内容的对象,对于css的控制。先需要对div控制,再对div中各标记的元素再进行控制。

    span标记与div标记一样,作为容器标记广泛应用在HTML中。span与中间同样可以容纳各种html元素,span与中间也可以视为独立的对象。span和div两个标记都可以独立出区块,这一点没有很大的区别。

    <div th:each="ingredient : ${wrap}">
            <input name="ingredients" type="checkbox" th:value="${ingredient.id}" />
            <span th:text="${ingredient.name}">INGREDIENT</span><br/>
    </div>

    show:

     

    span和div功能区别

    span和div区别在于,div是一个块级元素,它包含的元素会自动换行。而span是行内元素,在它的前后不会换行。span没有结构上的意义,只是单纯的应用样式,其他元素不适合时,就可以使用span元素。span可以作为div的子元素,但div不能是span的子元素,如果出现span中出现div不符合ws3c的页面标准。

     

    span和div使用区别

    span元素宽度是被包围的内容宽度决定,不建议给span设置宽度属性width,可以给span设置margin值,设置与父元素之前的距离。span可以通过css声明(display:block)转换为块元素,想对一行中的文字或图片单独设置样式,而又由不需要换行的条件下又不影响其他行内其他内容,span可以很好解决这些问题。

    每天一个知识点,每日寄语“不论你在什么时候开始,重要的是开始之后就不要停止。”

  • 相关阅读:
    java web分页查询初试
    SQL注入原理深度解析
    JS 清除IE缓存
    Android 代码混淆及第三方jar包不被混淆
    [leetcode]Unique Paths II
    ffmpeg API录制rtsp视频流
    HDU 2045 不容易系列之(3)—— LELE的RPG难题
    Ffmpeg和SDL创建线程(转)
    “富豪相亲大会”究竟迷失了什么?
    Ffmpeg和SDL如何同步视频(转)
  • 原文地址:https://www.cnblogs.com/WLCYSYS/p/14092796.html
Copyright © 2011-2022 走看看