美文网首页
iOS开发html+css学习之块元素和内联元素

iOS开发html+css学习之块元素和内联元素

作者: 程序大猩猩 | 来源:发表于2019-03-13 15:27 被阅读0次

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>

    </title>
</head>

<body>

    div就是一个块元素,
        所谓的块元素就是会独占一行的元素,无论他的内容有多少,他都会独占一整行。
        p h1 h2 h3 ...
        div 这个标签没有任何语义,就是一个纯粹的块元素,并且不会为它里边的元素设置任何的默认样式
        div 元素主要用来对页面进行布局的

    span是一个内联元素(行内元素)
        所谓的行内元素,指的是只占自身大小的元素,不会占用一行
        a img iframe span
        span没有任何的语义,span标签专门用来选中文字,然后为文字设置样式

    块元素主要用来做页面的布局,内联元素主要用来选中文本设置样式,一般情况下只使用块元素去包含内联元素,而不会使用内联元素去包含一个块元素
        a元素可以包含任意元素,出了他本身
        p元素不能包含其他的块元素
-->


<!-- 这是错误的方式,浏览器会自动重新解析 
<a href=""></a>
<a href="">我是一个超链接</a>
-->
<a href=""><a href="">我是一个超链接</a></a>

<a href="">
        <div style="background-color:red; width: 200px;">
                我是一个div
            </div>
</a>

<!-- 这是错误的方式

<p></p>
<div>我是一个块元素</div>
<p></p>

-->
<p><div>我是一个块元素</div></p>

<div style="background-color:yellow; width: 200px;">
    我是一个div
</div>

<p>我是一个p标签</p>
<p>我是一个p标签</p>

<hr />

<span>我是一个span</span><span>我是一个span</span><span>我是一个span</span><span>我是一个span</span>

</body>
</html>

相关文章

网友评论

      本文标题:iOS开发html+css学习之块元素和内联元素

      本文链接:https://www.haomeiwen.com/subject/myftmqtx.html