Web知识实训点-0319_display:none 仍占有空间-优快云博客

这篇博客总结了Web开发中的关键知识点，包括display属性的使用，如none和block类型，以及CSS定位原理，详细解释了相对定位和绝对定位的区别。此外，还介绍了包含块的概念，它是绝对定位的重要参考。文中通过实例展示了如何用ul li和div实现导航栏效果。

播客格式：
第4组_0319_播客记录

学号姓名播客地址
33 舒茜 https://blog.youkuaiyun.com/UchihaHONEY/article/details/88667030

以下是课堂练习：

要求利用ul li和div两种方式实现导航栏

1. ul li实现方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ul li实现</title>
</head>
<style>
    a{
        color: #ffff99;
        text-decoration: none;
    }
    a:hover{
        color: #FFFFFF;
        text-decoration: underline;
    }
    .top_nav{
        padding: 10px 10px 0;
        font-size: 12px;
        font-weight: bold;
        margin: 1px 0 0 0;
        list-style: none;
        border-bottom: 8px solid #014d67;
        overflow: hidden;
        background-color: #33b5e5;
    }
    .top_nav li{
        float: left;
        margin-right: 1px;
    }
    .top_nav li a{
        position: relative;
        z-index: 0;
        line-height: 20px;
        text-decoration: none;
        background: #dddddd;
        color: #666666;
        display: block;
        width: 80px;
        text-align: center;
    }
    .top_nav li a span{
        position: absolute;
        visibility: hidden;
    }
    .top_nav li a:hover span{
        line-height: 20px;
        text-decoration: none;
        background: #dddddd;
        color: #666666;
        display: block;
        width: 80px;
        text-align: center;
        padding-top: 2px;
        visibility: visible;
        top: 0;
        left: 0;
        color: #FFFFFF;
        background: #dc4e1b;
    }

</style>
<body>
<div id ="top">
    <ul class="top_nav">
        <li><a href="#">首页<span>Home</span></a></li>
        <li><a href="#">课堂大厅<span>Course</span></a></li>
        <li><a href="#">学习中心<span>Learn</span></a></li>
        <li><a href="#">关于我们<span>About</span></a></li>
    </ul>

</div>
</body>
</html>

以上实现效果如下图：

在这里插入图片描述点击导航栏以后效果会产生变化如下图

2. div 实现方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div 实现</title>
</head>
<style>

    a {
        color: #ffff99;
        text-decoration: none;
    }
    a:hover{
        color: #FFFFFF;
        text-decoration: underline;
    }
    #top{
        padding: 10px 10px 0;
        font-size: 12px;
        font-weight: bold;
        margin: 1px 0 0 ;
        list-style: none;
        border-bottom: 8px solid darkred;
        overflow: hidden;
        background-color: #014d67;
    }
    .top_nav{
        width: 80px;
        height: 20px;
        background-color: #dddddd;
        text-align: center;
        margin-right: 1px;
        line-height: 20px;
        float: left;
        position: relative;
    }
    .top_nav span{
        position: absolute;
        visibility: hidden;
    }
    .top_nav:hover span{
        line-height: 20px;
        background: #dddddd;
        color: #666666;
        display: block;
        width: 80px;
        text-align: center;
        height: 20px;
        padding-top: 2px;
        visibility: visible;
        top: 0;
        left: 0;
        color: #FFFFFF;
        background: #dc4e1b;
    }
</style>
<body>
<div id ="top">
    <div class="top_nav"><a href="#">首页</a><span>Home</span></div>
    <div class="top_nav"><a href="#">课堂大厅</a><span>Course</span></div>
    <div class="top_nav"><a href="#">学习中心</a><span>Learn</span></div>
    <div class="top_nav"><a href="#">关于我们</a><span>About</span></div>
</div>
</body>
</html>

以上实现效果如下图：
在这里插入图片描述
点击导航栏以后效果会产生变化如下图：

在这里插入图片描述

知识点总结

一、display属性

display属性规定元素的盒模型显示类型

•如果从布局角度来分析，这些显示类型都可以划归为block、inline和flex三种，其他类型都是这三种类型的特殊显示。
①none
•none属性值表示隐藏并取消盒模型，所包含的内容不会被浏览器解析和显示。通过把display设置为none，该元素及其所有内容就不再显示，也不占用文档中的空间。
②block
•block显示为块状元素，块状元素的宽度为100％，而且后面隐藏附带有换行符，使块状元素始终占据一行。如

常常被称为块状元素，这意味着这些元素显示为一块内容。
③inline
•inline显示为行内元素，元素前后没有换行符，行内元素没有高度和宽度，因此也就没有固定的形状，显示时只占据其内容的大小。
•可以使用display属性改变元素盒模型的显示类型。这意味着，通过将display属性设置为block，可以让行内元素表现得和块元素一样，也可以通过将display属性设置为inline，让块元素表现得像行内元素一样。
④listitem
•listitem属性值表示列表项目，其实质上也是块状显示，不过是一种特殊的块状类型，它增加了缩进和项目符号。

二、CSS定位

页面布局相关属性：
float（left，right，auto），
display（block，inline，inline-block，listitem），
overflow（auto，hidden，scroll，visible）

CSS 定位属性允许对元素进行定位


position	规定元素的定位类型
top	定义了定位元素的上外边距边界与其包含块上边距之间的偏移
right	定义了定位元素的右外边距边界与其包含块右边距之间的偏移
bottom	定义了定位元素的下外边距边界与其包含块下边距之间的偏移
left	定义了定位元素的左外边距边界与其包含块左边距之间的偏移
overflow	设置当元素内容溢出时处理方式
clip	设置元素的形状
vertical-align	设置元素的垂直对齐方式
z-index	设置元素的堆叠顺序

三、相对定位与绝对定位（relative和absolution）

原位置：
在这里插入图片描述

相对定位：
在这里插入图片描述
绝对定位：

•对于定位要理解每种定位的意义：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么最近的已定位祖先元素是body。

四、包含块

• 包含块是标准布局中的一个重要概念，它是绝对定位的基础，包含块是为绝对定位元素提供坐标偏移和显示范围的参照物。在默认状态下，body元素是一个大的包含块，所有绝对定位的元素都是根据body来确定自己所处的位置的。但是如果定义了包含元素（指元素内容包含其他元素）为包含块以后，对于被包含的绝对定位元素来说，就会根据最近的包含块来决定自己的显示位置。