学习布局（7）模块布局--选择标签

<!-- 无序列表 -->
<ul>
    <li>无序列表项01</li>
    <li>无序列表项02</li>
    <li>无序列表项03</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>有序列表项01</li>
    <li>有序列表项02</li>
    <li>有序列表项03</li>
</ol>

<!-- 自定义列表 -->
<dl>
    <dt>自定义标题</dt>
    <dd>自定义列表内容</dd>
    <dd>
        <div>自定义列表内容中可以嵌套其他的元素</div>
    </dd>
</dl>

行内标签 ：

<div>
    <span>span没有任何特殊意义,默认没有特殊样式 | </span>
    <em>em,表示强调，默认有倾斜的效果  | </em>
    <strong>strong,表示强调, 有加粗的效果  | </strong>
    <var>var表示变量, 默认有倾斜效果 </var>
</div>

display显示属性 ：

• none: 此元素不会被显示

• block: 块级元素，前后都会带有换行符

• inline: 内联元素，元素前后都没有换行符

• inline-block: 行内块元素

• inherit: 从父元素继承display属性的值

块元素:

 

•  默认占用父级的一行, 不能与其他元素处于同一行 
• 能够设置宽高 
• 外边距设置生效

常见块元素： 

• 网页、框架基本结构块: html body iframe
• 网页标题块: title
• 表单结构块: form fieldset legend
• 布局结构： div
• 标题段落: h1~ h6 p
• 列表结构： dl dt dd ul ol
• 结构装饰: hr

行元素：

1. 默认由内容撑高，与其他元素可以处于同一行
2. 不能设置宽高
3. 纵向外边距失效，横向外边距生效

常见行元素： 

 

•  span
• 超链接: a
• 图像: img

 各类元素可以使用display属性进行元素类型的转换

行元素 -----》 块元素
       display:block   进行转换
 块元素 ----》 行元素
       display: inline  进行转换

 display: none 和 visibility: hidden

      display:none和visibility:hidden都能实现元素的隐藏。所不同的是display:none的元素不会占用任何的物理空间,而设置visibility:hidden的元素，虽然视觉上隐藏，但会占据物理空间。

  

    <style>
        div {
            width: 200px;
            height: 50px;
            border: 1px solid black;
        }
        .dis {
            display: none;
        }
        .hide {
            visibility: hidden;
        }
    </style>

<div class="dis">第一个设置了display:none</div>
<div>第二个div</div>
<div class="hide">第三个div,设置了visibility:hidden</div>
<div>第四个div</div>

 标签嵌套的基本规则：

块元素可以包含块元素和行元素
标题、段落的块元素不能够包含块元素
dl下只能直接包含dt和dd元素
ul ol 只能直接包含li元素
table只能直接包含caption thead tbody col
thead tbody 直接包含tr tr下可以是th td
直接包含: 表示两种标签为父子级关系