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

最新推荐文章于 2024-04-18 20:33:02 发布

原创

最新推荐文章于 2024-04-18 20:33:02 发布 · 576 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CSS+HTML

一、高度塌陷问题

解决方案
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）通过相对定位来实现