CSS学习二：标签分类

标签分类：

标签从表面上，分为单标签和双标签，单标签功能单一，不能嵌套；双标签功能多样化，可以嵌套。

标签从样式上来划分，划分为：

  • 块级元素：block-level elements。
  • 内联元素：也叫行内元素，inline elements
  • 内联块级元素：inline-block

块级元素的特征：

  • 默认情况下都会独占一行，即自动换行，两个相邻的块状元素不会出现并列显示的现象。默认情况下，块状元素会按顺序自上而下排列。
  • 在网页中以块的形式显示（显示为矩形区域）。如p标签、h标签、div、dl、dt、dd、ol、ul、li、fieldset、form、hr、colgroup、col、table、tr、td等标签。
  • 块状元素，都可以定义自己的宽度和高度，不设置宽度的时侯，默认与父级元素一样宽。
  • 块状元素，一般都是作为其它元素的容器，就像一个盒子一样，它可以容纳其它内联元素和其它块状元素。

 

div为最常用的结构元素，常用于分割页面区域，以及功能模块。

p标签，一般被用于装载段落文字 ；注意，p标签中，不可以包含块级元素。

 

内联元素的特征：

  • 内联元素的表现形式，是始终以行内逐个进行显示。
  • 内联元素没有自己的形状，不能定义它的宽和高，它显示的宽度和高度只能根据所包含内容的宽度和高度来确定；它的最小内容单元也会呈现矩形形状。
  • 常见的内联元素，如a、span、i、em、strong、b等标签。
  • 内联元素也会遵循盒模型基本规则，如可以定义padding、border、margin、backgroup等属性，但个别属性不能正确显示；对盒模型属性部分支持。

内联块级元素的特征：是行内元素和块级元素的混合块

  • 内联块级元素，可以设置宽度和高度，这是块级元素的特征。
  • 内联块级元素，属于内联元素，不会独占一行，而是会和其它内联元素，在同一行按从左至内的顺序显示。
  • 常见的内联块级元素，有img、textarea、input、select、iframe等标签

内联块级元素的使用场景：导航菜单

 

这三种元素，是可以互相转换的，使用它的样式属性中的display属性转换。

display有三个值：

  • block：将此元素显示为块级元素，此元素前后会带有换行符
  • inline：将此元素显示为内联元素，此元素前后没有换行符。
  • inline-block：此元素显示为内联块级元素。

 示例：内联块级元素的使用，导航菜单

li标签，是块级元素，自动换行；要将它们放在同一行，需要改成内联块级元素。在style中的li选择器，设置display为inline-block。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>导航栏</title>
        <style>
            li {
                display: inline-block;
                width: 100px;
                height: 30px;
                background-color: #ff8888;
                font-size: 12px; /*设置字体大小*/
                text-align: center; /*设置字体水平居中*/
                line-height: 30px; /*设置li的高度，可以让字体垂直居中*/    
                }
            a {
                color: #fff;
                text-decoration: none; /*去掉链接线*/
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">导航1</a></li>
            <li><a href="#">导航2</a></li>
            <li><a href="#">导航3</a></li>
            <li><a href="#">导航4</a></li>
            <li><a href="#">导航5</a></li>
            <li><a href="#">导航6</a></li>
        </ul>

    </body>
</html>

 

 

示例：常见网页布局

用div进行布局

    <body>
        <div id="box">
            <!-- id属性用于唯一标识；将logo1用div包装 -->
            <div id=logo1""></div>
            <!-- 导航栏 -->
            <div id="nav"></div>
            <!-- 广告，轮播图 -->
            <div id="guanggao"></div>
            <!-- 主体 -->
            <div id="main">
                <!-- 左边主体 -->
                <div id="leftMain"></div>
                <!-- 右边主体 -->
                <div id="rightMain"></div>
            </div>
        </div>
    </body>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            #box {
                width: 700px;
                margin: 0 auto;
            }
            #logo1 {
                height: 100px;
                background-color:yellow;
            }
            #nav {
                height: 100px;
                background-color:#008000;
            }
            #guanggao {
                height: 100px;
                background-color:#FF1493
            }
            #main {
                height: 600px;
            }
            #leftMain {
                display: inline-block; /*左右框架都属于块级元素，自动换行，不能左右摆放，因此将它转成行内块级元素*/
                width: 345px;
                height: 600px;
                background-color: blue;
            }
            #rightMain {
                display: inline-block; /*左右框架都属于块级元素，自动换行，不能左右摆放，因此将它转成行内块级元素*/
                width: 345px;
                height: 600px;
                /* float: right; */ /*浮动 */
                background-color: pink;
            }
            #footer {
                height: 43px;
                background-color: deeppink;
            }
        </style>

 

posted on 2018-11-10 21:57  myworldworld  阅读(197)  评论(0)    收藏  举报

导航