HTML+CSS基础知识03

最新推荐文章于 2024-09-24 10:17:01 发布

菲允龙歌

最新推荐文章于 2024-09-24 10:17:01 发布

阅读量97

点赞数

分类专栏：基础知识文章标签： html css

本文链接：https://blog.csdn.net/Steve_Richard/article/details/100597623

版权

基础知识专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1:经典常见布局

自适应: 盒子宽度随着屏幕宽度发生变化百分比

1:两列自适应布局

要求:右侧盒子100%放置再固定左侧盒子宽度, 左侧盒子添加左浮动属性 ===>浮动元素会覆盖标准盒子

2: 三列自适应布局

左右两侧固定宽度,中间盒子自适应

圣杯布局

技术点: 浮动并排 + 负外边距 margin-left + 相对定位 (left right)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    * {
        padding: 0;
        margin: 0;
    }
    .container {
        /* min-height: 最小高度 if 内容的高度<300px  取300px  */
        min-height: 300px;
        /* 4:内边距---> 把内容挤到中间来 */
        padding: 0px 220px 0px 200px;
    }
    .left {
        width: 200px;
        height: 400px;
        background-color: red;
        /* 1:左浮动 */
        float: left;
        
        /* 2:外边距向左走100% */
        margin-left: -100%;

        /* 5:利用相对定位向左移动自身的宽度 */
        position: relative;
        left:-200px;
    }
    .center {
        width: 100%;
        height: 400px;
        background-color: green;
        /* 1:左浮动 */
        float: left;
    }
    .right {
        width: 220px;
        height: 400px;
        background-color: blue;
        
        /* 1:左浮动 */
        float: left;
        
        /* 3:外边距向左走自身宽度 */
        margin-left: -220px;
        
        /* 5:利用相对定位向右移动自身的宽度 */
        position: relative;
        right: -220px;
    
    }
    
    </style>
</head>
<body>
    <div class="container">
        <!-- 100%宽度 自适应  保证左右两侧的盒子同时和它并排右侧 -->
        <div class="center">中心盒子</div>

        <!-- 固定宽度 -->
        <div class="left">左侧盒子</div>
        <!-- 固定宽度 -->
        <div class="right">右侧盒子</div>
    </div>
</body>
</html>

双飞翼布局

始于淘宝UED UED

特点: 给中心盒子在套一个盒子 ,设置中心盒子的左右外边距 ,目的是把内容放到中心盒子身上展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .container {
            min-height: 400px;
        }
        .center {
            width: 100%;
            height: 400px;
            background-color: red;
            /* 1:左浮动 */
            float: left;
        }
        .left {
            width: 200px;
            height: 400px;
            background-color: blue;
            /* 1:左浮动 */
            float: left;
            /* 2:外边距向左走100% */
            margin-left: -100%;
        }
        .right {
            width: 220px;
            height: 400px;
            background-color: silver;
            /* 1:左浮动 */
            float: left;
            /* 2:外边距向左走自身宽度 */
            margin-left: -220px;
        }
         .inner {
            /* 3:中间盒子外边距 */
            margin: 0px 220px 0px 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">
            <div class="inner">
                中间盒子
            </div>
        </div>
        
        <div class="left">左侧盒子</div>
        <div class="right">右侧盒子</div>
    </div>
</body>
</html>

3：等高布局

height:auto时的现象

height:auto 全部都是内容撑开，每一列盒子高度同时变化,以最高的那列为基准整个盒子的高度应该取决于最高的那列

1: 表格行等高列等宽

2:伪等高 —>内外边距相消法

    <style>
    * {
        padding: 0;
        margin: 0;
    }
    .c {
        overflow: hidden;

    }
    .col1 {
        width: 30%;
        height: 400px;
        background-color: yellow;
        float: left;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }
    .col2 {
        width: 40%;
        height: 300px;
        background-color: red;
        float: left;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }
    .col3 {
        width: 30%;
        height: 500px;
        background-color: palegoldenrod;
        float: left;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }
    </style>
</head>
<body>
    <div class="c">
        <div class="col1"></div>
        <div class="col2"></div>
        <div class="col3"></div>
    </div>
</body>
</html>

3:真等高 —> 背景盒子法

原理: 父盒子取决于内容盒子里最高的盒子的高度

(1)多列浮动并排清除浮动影响

(2)给最外侧的盒子在套几个盒子套的盒子数量= 列的数量(每一列都要分配一个背景盒子)

(3)先移动从外面数第2层的盒子然后依次移动第3层…

设置负外边距移动

(4)移动相应的列到相应的背景盒子通过相对定位正值第一个移动的第3列向右移动的是第3列+第2列的宽度…

(5)最外侧盒子添加一个overflow:hidden属性

优点:真的等高兼容性比较好

缺点: 需要嵌套多个标签结构略微复杂理解也比较困难

每一个背景盒子都要设定一致的宽度

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .b {
            width: 100%;
            background-color: yellow;
            margin-left: -30%;
        }
        .a {
            width: 100%;
            background-color: purple;
            margin-left: -30%;
        }
        .c {
            width: 100%;
            background-color: orange;
        }
        .col1 {
            width: 40%;
            height: 200px;
            /* background-color: red; */
            float: left;
            position: relative;
            left: 60%;
        }

        .col2 {
            width: 30%;
            height: 300px;
            /* background-color: yellow; */
            float: left;
            position: relative;
            left: 60%;
        }
        .col3 {
            width: 30%;
            height: 400px;
            /* background-color: blue; */
            float: left;
            position: relative;
            left: 60%;
        }
    </style>
</head>
<body>
    <div class="c">
        <div class="b">
            <div class="a">
                <div class="col1">第一列</div>
                <div class="col2">第2列</div>
                <div class="col3">第3列</div>
                <div style="clear:both"></div>
            </div>
        </div>
    </div>
</body>
</html>