2_31_高度塌陷问题、定位、导航栏（二级导航）_191119

最新推荐文章于 2023-02-03 16:21:42 发布
最新推荐文章于 2023-02-03 16:21:42 发布
阅读量459 收藏 1
点赞数 1
文章标签： CSS+HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XY061120/article/details/103238299
版权

一、高度塌陷问题

解决方案
1、给父元素设置高度
不足：如果子元素大于父元素，则会溢出。

2、 给父元素设置清除浮动，运用overflow属性

3、 使用空标签

(1)	<div style=”clear:both”></div>
(2)	<div class=”box”></div>
<style>
	.box{ 
      	 clear:both;
}
</style>

不足：出现多余代码，代码累积。

4、 通过 after 伪类，在父元素后面添加

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度塌陷</title>
    <style>
        .box1{
            height: 300px;/*方案一*/
            border: 10px solid red;
            overflow: hidden;    /*方案二：设置清除浮动*/
        }
        .box2{
            width: 100px;
            height: 300px;
            background-color: #33CCFF;
            float: left;
        }
        .box3{
            width: 100px;
            height: 300px;
            background-color: #33CCFF;
        }
        /*方案四：通过after伪类*/
        .box1:after{
            content:"asd";  /*内容*/
            display: block;  /*将行内元素变为块级元素*/
            clear:both;   /*清除浮动*/
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2">box2</div>
    <div style="clear:both"></div>   <!--方案三：设置空标签-->
</div>

<div class="box3">box3</div>
</body>
</html>

二、定位

什么是 定位：是将指定元素摆放到页面的任意位置。
（通过定位可以任意的摆放元素）

通过 position 属性来定位元素的

（一）相对定位（relative）

1、定义与运用
开启元素定位时（ position 的属性值是一个 非 static 的值）
这个时候，可以通过left、right、top、bottom四个属性来设置元素的偏移量。
left： 元素相对于其定位位置的 左 侧偏移量
right： 元素相对于其定位位置的 右 侧偏移量
top: 元素相对于其定位位置的 上 侧偏移量
bottom： 元素相对于其定位位置的 下 侧偏移量

2、特点
元素的 position 属性位置设置为 relative 时，则开启了元素的相对定位
（1）当开启了元素的相对定位时，如果不设置偏移量，元素不发生任何变化。
（2）相对定位是相对于元素在文档流中原来的位置进行定位的。
（3）相对定位可以使我们的元素提升一个层级，即可以覆盖。
（4）相对定位不会让元素脱离文档流。

3、margin 与相对定位的对比

（1）通过 margin 来实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style type="text/css">
      .box1,.box2,.box3,.box4{
          width: 100px;
          height: 100px;
          border: 5px solid #000000;
          background-color: #bfa;
      }
      /*通过 margin 实现 box2 的移动太麻烦，还会牵扯到 box3 的位置变换，不方便*/
        .box2{
            margin-left: 100px;
            margin-top: 100px;
        }
        .box3{
            margin-top: -100px;
        }
      .box4{
        	margin-left: 105px;
            margin-bottom: 110px;
     	 }
    </style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
</body>
</html>

（2）通过 相对定位 来实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style type="text/css">
      .box1,.box2,.box3,.box4{
          width: 100px;
          height: 100px;
          border: 5px solid #000000;
          background-color: #bfa;
      }
        .box3{
            position: relative;
            top: -100px;
        }
        .box2{
            position: relative;
            left:200px;
            top: -110px;   /*对比坐标轴来理解，原本是距下边往上移动100px，本应写作 bottom，但可以用top的负值来表示
            ，两者是等价的。这里写成 110px 是因为有边框*/
        }
      .box4{
          position: relative;
          left:105px;
          bottom: 110px;
      }
    </style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
</body>
</html>

4、小练习
在这里插入图片描述

代码即上面比较中的代码

结果：
在这里插入图片描述

（二）绝对定位（absolute）

1、特点
当我们 position 属性设置为 absolute 时，开启了绝对定位
（1）当开启绝对定位时，会使元素脱离文档流
（2）开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
（3）开启绝对定位后，元素提升一个层级
（4）绝对定位是相当于离他最近的开启了定位的祖先元素进行定位的。 如果其祖先元素没有开启相对定位，则会相当于浏览器窗口进行定位。
（5）绝对定位会改变元素的属性，即行内元素可以变成块级元素。

2、小练习
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box1,.box2,.box3,.box4{
            width: 100px;
            height: 100px;
            border: 5px solid #000000;
            background-color: #bfa;
        }
        .main1{
            position: relative;
        }
        .box3{
            position: absolute;
            top: 110px;
            width: 200px;
            height: 200px;
            background-color: #7cb4ed;
        }
        .main{
            position: relative;
        }
        .box2{
            position: absolute;
            left: 220px;
            bottom: 0px;

        }
        .box4{
            position: absolute;
            left: 105px;
            top: 220px;
        }
    </style>
</head>
<body>
<div class="box1">box1</div>
<div class="main">
    <div class="box2">box2</div>
</div>
<div class="main1">
    <div class="box3">box3</div>
</div>
<div class="box4">box4</div>
</body>
</html>

效果如下：
在这里插入图片描述
注意： 一般情况下，开启的元素的绝对定位，都会同时开启父元素的相对定位。

（三）固定定位（fixed）

1、特点
当元素的 position 属性设置为 fixed 时候，则开启了元素的固定定位
（1）固定定位也是一种绝对定位，它的大部分特点和绝对定位一样
（2）不同的是：
a. 固定定位 永远 是相对于 浏览器 窗口进行定位的。
b.固定定位会 固定 在浏览器的某一个位置，不会随滚动条滚动。

三、导航栏

（一）一级导航

实例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一级导航</title>
    <style text="text/css">
        *{
            margin: 0;
            padding: 0;   /*消除浏览器默认的内外边距*/
        }
        .nav{
            width: 1000px;
            list-style: none;
            margin: 50px auto 0;
            overflow: hidden;
        }
        .nav li{
            float: left;
            width: 25%;  /*占一整列（1000px）的1/4 ，不建议用250px表示，因为一旦列表宽度发生变化，布局就会混乱*/
        }
        .nav a{
            display: block; /*将行内元素变为块级元素*/
            color: white;
            width: 100%;
            text-align: center;
            background-color: #246aee;
            padding: 5px 0;
            text-decoration: none;
            font-weight: bold;
        }
        .nav a:hover{
            background-color: crimson;
        }
    </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>
</ul>
</body>
</html>

效果如下：
在这里插入图片描述
实例二：项目升级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一级导航</title>
    <style text="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            width: 1000px;
            list-style: none;
            margin: 50px auto 0;
            overflow: hidden;
        }
        .nav li{
            float: left;
            width: 25%;  /*占一整列（1000px）的1/4 ，不建议用250px表示，因为一旦列表宽度发生变化，布局就会混乱*/
        }
        .nav a{
            display: block; /*将行内元素变为块级元素*/
            color: white;
            width: 100%;
            text-align: center;
            background-color: #246aee;
            padding: 5px 0;
            text-decoration: none;
            font-weight: bold;
        }
        .nav a:hover{
            background-color: crimson;
        }
        .nav1{
            width: 1000px;
            list-style: none;
            margin: 0px auto;
            overflow: hidden;
        }
        .nav1 li{
            float: left;
            width: 25%;  /*占一整列（1000px）的1/4 ，不建议用250px表示，因为一旦列表宽度发生变化，布局就会混乱*/
        }
        .nav1 a{
            display: block; /*将行内元素变为块级元素*/
            color: white;
            width: 100%;
            text-align: center;
            background-color: #246aee;
            padding: 5px 0;
            text-decoration: none;
            font-weight: bold;
        }
        .nav1 a:hover{
            background-color: crimson;
        }

    </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>
