我不知道的css布局

最新推荐文章于 2022-08-06 12:13:59 发布

qq_21439711

最新推荐文章于 2022-08-06 12:13:59 发布

阅读量89

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_21439711/article/details/110748973

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

table表格布局

早期表格布局的解析不是流式的，如果你的表格很长，那浏览器会把整个表格的代码拉完以后才解析，这会造成用户等待的时间过长，进而影响用户体验。但是现在浏览器做了优化，表格也是流式解析的，但是表格布局还存在语义化不明确等问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
.container{
    height:200px;
    width: 200px;
}
.left{
    background-color: red
}
.right{
    background-color: green
}
</style>
<body>
    <table class="container">
        <tbody>
            <tr>
                <td class="left"> 左 </td>
                <td class="right"> 右 </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

在这里插入图片描述

float浮动+margin

两栏布局

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
.container{
    width: 400px;
    height: 200px;
}

.left{
    background-color: yellow; 
    float: left;
    height: 100%;
    width:100px;
}
.right{
    background-color: red; 
    margin-left:100px;
    height:100%;
}
</style>
<body>
    <div class=container>       
        <div class=left></div>
        <div class=right></div>
    </div>
</body>
</html>

在这里插入图片描述
上面代码中最重要的是 margin-left: 100px；这一句将浮动元素的位置空了出来，所以右边栏里面的元素不会影响到浮动的 div。这就是浮动布局的基本思想。

三栏布局

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
.container{
    width: 400px;
    height: 200px;
}


.left{
    background-color: yellow; 
    float: left;
    height: 100%;
    width:100px;
}
.right{
    background-color: green; 
    float: right;
    height: 100%;
    width:100px;
}
.middle{
    background-color: red; 
    margin-left: 100px;
    margin-right: 100px;
    height:100%;
}
</style>
<body>
    <div class=container>       
        <div class=left></div>
        <div class=right></div>
        <div class=middle></div>
    </div>
</body>
</html>

在这里插入图片描述

inline-block 布局

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
.container{
    width: 500px;
    height: 200px;
}
.left{
    background-color: yellow; 
    display: inline-block;
    height: 100%;
    width:200px;
}
.right{
    width: 200px;
    display: inline-block;
    background-color: red; 
    height:100%;
}
</style>
<body>
    <div class=container>       
        <div class=left></div>
        <div class=right></div>
    </div>
</body>
</html>

在这里插入图片描述
将div设置为display:inline-block可以很容易的让div块出现在一行，但是可以看到2个div块之间是有间隙的，这个间隙来自html中的空白，有以下两种解决方案：

将父元素的font-size设置为0

.container{
    width: 500px;
    height: 200px;
    font-size:0;
}

将2个div之间的空格去掉

<body>
    <div class=container>       
        <div class=left></div><div class=right></div>
    </div>
</body>

flexbox

flexbox 布局即弹性盒子布局，它的特点是盒子本来就是并列的，只需要指定宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
.container{
    height:200px;
    width: 600px;
    display: flex;
    border:1px solid black;
}
.flex{
    background-color: yellowgreen;
    border:1px solid red;
    margin:3px;
    flex:1
}
#fixed{
    width: 40px;
    flex:none;
}
#double{
    flex: 2;
}

</style>
<body>
    <div class="container">
        <div class="flex" id="fixed"></div>
        <div class="flex"></div>
        <div class="flex"></div>
        <div class="flex" id="double"></div>
    </div>

</body>
</html>

在这里插入图片描述

响应式设计

viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

利用meta标签将页面的宽度设置成屏幕的宽度（width=device-width）

media(媒体查询)

@media (max-width: 360px) {  
     html { font-size: 12px;    }
}

这段css表明样式只会在宽度小于360px的设备上生效

使用 rem
rem 指的是 html 元素的 font-size，html 元素的 font-size 默认是 16px，所以 1 rem = 16px；然后根据 rem 来计算各个元素的宽高，然后配合 media query 就可以实现自适应。

<!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>responsive</title>
    <style>
        html{
            font-size:20px;
        }
        .container{
            margin:0 auto;
            max-width:800px;
            border:1px solid black;
        }
        .intro{
            display: inline-block;
            width:9rem;
            height:9rem;
            line-height: 9rem;
            text-align: center;
            border-radius: 4.5rem;
            border:1px solid red;
            margin:.3rem;
        }
        @media (max-width: 375px){
            html{
                font-size:24px;
            }
        }
        @media (max-width: 320px){
            html{
                font-size:20px;
            }
        }
        @media (max-width: 640px){
            .intro{
                margin:.3rem auto;
                display: block;
            }
        }
        
    </style>
</head>
<body>
    <div class="container">
        <div class="intro">
            介绍1
        </div>
        <div class="intro">
            介绍2
        </div>
        <div class="intro">
            介绍3
        </div>
        <div class="intro">
            介绍4
        </div>
    </div>
</body>
</html>