码迷,mamicode.com
首页 > Web开发 > 详细

html -- 块元素、内联元素、内联块元素 练习

时间:2020-03-07 00:11:58      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:charset   问题:   ima   不可   osi   垂直居中   方式   https   标签   

html标签(也叫元素)大概可以统分为三大类,块元素、内联元素、内联块元素。

 

块元素

    1,常用的块元素:ul、li、div、p、dl、dt、dd、h1~h6。

    2,块元素支持所有的样式。

    3,盒子独占据一行,即使设置了宽度。

    4,如果没有设置宽度,默认宽度为父元素的100%。

 

内联元素

    1,常用的内联元素:span、a、em、i、b、strong。

    2,只支持部分样式,比如说,不支持宽、高、margin上下、padding上下。

    3,盒子并在一行。

    4,宽高由内容挣开。

    5,如果代码换行,盒子之间会产生间距。

   6,子元素是内联元素的话,可以通过设置这个子元素的父元素的text-align属性来设置水平对齐方式。

    解决第 4 点问题

        1,取消代码间的换行,太麻烦了,不可取。

        2,将这个内联元素的父元素的font-size值设为0,内联元素自身再设置font-size。

 

内敛块元素

    1,支持所有的样式。

    2,盒子并在一行。

    3,代码换行,盒子会产生间距。

   4,子元素是内联元素的话,可以通过设置这个子元素的父元素的text-align属性来设置水平对齐方式。

 

    从某种程度上可以说内联块元素结合了块元素和内联元素的优点,虽然现有元素没有归于此类别的,但是可以通过display属性来实现块元素、内联元素、内敛块元素的相互转化。

 

display属性

1,none 隐藏元素,且不占位置。

2,block 作为块元素显示。

3,inline 作为行内元素显示。

4,inline-block 作为行内块元素显示。

 

在实际开发中,块元素使用的较多,所以经常把内联元素转化为块元素,少量转化为内联块,而要使用内联元素时,直接使用内联元素,而不用块元素转化了。还是要视情况而定。

技术图片

实际练习中遇到的问题:

    1,内联元素设置宽、高、margin、padding无效。

    2,通过设置内联元素或者内联块元素的父元素的font-size为0,内联元素或内联块元素的font-size为字体大小,来解决代码换行带来的间距问题。

    3,通过设置盒子的行高line-height和盒子高度height为一样的值,使得盒子内文字垂直居中?。

    ?4,ul、li、a等标签都有自己的属性,要根据需要调整。

练习代码?:

<!DOCTYPE html>
<html lang="ZH-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css练习一</title>

    <style>
        .con_page{
            height: 40px;
            width: 600px;
            border: 1px solid rgb(128, 128, 125);
            text-align: center;
            list-style: none;
            padding: 0px;
            margin: 0px auto;
            font-size: 0px;
        }

        .con_page li{
            margin: 7px 5px;
            display: inline-block;
            font-size: 12px;
            /* height: 26px; */
            /* background-color: gold; */
        }
        
        .con_page li a{       
            display: inline-block;
            height: 26px; 
            padding: 0px 10px;
            line-height: 26px;
            background-color: gold;           
            text-decoration: none;
            color: black;
            font-size: 12px;
            font-family: "Microsoft YaHei";
        }

        .con_page a:hover{
            background-color: red;
            color: white;
        }

        .menu{
            list-style: none;
            margin: 50px auto 0px;
            height: 40px;
            width: 958px;
            border: 1px solid #666;
            padding: 0px;
            text-align: center;
            font-size: 0px;
        }
        .menu li{
            display: inline-block;
            font-size: 14px;
            line-height: 40px;
        }
        .menu li a{
            display: inline-block;
            height: 40px;
            line-height: 40px;
            font:normal 14px/40px ‘Microsoft YaHei‘;
            text-decoration: none;
            color: #000;
        }
        .menu li span{
            display: inline-block;
            height: 40px;
            font:normal 14px/40px ‘Microsoft YaHei‘;
            margin: 0px 20px;
        }

        .menu li a:hover{
            color: tomato;
        }

        .menu2{
            list-style: none;
            margin: 50px auto 0px;
            height: 40px;
            width: 960px;
            border: 1px solid #666;
            padding: 0px;
            background-color: #55a8ea;
            position: relative;
            
        }
        .menu2 li{
            width: 100px;
            height: 40px;
            /* text-align: center; */
            float: left;
        }
        .menu2 li a{
            display: inline-block;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            font-family: ‘Microsoft YaHei‘;
            text-decoration: none;
            color: #fff;
        }
        .menu2 li a:hover{
            background-color: #00619f;
        }

        .menu2 .new{
            width: 33px;
            height: 20px;
            background: url(./images/new.png) no-repeat;
            position: absolute;
            left: 334px;
            top: -8px;
        }

    </style>
</head>
<body>
    
    <ul class="con_page">
        <li><a href="">上一页</a></li>
        <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 ><span>...</span></li>
        <li><a href="">17</a></li>
        <li><a href="">18</a></li>
        <li><a href="">19</a></li>
        <li><a href="">20</a></li>
        <li><a href="">下一页</a></li>
    </ul>

    <ul class="menu">
        <li><a href="">首页</a></li>
        <li><span>|</span></li>
        <li><a href="">网站建设</a></li>
        <li><span>|</span></li>
        <li><a href="">程序开发</a></li>
        <li><span>|</span></li>
        <li><a href="">企业VI</a></li>
        <li><span>|</span></li>
        <li><a href="">案例展示</a></li>
        <li><span>|</span></li>
        <li><a href="">联系我们</a></li>
        <li><span>|</span></li>
        <li><a href="">网络营销</a></li>
    </ul>

    <ul class="menu2">
        <li><a href="">首页</a></li>
        <li><a href="">网站建设</a></li>
        <li><a href="">程序开发</a></li>
        <li><a href="">企业VI</a></li>
        <li><a href="">案例展示</a></li>
        <li><a href="">联系我们</a></li>
        <li><a href="">网络营销</a></li>
        <li class="new"></li>
    </ul>

</body>
</html>

 

html -- 块元素、内联元素、内联块元素 练习

标签:charset   问题:   ima   不可   osi   垂直居中   方式   https   标签   

原文地址:https://www.cnblogs.com/xuxianshen/p/12431646.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!