</ul>
<ul class="nav1">
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻</a></li>
    <li><a href="#">练习</a></li>
    <li><a href="#">关于</a></li>
</ul>
</body>
</html>

效果如下：
在这里插入图片描述
（二）二级导航

实例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>
    <style type="text/css">
        .nav{
            list-style: none;
            background-color: #c5cce5;
            width: 1000px;
            margin: 50px auto 0;   /*列表距离浏览器上方 50px,左右居中*/
        }
        /*.nav:after{*/
            /*content: "";*/
            /*display: block;*/
            /*clear: both;*/
        /*}*/
        .nav li{
            width: 20%;   /* 每个 li 占整个列表的五分之一，这种表达方式即使把列表的宽度改变，它也会按比例分配*/
            float: left;     /*使列表下的五个大的 li 向左浮动*/
            /*position: relative;*/
        }
        .nav li a{
            display: block;
            color: #1833ee;
            font-weight: bold;   /*字体加粗*/
            width: 100%;    /*占每个 li 的全部，每个 li 又是列表的 1/5*/
            padding: 10px;
            text-decoration: none;
            background-color: #c9c7cc;
            text-align: center;  /*字体居中*/
        }
        .nav li a:hover{
            background-color: #b8ee28;
            color:#FF9600;
        }
        .nav2 li{
            float: none;   /* 控制每个 小列表下的 li 不受大列表 .nav li 向左浮动的影响，取消向左浮动*/
        }
        .nav2{
            list-style: none;  /*取消列表的形式*/
            display: none;
        }
        .nav2 li a{
            width: 200px;
            background-color: #FF9600;
            margin: 2px;
        }
        .nav li:hover .nav2{
            display: block;   /*当鼠标滑动至大列表 li 上时，二级菜单 nav2 显示*/
            /*position: absolute;*/
            /*top: 40px;*/
            /*left: 0px;*/
        }
        .nav3 li{
            float: none;
        }
        .nav3{
            list-style: none;
            display: none;
        }
        .nav3 li a{
            width: 200px;
            background-color: #FF9600;
            margin: 2px;
        }
        .nav li:hover .nav3{
            display: block;
            /*position: absolute;*/
            /*top: 40px;*/
            /*left: 0px;*/
        }
    </style>
