css布局

最新推荐文章于 2022-06-17 15:26:20 发布

dasiy_j

最新推荐文章于 2022-06-17 15:26:20 发布

阅读量203

点赞数

分类专栏： web前端文章标签： web前端

本文链接：https://blog.csdn.net/dasiy_j/article/details/80281711

版权

web前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

打算仿个淘宝首页，最先想到的就是布局，看了淘宝应该是三列布局，左右两边固定，中间自适应。

关于布局大体是下面几种，就借着这个机会整理一下。本文主要参考几种经典布局的具体实现示例

首先布局一共有以下几种：

1.固定布局，固定宽高

2.流式布局（百分比布局）

流式布局也叫百分比布局。把元素的宽,高,margin,padding不再用固定数值,改用百分比,这样元素的高,margin,padding 会根据页面的尺寸随时调整，已达到适应当前页面的目的.

3.弹性布局，也就是下面会提到的Flexbox布局。

4.浮动布局

5.定位布局，比如下面提到的圣杯和双飞翼。

圣杯布局

圣杯布局主要涉及到浮动，相对定位，以及magin的负值

先贴出全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
</head>
<body>
<header>头部</header>
<div class="container">
    <div class="middle">中间</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>
<footer>尾部</footer>
</body>

body{
min-width: 702px;
}
header{
background:#777777;
clear:both;
}
footer{
background: #777777;
clear:both;
}
.container,.middle,.left,.right{
height: 300px;
}
.container{
border: 1px solid #0a1015;
padding:0 300px 0 200px;

}
.middle{
background: #f0ad4e;
width:100%;
float:left;
}
.left{
background: #b21f2d;
width: 200px;
float:left;
margin-left:-100%;
position:relative;
left:-200px;
}
.right{
background: #0d47a1;
width: 300px;
float:left;
margin-left:-300px;
position:relative;
right:-300px;
}

下面来说说样式的一个变化过程，首先把三列全部向左浮动，左右固定宽度200与300,中间宽度设置100%。

.middle{
background: #f0ad4e;
float:left;
width:100%;
}
.left{
background: #b21f2d;
width: 200px;
float:left;
}
.right{
background: #0d47a1;
width: 300px;
float:left;
}

效果图如下：

因为中间设置了100%的宽度所以左右只能被挤到第二行，我们通过设置margin的负值（关于margin的负值下一篇文章会总结）让左右两部分上到中间所在的行。我们设置左列margin-left为-100%的时候左列会上到上一行，右列我们设置margin-left为-300px的时候它会因为已经超出屏幕而自动换到上一列。

.middle{
background: #f0ad4e;
float:left;
width:100%;
}
.left{
background: #b21f2d;
width: 200px;
float:left;
margin-left:-100%;
}
.right{
background: #0d47a1;
width: 300px;
float:left;
margin-left:-300px;
}

效果图如下：

这个时候又出现了一个新的问题，那就是我们中间的内容被覆盖了，因为我们宽度设的是100%，所以中间列占了一整行，那我们这时候就想如果我们把左右两边各留出200px和300px，然后把左右两边移过去不就可以了。接下来我们设置外围div的padding值。

.container{
padding:0 300px 0 200px;
}

效果图如下：

接下来我们就可以移动左右两列啦，让左右两列相对自己现在的位置向左向右移动200px,300px

.left{
background: #b21f2d;
width: 200px;
float:left;
margin-left:-100%;
position:relative;
left:-200px;
}
.right{
background: #0d47a1;
width: 300px;
float:left;
margin-left:-300px;
position:relative;
right:-300px;
}

最后圣杯布局便完成啦。高度你们可以自己设置，然后我还设置了min-width为702px，在chrome和safari里检测不会崩塌。

双飞翼布局

双飞翼布局其实就是对圣杯布局的一个改进，唯一的差别在于解决中间栏内容不被遮挡的思路不一样。圣杯布局我们遇到的问题是说当左右两栏通过负值移动到中间栏上时遮盖了中间栏的内容。那如果我们把内容单独作为一个div块，我们只要设置这个div块到最外面container的距离即可，这样就不用对左右两列做相对定位了。是不是更简单啦。而且不需要设置min-width它也不会坍塌。

下面是所有代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
</head>
<body>
<header>头部</header>
<div class="container">
    <div class="middle">
        <div class="content">中间</div>
    </div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>
<footer>尾部</footer>
</body>
</html>

header{
background:#777777;
clear:both;
}
footer{
background: #777777;
clear:both;
}
.container,.middle,.left,.right,.content{
height: 300px;
}
.container{
border: 1px solid #0a1015;
}
.middle{
background: #f0ad4e;
width:100%;
float:left;
}
.content{
padding:0 300px 0 200px;
}
.left{
background: #b21f2d;
width: 200px;
float:left;
margin-left:-100%;
}
.right{
background: #0d47a1;
width: 300px;
float:left;
margin-left:-300px;
}

效果图如下：

Flex布局，也就是"弹性布局"

flex布局的语法实现，主要参考阮一峰大神的Flex 布局教程：语法篇。具体实例主要参考阮一峰大神的Flex 布局教程：实例篇；通过flex布局很容易就实现div的垂直居中之类的（关于div垂直居中的方法后续文章会整理）

先贴代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局</title>
</head>
<body>
<header>头部</header>
<div class="container">
    <div class="middle">中间</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>
<footer>尾部</footer>
</body>
</html>

    header{
        background:#777777;
    }
    footer{
        background: #777777;
    }
    .container,.middle,.left,.right{
        height: 300px;
    }
    .container{
        border: 1px solid #0a1015;
        display:flex;

    }
    .middle{
        background: #f0ad4e;
        flex-grow:1;
    }
    .left{
        background: #b21f2d;
        width: 200px;
        order:-1;
    }
    .right{
        background: #0d47a1;
        width: 300px;
    }

效果图如下：

看教程说Webkit 内核的浏览器，必须加上-webkit前缀。但是我在测试过程中发现我没加该前缀在chrome中测试也是成功的，不懂为什么。

flex布局主要用到上诉三个属性，因为要实现中间栏最先渲染，中间栏写在最前面，所以需要使用order让left栏到最左边。flex-grow属性实现中间栏的自适应，关于flex-basis属性因为左右两栏是固长所以直接用了width。

order属性：属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow属性：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-basis属性：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。上述代码中直接使用了width或height。

响应式布局

就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。CSS3中的Media Query

media query的引入方法：

（1）在head中引入

<link media="screen and (max-width:600px)" rel="stylesheet" href="xxx" />

（2）在@import中引入

<style type="text/css" media="screen and (min-width:600px) and (max-width:900px)">  
@import url("css/style.css");  </style>

（3）直接在CSS中使用

@media screen and (max-width: 800px) {    
    // CSS样式  
}

多列布局

css3提供了个新属性columns用于多列布局

dasiy_j

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css布局

打算仿个淘宝首页，最先想到的就是布局，看了淘宝应该是三列布局，左右两边固定，中间自适应。关于布局大体是下面几种，就借着这个机会整理一下。圣杯布局圣杯布局主要涉及到浮动，相对定位，以及magin的先贴出全部代码html文件&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF...
复制链接

扫一扫