从前端到全栈-基础能力-css-布局方式

纵有千般好

于 2021-05-12 08:31:41 发布

阅读量69

点赞数

分类专栏：从前端到全栈

本文链接：https://blog.csdn.net/weixin_48292956/article/details/116645179

版权

从前端到全栈专栏收录该内容

20 篇文章 0 订阅

订阅专栏

CSS 的布局应该是 CSS 体系中的重中之重了，主要的布局方式有 table 表格布局（早期），float 浮动布局和 flex 布局，还有针对于移动端的响应式布局，不论是工作还是面试都是非常重要的知识。

1、table 布局

table 布局是最简单的布局方式了，下面我们来看一个简单的例子

<!DOCTYPE html>
<html>
<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>
        <tbody>
            <tr>
                <td> 左 </td>
                <td> 右 </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

table 的特性决定了它非常适合用来做布局，并且表格中的内容可以自动居中，这是之前用的特别多的一种布局方式

而且也加入了 display：table;dispaly:table-cell 来支持 teble 布局。用法如下

<style>
.table{
    display: table
}
.left{
    display: table-cell;
}
.right{
    display: table-cell
}
</style>
<div>
    <div></div>
    <div></div>
</div>

2、 flex 布局

盒模型：计算一个盒子占用的空间是 content + padding + border + margin

flexbox 布局即弹性盒子布局，它的特点是盒子本来就是并列的，只需要指定宽度，来看一个经典的三栏布局的例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
.container{
    height:200px;
    width: 200px;
    display: flex
}
.left{
    background-color: red; 
    flex: 1;
}
.middle{
    background-color: yellow; 
    flex: 1;    
}
.right{
    background-color: green;
    flex: 1;
}
</style>
<body>
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

但是 flexbox 布局方式浏览器的支持不是太好，有一些兼容性的问题，但是是未来布局的趋势。

3、 float 布局

float 布局应该是目前各大网站用的最多的一种布局方式了，但是也特别复杂

首先，什么是浮动？

浮动元素是脱离文档流的，但不脱离文本流，这是什么意思呢，用过 word 的应该知道有一种图片环绕的方式是文字环绕吧，就是这种效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
.container{
    width: 200px;
    background-color:red;
}
.left{
    background-color: yellow; 
    float: left;
    height: 50px;
    width:50px;
}
.right{
    background-color: yellow; 
    float: right;
    height: 50px;
    width:50px;
}
</style>
<body>
    <div>       
        <span>float</span>
        <span>我是字</span>
        <span>float</span>
    </div>
    <div style="height: 200px;background: blue">      
    </div>
</body>
</html>

4、响应式布局
这个布局请大家参考https://blog.csdn.net/ctt08225/article/details/88430204

集百家之长，成就我的全栈路，该篇文章来源于html中文网