HTML块级元素和行内元素

根据css规范的规定，每个网页元素都有一个display属性，每一个元素都有默认的display属性值，比如div元素默认属性值为block-“块级元素”，display:block;而span默认元素为inline，称为“行内元素”,display:inline;

1）块级元素address dir div h1~h5 ul li form menu table p...

        a、独占一行空间，默认宽度占满当前屏幕/父元素

        b、可以设置宽高,如果没有设置宽高，则默认铺满整行

        c、可以嵌套其他标签【块级、行内】-->

    <div style="width: 30%;height: 50px;background: red;">abcdefg</div>

    <h1 style="width: 30%;height: 100px;background: blue;">我是一级标题</h1>

 

 ul/ol列表：ul是无序列表，ol是有序列表，列表内容用的都是<li>标签</li> 

    快捷建立方式：ul>li{li$}*3 li1开始到li3结束

    shift+alt+上/下箭头：快速向上/下复制当前行

    <ul>

        <li>li1</li>

        <li>li2</li>

        <li>li3</li>

    </ul>

    <ol>

        <li>li1</li>

        <li>li2</li>

        <li>li3</li>

    </ol>

   

 

p：标签表示段落<p></p>-双标签 br:生成换行符<br/>-单标签 hr:生成一条水平线，主要起装饰作用<hr/>-单标签

可以设置水平线占屏幕的宽度

 标签属性：width-宽度、align-对齐方式、color-颜色、size尺寸大小

<hr width="80%" align="center" color="blue" size="5px">

 

注意：h1 h2 h3 h4 h5 h6 p dt标签可以包含行内元素，不能包含块级元素

 

 2）行内元素span a i b big small font img input label select strong sub sup textarea...

        a、可以与其他元素共享一行空间

        b、不可以设置宽高

        c、不可以嵌套其他块级元素，只能包含行内元素

span标签作用于div一样，用来实现行内布局，不同的是div会单独占一行，而span不会,并且不识别宽高

    <span style="width: 30%;height: 100px;background: blue;">span1</span>

    <span style="width: 30%;height: 100px;background: yellow;">span2</span>

  

 

3）块级标签和行内标签是可以相互转换的

     a.块级标签转换为行级标签

            加上display:inline;块级转换为行级，但是宽高设置会失效

    <div style="width: 30%;height: 50px;background: red;display: inline;">abcdefg</div>

    <h1 style="width: 30%;height: 100px;background: blue;display: inline;">我是一级标题</h1>

 

  b.行级标签转换为块级标签

            加上display:block;行级转换为块级，可以进行宽高设置

    <span style="width: 30%;height: 100px;background: blue;display: block;">span1</span>

    <span style="width: 30%;height: 100px;background: yellow;display: block;">span2</span>

  c.块级元素可以嵌套两个并列的块级元素，或者两个并列的行级元素，但不可以嵌套一个块级元素和一个行级元素并列

    <div><span>span</span><h2>h2</h2></div>-错