html中的常用标签和浮动与定位

常用标签

1.列表标签
<!-- 有序列表: 组合标签 双标签 块级 ol li -->
    <ol>
        <li>我是列表项1</li>
        <li>我是列表项2</li>
        <li>我是列表项3</li>
        <li>我是列表项4</li>
        <li>我是列表项5</li>
    </ol>
    <!-- 无序列表: 组合标签 双标签 块级 ul li -->
    <ul>
        <li>我是列表项1</li>
        <li>我是列表项2</li>
        <li>我是列表项3</li>
        <li>我是列表项4</li>
        <li>我是列表项5</li>
    </ul>
    <!-- 自定义列表: 字典列表 双标签 块级 dl dt dd -->
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
2.图片标签
<!-- 图片标签 单标签 比较特殊，可以设置尺寸，有行级标签的特点。 -->
    <!-- src="" 指定引入的图片的地址 -->
    <!-- alt="" 图片内容的描述 必须的 描述的准确-->
    <img src="large/a.jpg" alt="图片a"/>
    <img src="large/b.jpg" alt="图片b"/>
3.标题标签
<!-- 标题标签是 h1~h6 双标签 块级标签 -->
    <!-- h1 最好只出现一次 用于网页的logo部分 -->
    <!-- h2 常用于二级标题 也就是子模块的标题部分 -->
    <!-- h4~h6不常用到 -->
    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>
4.段落标签
<!-- 段落 p 双标签 块级 -->
    <!-- p标签不可以嵌套div 最好不嵌套其他的块级标签 -->
    <p>我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>
5.超链接标签
<!-- 超链接 a 双标签 行级 -->
    <!-- href="" 指定标签跳转的地址 -->
    <!-- target="_blank | _self" 指定链接跳转的方式 -->
    <!-- a标签的四种状态 -->
    <!-- 默认状态:link-->
    <!-- 访问过的状态:visited -->
    <!-- 悬浮的状态:hover -->
    <!-- 点击按住没有松开的状态:active -->
    <a href="http://www.163.com/" target="_blank">点我去百度</a>
    <a class="test" href="###">我是超级链接标签</a>
    <a href="###">我是超级链接标签</a>

浮动

<!-- 浮动布局 float:left | right | none -->
    <!-- 清除浮动 clear:left | right | both -->
    <!-- clear的使用要点1：只能清除同级标签的浮动影响 -->
    <!-- clear的使用要点2：只能清除既是同级又在它上面的标签的浮动影响 -->

    <!-- <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div> -->

    <!-- 浮动会造成的问题 -->
    <!-- 1：父级元素没有设置高度的情况下，会造成高度"塌陷" --> 

<!--    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clear"></div>
        <div class="content"></div>
    </div> -->

定位

1.关键字:position
  默认的情况下 是不定位
  文档流:  标签在浏览器里面按照特性 从上到下 从左到右排列的一个顺序 
  脱离文档流: 让元素在文档流里面飞起来 不在占用原来的空间 -->
  .redDiv{
    /*默认值: 不定位*/
    /*position: static;*/
    /*相对定位 相对于自身的位置去移动
        不脱离文档流 还占用原来的位置
    */
    position: relative;
    /*只有定位的元素才能使用: left top bottom right*/
    /*left: 10px;
    top: 10px;*/
    background-color: red;
}
2.相对定位与绝对定位
.blueDiv{
    background-color: blue;
    /*绝对定位 相对于定位父级去定位
      如果父级只是作为定位父级使用 只需要使用relative即可*/
    /*position: relative;*/
}
.greenDiv{
    /*绝对定位 相对于带有position属性的父级定位
    如果父级没有position属性,就去找父级 直到html 
    如果html也没有position就相对于窗口定位
     绝对定位脱离文档流*/
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 50px;
    height: 50px;
    background-color: green;
    /*对于定位的元素才可以使用 z-index
    z-index值越大,位置越靠前
    z-index可以是负值 负值的情况下比正常元素靠后
    z-index > 浮动 > 正常的元素*/
    z-index: 1;
}
3.固定定位
.ad{
    width: 100px;
    height: 380px;
    background-color: gray;
    color: white;
    font-size: 20px;
    /*固定定位 相对于窗口的位置始终不变
    left 0; 设置元素在距离窗口左边为0的地方
    bottom 0; 设置元素在距离窗口下边为0的地方
    会脱离文档流*/
    position: fixed;
    right: 20px;
    top: 50%;
    margin-top: -190px;
}