前端基础之布局定位

最新推荐文章于 2024-06-09 20:17:27 发布

王小小鸭

最新推荐文章于 2024-06-09 20:17:27 发布

阅读量277

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/clover_oreo/article/details/121848751

版权

想要实现一个赏心悦目的网页，不要一上来就做内容，先要规划好大致布局，布局好了再依次往里面填充内容，不然很容易出现盒子之间塌陷、版排丑陋（没错，说的就是我的网页QAQ）之类的问题。

规划好大致布局后还要解决高度塌陷：

父元素中有子元素，并且父元素没有设置高度，子元素在父元素中浮动，结果必然是父元素的高度为0，这也就导致了父元素高度塌陷问题。

浮动脱离文档流，这个问题会对整个页面布局带来很大影响，如何解决高度坍塌问题，我们需要清除浮动

简而言之就是子元素设置浮动，父元素未设置高度，这个时候父元素的高度就会变为0

解决浮动带来的布局影响/解决高度塌陷的问题:

1、给父元素设置高度（不建议使用）

2、额外标签法（不推荐使用）

优点：语法简单

缺点：会给也没增加很多不必要的结构/元素

清除浮动的语法：

选择器{

clear:left/right/both

}

3、给产生高度塌陷的父元素添加overflow属性

可选值：

1、hidden

2、auto

3、scroll

优点：语法简单

缺点：不希望父元素的溢出内容隐藏（一般不使用）

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

4、添加clearfix的class值

额外标签法的升级版，不会给页面添加无谓的结构

.clearfix::after{

content: "";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

5、伪元素法的升级

.clearfix::before,.clearfix::after{

content:"";

display:table;

}

.clearfix::after{

clear:both;

}

这里运用了 overflow: hidden;

运行代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试鸭3</title>
</head>
<style>
    #box1 {
        width: 1500px;
        height: 200px;
        background-color: rgb(214, 196, 196);
        margin: 0 auto;
        overflow: hidden;
    }
    
    #boxs {
        width: 1500px;
        height: 600px;
        background-color: white;
        overflow: hidden;
    }
    
    #box2 {
        width: 300px;
        height: 600px;
        background-color: gold;
        float: left;
        overflow: hidden
    }
    
    #box22 {
        width: 150px;
        height: 300px;
        background-color: greenyellow;
        margin-top: 50px;
        margin-left: 75px;
        overflow: hidden;
        position: fixed;
    }
    
    #box3 {
        width: 900px;
        height: 600px;
        background-color: rgb(240, 176, 209);
        float: left;
        overflow: hidden
    }
    
    #box4 {
        width: 300px;
        height: 600px;
        background-color: gold;
        float: left;
        overflow: hidden
    }
    
    #box44 {
        width: 150px;
        height: 300px;
        background-color: greenyellow;
        margin-top: 50px;
        margin-left: 75px;
        overflow: hidden;
        position: fixed;
    }
    
    #box5 {
        width: 1500px;
        height: 200px;
        background-color: rgb(214, 196, 196);
    }
</style>

<body>

    <div id="box1">头部内容</div>
    <div id="boxs">
        <div id="box2">左侧边栏
            <div id="box22">左侧广告</div>
        </div>
        <div id="box3">主体内容</div>
        <div id="box4">右侧边栏
            <div id="box44">右侧广告</div>
        </div>
    </div>
    <div id="box5">底部内容</div>
</body>

</html>

成品展示：

可以看到无论窗口怎么滚动，被position 属性规定元素fixed定位了的左侧广告（box22）和右侧广告(box44)：position: fixed;

相对于浏览器窗口固定，元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动。

注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。

Fixed定位使元素的位置与文档流无关，因此不占据空间。

Fixed定位的元素和其他元素重叠。

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

详情见菜鸟教程：CSS Position(定位) | 菜鸟教程 (runoob.com)

王小小鸭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础之布局定位

想要实现一个赏心悦目的网页，不要一上来就做内容，先要规划好大致布局，布局好了再依次往里面填充内容，不然很容易出现盒子之间塌陷、版排丑陋（没错，说的就是我的网页QAQ）之类的问题。规划好大致布局后还要解决高度塌陷：父元素中有子元素，并且父元素没有设置高度，子元素在父元素中浮动，结果必然是父元素的高度为0，这也就导致了父元素高度塌陷问题。浮动脱离文档流，这个问题会对整个页面布局带来很大影响，如何解决高度坍塌问题，我们需要清除浮动简而言之就是子元素设置浮动，父元素未设置高度，这个时候父元素的高度
复制链接

扫一扫