display的设置

时间 2019-11-11

标签 display 设置栏目 CSS 繁體版

原文原文链接

标准流
HTML元素在标准情况下的定位方式
行内元素在同一行内横向排列
块级元素占满整个一行，在页面中竖向排列
元素不会移动到其它地方去，对于嵌套的元素盒子也是嵌套的关系css

行内元素的盒子
行内元素的盒子永远只能在浏览器中获得一行高度的空间（行高由line-height属性决定
若是没设置该属性，则是内容默认的高度），若是给它设置上下border,margin,padding等值
致使其盒子的高度超过行高，那么它的盒子上下部分将和其余元素的盒子重叠
所以，不推荐对行内元素直接设置盒子属性，通常先设置行内元素几块级元素显示，再设置它的盒子属性。html

display属性
经过display属性能够控制元素是以行内元素显示仍是以块级元素显示，或不显示
display:block|inline|none|list-item（行块切换代码）
inline-block行内块元素（css2.1新增的值）浏览器

block元素
block元素的特色是：
老是在新行上开始
高度，行高以及顶和底边距均可控制
宽度缺省是它的容器的100%，除非用width设定一个宽度
<div> <p> <h1> <form> <ul> <li>是块元素的例子spa

inline元素
inline元素的特色是：
和其它元素都在一行上
高，行高及顶和底边距不可改变
宽度就是它的文字或图片的宽度，不可改变
<span> <a> <label> <input> <img> <strong> 和<em>是inline元素的例子3d

inline-block行内块元素
inline-block属性值，既是行元素，但又有块元素的属性。
若是想具备行元素一排的属性，也具备块元素可设置宽高的属性，咱们能够设置display的属性为inline-blockorm

隐藏元素display:none
当某个元素被设置成了隐藏元素以后，浏览器会彻底忽略掉这个元素，该元素将不会被显示
也不会占据文档中的位置。像title元素默认就是此类型
比较visibility:hidden
制做下拉菜单、Tab面板等有时就须要用display:none把菜单或面板隐藏起来。htm

咱们通常使用无序列表来作菜单，常常使用display改变行和块的属性，由于ul li都是块元素图片

}
</style>input

例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>display写菜单</title>
    <style>


       .nav
       {
           list-style: none;/*去除ul的效果*/
       }
        .nav li
        {
          background-color: aquamarine;
            font-size: 20px;
            text-align: center;
            width: 100px;
            height: 30px;
            display: inline-block;
            border: 2px black solid;

        }
        .nav li :hover{ background-color: aliceblue}
        /*
        a:link    {color:blue;}
       a:visited {color:blue;}
       a:hover   {color:red;}
       a:active  {color:yellow;}

        */
    </style>

</head>
<body>

<ul class="nav">

    <li ><a href="#">首页</a></li>
    <li ><a href="#">新闻</a></li>
    <li ><a href="#">娱乐</a></li>
    <li ><a href="#">体育</a></li>
    <li ><a href="#">财经</a></li>

</ul>
</body>
</html>