CSS07-元素类型分类与元素类型转换

最新推荐文章于 2023-03-22 19:52:59 发布

sdsjx01

最新推荐文章于 2023-03-22 19:52:59 发布

阅读量362

点赞数

分类专栏： CSS 文章标签： css 元素类型块级元素内联元素图片居中

本文链接：https://blog.csdn.net/sdsjx01/article/details/89508482

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

元素类型:
    根据css对标签的显示状态分类:
        1:块状元素
            特点:
                能直接定义宽高
                在页面中独占一行,自上而下排列
                在页面中一般作为其他元素或内容的容器
                在页面中都以矩形区域显示
            包括:

        2:内联(行内)元素
            特点
                不能直接定义宽高
                在一行内逐个显示
                最小显示单位也是矩形区域
                内联元素支持盒模型规则,但是个别属性不能正确显示(padding-top/bottom margin-top/bottom)

    元素类型的转换:
        display属性:设置或者是检索元素所生成的盒模型类型!
            属性值:block:将元素转换为块状元素
                   inline:将元素转换为内联元素
                   none:将元素隐藏不可用
                   list-item:li的默认值
                   inline-block: 行内块元素
           包括:

特性:
如果一个元素有浮动的情况下那么改元素可以直接添加宽高

    注:
        大部分块状元素默认的display的值为block;其中li的默认元素为list-item(列表元素)
        大部分内联元素默认的display的值为inline;其中input/img默认的值为inline-block(行内块元素);
        只有当元素的display的值为inline-block的时候那么改元素才能支持vertical-align:middle;

 <style>
        /*内联元素a转换为块级元素*/
        .one a{
            width: 100px;
            height: 500px;
            background: #1fa7ff;
            display: block;
        }
    </style>
<body>
    <div class="one">
        <a href="#"></a>
    </div>
</body>

用法:制作导航栏:

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li,ol{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        #con{
            width: 880px;
            height: 32px;
            background: #beb6b6;
            margin: 50px auto;
            padding-left: 80px;
        }
        #con li{
            float: left;
        }
        #con li a{
            padding: 0 25px;
            height: 32px;
            line-height: 32px;
            color: #ffffff;
            display: block;
        }
        #con li a .yy{
            display: none;
        }
        #con li a:hover{
            background: #232323;
        }
        #con li a:hover .yy{
            display: inline;
        }
        #con li a:hover .hy{
            display: none;
        }

    </style>
</head>
<body>
    <ul id="con">
        <li>
            <a href="#">
                  <span class="hy"> 一级菜单</span>
                <span class="yy">THE ONE</span>
            </a>

        </li>
        <li>
            <a href="#">
                <span class="hy"> 一级菜单</span>
                <span class="yy">THE ONE</span>
            </a>

        </li>
        <li>
            <a href="#">
                <span class="hy"> 一级菜单</span>
                <span class="yy">THE ONE</span>
            </a>

        </li>
        <li>
            <a href="#">
                <span class="hy"> 一级菜单</span>
                <span class="yy">THE ONE</span>
            </a>

        </li>
        <li>
            <a href="#">
                <span class="hy"> 一级菜单</span>
                <span class="yy">THE ONE</span>
            </a>

        </li>
    </ul>
</body>

vertical-align:middle:垂直对齐属性

用法:

图片的左右上下居中:

    让图片在父元素中左右上下居中:

让图片在父元素中左右上下居中:
    1:给图片的父元素添加:text-align:center; 左右居中
    2:在图片的后面(没有回车键)添加空元素span   为了确定中线的位置
    3:让span成为行内块元素
    4:给span添加高和父元素同高
    5:给span添加中线: vertical-align: middle;
    6:给图片添加中线: vertical-align: middle;
让图片在父元素中左右上下居中:
    1:给子元素的父元素添加:text-align:center; 左右居中
    2:在子元素的后面(没有回车键)添加空元素span   为了确定中线的位置
    3:让子元素成为行内块元素     display: inline-block;
    4:让span成为行内块元素        display: inline-block;
    5:给span添加高和父元素同高
    6:给span添加中线: vertical-align: middle;
    7:给子元素添加中线: vertical-align: middle;

/*图片的左右上下居中*/
<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li,ol{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        /*去掉输入框点击式的蓝边*/
        input{
            outline: none;
        }
        div{
            width: 500px;
            height: 400px;
            background: #9ea2a3;
            margin: 50px auto;
            text-align:center ;
        }
        span{
            display: inline-block;
            width: 10px;
            height: 400px;
            background: #52ff5c;
            vertical-align: middle;
        }
        div img{
            vertical-align: middle;
        }
    </style>
<body>
    <div>
        <img src="images/shouji_03.jpg"><span></span>
    </div>
</body>