CSS五种布局方式

最新推荐文章于 2024-08-09 16:30:00 发布

.01

最新推荐文章于 2024-08-09 16:30:00 发布

阅读量4.7k

点赞数 17

分类专栏： CSS&HTML

本文链接： https://blog.csdn.net/qq_43340342/article/details/104396049

版权

CSS&HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

是CSS知识体系的重中之重
早期以table为主（简单）
后来以技巧性布局为主（难）
现在有flexbox/grid(偏简单)
响应式布局是必备知识

常用布局方法

table表格布局

<!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>
        .left{
            background:red;
        }
        .right{
            background:blue;
        }
        table{
            width:800px;
            height:200px;
            border-collapse: collapse;
        }
        .table{
            margin-top:20px;
            display: table;
            width:800px;
            height:200px;
        }
        .table-row{
            display: table-row;
        }
        .table-cell{
            vertical-align: center;
            display: table-cell;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td class="left">左</td>
            <td class="right">右</td>
        </tr>
    </table>
    <div class="table">
        <div class="table-row">
            <div class="left table-cell">
                左
            </div>
            <div class="right table-cell">
                右
            </div>
        </div>
    </div>
</body>
</html>

通过div和样式，做的像表格一样

盒模型

display/position

确定元素的显示类型： block/inline/inline-block
确定元素位置：static/relative/absolute/fixed
inline不能设宽高，inline-block可以设宽高

position demo

<!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>
        div{
            background:red;
            width:100px;
            height:100px;
        }
        .p2{
            position: relative;
            left:10px;
            top:-10px;
            background:blue;
        }
        .p3{
            position: absolute;
            left:80px;
            top:30px;
            background: green;
        }
        .p4{
            position: fixed;
            left:0;
            bottom:10px;
        }
    </style>
</head>
<body>
    <div class="p1">
        position:static
    </div>
    <div class="p2">
        position:relative
    </div>
    <div class="p3">
        position:absolute
        <div class="p3-3" style="position:absolute;width:50px;height:50px;background:yellow"></div>
    </div>
    <div class="p4">
        position:fixed;
    </div>
    <div class="p5">
        p5
    </div>
</body>
</html>

p2的偏移是因为指定relative，然后指定right, top，相对自己位置偏移
position: absolute是相对于最近的父级或者最近的absolute，绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的（默认是body）；

注意：css描述的绝对定位概念，没有说明是离他最近的一个已相对定位的盒子进行定位的，所以离他最近的盒子的定位可以是相对定位（relative）和绝对定位（absolute）的，但是在开发中，一般是父盒子设置相对定位的，但是不代表只能是相对定位。

fixed是相对于可视区域的

层级：默认按顺序层叠。手动设置则设z-index。
absolute fixed 可以设z-index，数值大的在上面

flexbox布局

弹性盒子
盒子本来就是并列的
指定宽度即可
没大范围支持，因为兼容性不是很好。
但是很好用。RN用flexbox布局。

flex基本demo

<!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>
        .container{
            width:800px;
            height:200px;
            display: flex;
            border:1px solid black;
        }
        .flex{
            background:red;
            margin:5px;
            flex:1
        }
        
    </style>
</head>
<body>
    <div class="container">
        <div class="flex">
            flex
        </div>
        <div class="flex">
            flex
        </div>
        <div class="flex">
            flex
        </div>
        <div class="flex">
            flex
        </div>
        <div class="flex">
            flex
        </div>
    </div>
</body>
</html>

不单独设置的话，子元素平分父元素。
可以单独设置flex的数值，调整子元素占的宽度

width: 50px;
flex: none;

这样就可以写固定宽度

flex应用demo

<!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>
        .container{
            width:800px;
            height:200px;
            display: flex;
        }
        .left{
            background: red;
            display: flex;
            width:200px;
        }
        .right{
            background: blue;
            display: flex;
            flex:1;
        }
        
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            左
        </div>
        <div class="right">
            右
        </div>
    </div>
</body>
</html>

float布局（重点）

最不好理解最麻烦，但国内用的最多，适配性最好。

元素“浮动”
脱离文档流
但不脱离文本流

float demo1

<!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>
        .container{
            background:red;
            width:400px;
            margin:20px;
        }
        .p1{
            background:green;
            float:left;
            width:200px;
            height:50px;
        }
        .container2::after{
            content: 'aaa';
            clear:both;
            display: block;
            visibility: hidden;
            height:0;
        }
        
    </style>
</head>
<body>
    <div class="container">
        <span class="p1">
            float
        </span>
        <div class="p2">
            很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字
        </div>
    </div>

    <div class="container container2">
        <span>写几个字</span>
        <span class="p1">
            float
        </span>
        <span class="p1">
            float
        </span>
    </div>
    <div class="container" style="height:200px;background:blue;">
    </div>
</body>
</html>

对自身的影响：
形成“块”（BFC）
位置尽量靠上
位置尽量靠左（右）
对兄弟元素的影响：
上面贴非float元素
旁边贴float元素
不影响其它块级元素位置
影响其它块级元素的文本
对父级元素的影响：
从布局上“消失”
高度塌陷（float 高度100px，父级不会被撑到100px）
加伪元素避免塌陷
加伪元素（见demo1的container2) 是一个经典的去除浮动的方式

