display的设置

最新推荐文章于 2023-01-31 08:37:12 发布

weixin_34190136

最新推荐文章于 2023-01-31 08:37:12 发布

阅读量414

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/2553604/blog/810564

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

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

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

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

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

inline-block行内块元素
inline-block属性值，既是行元素，但又有块元素的属性。
如果想具有行元素一排的属性，也具有块元素可设置宽高的属性，我们可以设置display的属性为inline-block

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

我们一般使用无序列表来做菜单，经常使用display改变行和块的属性，因为ul li都是块元素

}
</style>

例：

<!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>

转载于:https://my.oschina.net/u/2553604/blog/810564