</head>
<body>
<ul class="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">课程大厅</a>
        <ul class="nav2">
            <li><a href="#">java</a></li>
            <li><a href="#">jquery</a></li>
            <li><a href="#">js</a></li>
        </ul>
    </li>
    <li><a href="#">学习中心</a>
        <ul class="nav3">
            <li><a href="#">java</a></li>
            <li><a href="#">jquery</a></li>
            <li><a href="#">js</a></li>
        </ul>
    </li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">练习</a></li>
</ul>
</body>
</html>

效果如下：
在这里插入图片描述
在这里插入图片描述

实例二：项目升级（综合练习）

不成熟的书写
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中英文变换</title>
    <style>
        .nav{
            list-style: none;
            background-color: #c5cce5;
            width: 500px;
            margin: 40px auto 0;
        }
        .nav li{
            width: 20%;
            float: left;
            overflow: hidden;  /*清除浮动——控制鼠标放上去之后会显示多余中文字部分*/
        }
        .nav li a{
            display:block;
            color: black;
            text-decoration: none;
            background-color: #c5cce5;
            text-align: center;
        }
        .nav li span{
            display: none;  /*暂时隐藏 span 的内容*/
        }
        .nav li a:hover{
            color: white;
            background-color: red;   /*当鼠标滑动到 a 标签上面时 显示的字体颜色、背景颜色*/
            margin-top: -20px;  /*当 鼠标移至 a 标签上时,这一行为可以使英文字覆盖中文字，即改变a 标签中文字的位置
            ，与英文字重叠，达到效果*/
        }
        .nav a:hover span{
            display: block;  /*当鼠标滑动至 a 标签上时 span 的内容显示，此时显示是紧接在中文字下方的 */
        }
        p{
            position: relative;  /* 相对定位 —— 元素相对于原来的位置进行定位——控制红条的位置*/
            top: 22px;
            width: 550px;
            border: 6px solid red;
            left: 20px;
            margin: auto;
        }
    </style>