float demo2

<!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>
        .container{
            width:800px;
            height:200px;
        }
        .left{
            background:red;
            /* float:left; */
            /* height:100%; */
            width:200px;
            position: absolute;
            height:200px;
        }
        .right{
            background:blue;
            float:right;
            width:200px;
            height:100%;
        }
        .middle{
            margin-left:200px;
            margin-right:200px;
        }
        
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            左
        </div>
        <div class="right">
            右
        </div>
        <div class="middle">
            中间
        </div>
    </div>
</body>
</html>

左边向左浮动，右边加margin-left，数值为左边元素的宽度

写三栏的时候不在一行，把right的div写在middle的div前面，就解决了。
经典两栏三栏。
absolute的高度指定不能用百分比，只能用具体数，因为它不能跟父级元素绑定

inline-block布局

像文本一样排block元素
没有清除浮动等问题
需要处理间隙：

container里把font-size设为0px （推荐）
修改div书写的位置，取消造成间隙的换行/空格, demo中“左”div后的换行取消，就可消除间隙，如下列代码

<body>
    <div class="container">
        <div class="left">
            左
        </div><div class="right">
            右
        </div>
    </div>
</body>

demo

<!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>
        .container{
            width:800px;
            height:200px;
            font-size:0;
        }
        .left{
            font-size:14px;
            background:red;
            display: inline-block;
            width:200px;
            height:200px;
        }
        .right{
            font-size:14px;
            background:blue;
            display: inline-block;
            width:600px;
            height:200px;
        }
        
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            左
        </div>
        <div class="right">
            右
        </div>
    </div>
</body>
</html>

响应式布局

在不同设备上正常使用
一般主要处理屏幕大小问题
主要方法：
隐藏+折行+自适应空间
rem/viewport/media query

响应式布局demo1

适配移动端第一步：

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

用媒体查询@media, 判定移动端之后显示, 范围大的@media放在上面

@media (max-width: 640px){
            .left{
                display: none;
            }
        }

完整demo如下：

<!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>
        .container{
            margin:0 auto;
            max-width:800px;
            display: flex;
            border:1px solid black;
        }
        .left{
            display: flex;
            width: 200px;
            background:red;
            margin:5px;
        }
        @media (max-width: 640px){
            .left{
                display: none;
            }
        }
        .right{
            display: flex;
            flex: 1;
            background:blue;
            margin:5px;
        }
        
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            这里是一些不重要的内容，比如友情链接、广告
        </div>
        <div class="right">
            这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。
        </div>
    </div>
</body>
</html>

响应式demo2

改变viewport

<meta name="viewport" content="width=320">

写个脚本，动态适配

<script>
  window.innerWidth;
</script>

换单位：rem
1rem=16px 可以取近似。rem在布局要求非常精确的场景下要谨慎使用

<!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>

国内大部分用float布局。使用起来麻烦不好用，但是适配性好。
苹果用的flexbox。

CSS面试真题

实现两栏（三栏）布局的方法
表格布局
float + margin布局
inline-block
flexbox布局
position:absolute/fixed有什么区别
前者相对最近的absoluter/relative进行定位
后者相对屏幕（viewport）
display: inline-block的间隙
原因：字符间距
解决：消灭字符或者消灭间距
如何清除浮动
为什么清除浮动：浮动元素布局的时候不占父元素的空间，有可能浮动元素会超出父元素，对其它元素产生影响，因此父元素需要避免浮动元素对其它元素的影响。
如何清除：
让盒子负责自己的布局
overflow: hidden(auto)
::after{clear:both}
如何适配移动端页面
viewport
rem/viewport/media query
设计上：隐藏折行自适应