</head>
<body>
<ul class="nav">
    <li><a href="#">首页<span>Home</span></a></li>
    <li><a href="#">课程大厅<span>Course</span></a></li>
    <li><a href="#">学习中心<span>Learning</span></a></li>
    <li><a href="#">关于我们<span>About</span></a></li>
    <li><a href="#">练习<span>Exercise</span></a></li>
</ul>
<p></p>
</body>
</html>

效果如下：
在这里插入图片描述
在这里插入图片描述
注意： 最下面的红线，可以通过建立一个空的 p 标签，然后增加他的宽度 border 即可实现。

梦想_倩
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅谈CSS 高度塌陷问题
09-22
【CSS 高度塌陷问题详解】 在网页布局设计中，CSS高度塌陷是一个常见的问题，它发生在父元素没有设置固定高度，而其内部的浮动子元素又导致父元素无法根据子元素高度自适应时。这个问题的核心在于，当子元素设置了...
文档流html开发中遇到的高度塌陷 浮动 定位产生的问题,.pptx
12-10
在HTML和CSS开发中，经常会遇到一些布局问题，如高度塌陷、浮动和定位等问题。这些问题主要源于浏览器的默认文档流、浮动元素和定位规则。本文将深入探讨这些问题及其解决方案。 首先，我们要理解什么是“文档流”...
12.26高度塌陷 解决高度塌陷 导航条 清除浮动 相对定位
weixin_43167531的博客
12-26 239
1 高度塌陷 在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高 但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷 由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱 所以在开发中一定要避免出现高度塌陷的问题, 我们可以将父元素的高度写死，以避免塌陷的问题出现， 但是一旦高度写...
浮动 定位 高度塌陷
YBOBO_的博客
07-05 130
div标签没有默认样式 显示框样式：border-style font-family：字体类型属性 多组值用逗号隔开 class多组值用空格隔开 text-indent：文本缩进（em） clear属性：left，right，both z-index定义定位元素层级值越大，层级越高 定位（position） 相对定位（relative）：相对于元素定位不会脱离文档流 绝对定位（absolute）：针对于浏览器定位会脱离文档流 固定定位（fixed）：固定于页面 特殊的绝对定位 ...
京东导航条高度塌陷问题
weixin_44868200的博客
07-08 125
京东导航条高度塌陷问题 问题描述： 给导航条设置背景颜色时，设置上了没有显示出来 /*样式*/ <style> /* 设置背景色 */ .outer{ background-color: #dfe6e9; } /* 设置内盒子宽度，使其居中显示 */ .inner{ width: 1190px; margin: 0 auto; }
解决uniapp设置了position: fixed；样式布局塌陷问题
FUFCY的博客
05-23 1651
子组件设置position: fixed;父组件引用真机上出现问题，小程序没有，是因为子组件的第一层的类名和父组件第一层类名相同导致的，所以改类名不一样就可以了
position:fixed定位时 “高度坍塌” 问题的解决
weixin_30315723的博客
11-05 908
问题：对于固定定位的元素，固定住高度，后面紧跟的模块会当做前面的固定元素不存在似的，这给布局带来了困扰 解决方法： 1.给第二个模块div设置margin-top的值，margin-top的值设为大于等于固定定位模块的高度 2.这个方法是百度百科手机页面用的，先为固定定位元素设一个父元素，不设高度，不设宽度，什么都不设，他的第一个子元素是我们需要做固定定位的元素，这个...
二级导航竖排_float_竖排二级导航_pleasant27w_
10-02
在本文中，我们将深入探讨如何使用`float`属性来解决二级导航的竖排问题，以及如何创建一个美观且功能完善的竖排二级导航。标题"二级导航竖排_float_竖排二级导航_pleasant27w_"所指的是利用浮动布局方法实现的竖向...
浮动_style_浮动导航栏_css如何浮动_
09-29
在这个场景中，我们将深入探讨如何使用CSS来实现浮动导航栏。 首先，让我们定义什么是浮动导航栏。浮动导航栏是一种始终保持在屏幕顶部，即使用户滚动页面也不会消失的菜单。这种设计通常用于增强用户体验，让用户...
css高度塌陷问题的解决方案
11-21
所以在开发中一定要避免出现高度塌陷的问题。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css">
二级导航用CSS的实现方法
60rzvvbj的博客
04-23 4115
首先写个基本结构： <div class="father"> 父盒子 <div class="son"> <a href="#">链接1</a> <a href="#">链接2</a> <a href="#">链接3</a> ...
解决高度塌陷
m0_65762277的博客
11-29 443
通过伪类after，在元素的后面添加内容，将这个内容转成块元素，再清楚其他浮动元素对这个块元素的浮动影响
css高度塌陷及解决方法
summer_567的博客
01-30 339
css高度塌陷及解决方法 为什么会出现高度塌陷？ 1.父元素高度自适应，子元素 float 后，只要子元素脱离了文档流后，造成父元素高度为0，称为高度塌陷问题。 2.在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。 解决方法 1.最简单的解决方式就是给父容器设置一个固定的高度 劣处：给父元素设置固定高度后，就不能进行高度自适应 2.给父元素也设置浮动 劣处： （1）虽
html 盒子模型基础（导航条实例:会出现高度塌陷问题）（七）
余正源的博客
02-07 1020
1.导航条: 导航条 /*清除默认样式*/ *{ margin: 0; padding: 0; } /*设置ul*/ ul{ /*去掉项目符号*/ list-style: none; /*设置背景颜色*/ background-color: #6495ED; /*设置宽度
关于css中父元素塌陷问题以及解决办法
军火库
02-03 759
主要记录下经典的父元素塌陷问题，在开发过程中如果碰到相关问题，可以联想到这几种解决办法，更好的去优化代码。最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
# uni-app开发-实战总结 # 顶部导航栏制作（uView）
ZHENGCHUNJUN的博客
08-25 5875
<!-- 页面顶部导航栏 --> <view> <u-navbar title="我的赞" title-color="#25AFA2" back-icon-name="nav-back" back-icon-color="#25AFA2" back-text="返回"> </u-navbar> </view> 本文的顶部导航栏为使用uView的导航栏组件------Navbar..
浮动和定位引起高度塌陷怎么办？
樱井萧的博客
11-02 9338
浮动和定位引起高度塌陷怎么办？ 目前学习css，布局时经常遇到这种问题，后来才知道这叫高度塌陷，索性写篇文章总结下。希望对你有帮助。
css中高度塌陷介绍以及定位介绍
木头房子的格子铺
05-21 3107
高度塌陷 高度塌陷的解决 css定位介绍
css中的高度塌陷与各种定位，看了就明白了
gisercug的博客
07-02 2448
标题高度塌陷解决方法 根据w3c的标准 在页面中元素都有一个隐含的属性叫Block Formatting Context 简称BFC,该属性可以设置打开和关闭，默认是关闭的 BFC的定义： 是设置元素的一种特性(功能) 1，使 BFC内部浮动元素不会到处乱跑； 2，和浮动元素产生边界。 当开启元素的BFC以后，元素将会有如下的属性 1.父元素的垂直外边距不会和子元素重叠， 2.开启BFC的元素不会...
苹果手机内嵌h5第一次加载导航栏内部塌陷问题
最新发布
05-26
如果问题还没有解决，你可以尝试添加以下CSS样式： ```css html, body { height: 100%; overflow: auto; } body { -webkit-overflow-scrolling: touch; } ``` 这里的-webkit-overflow-scrolling: touch表示开启...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值