布局

流式布局

两列布局

一列固定,一列自适应布局

1. 利用float和margin
<style>
.left {
    width: 100px;
    height: 100px;
    float: left;
    background-color: olive;
}
.right {
    height: 100px;
    margin-left: 100px;
    background-color: #abcdef;
}
</style>
<div>
    <div class="left">宽度固定</div>
    <div class="right">宽度自适应</div>
</div>

注:

  • margin要大于固定列的宽度。
2. 利用position属性
<style>
.parent {
    position: relative;
}
.left {
    width: 100px;
    height: 100px;
    background-color: olive;
}
.right {
    position: absolute;
    top: 0px;
    left: 100px;
    right: 0px;
    height: 100px;
    background-color: #abcdef;
}
</style>
<div class="parent">
    <div class="left">宽度固定</div>
    <div class="right">宽度自适应</div>
</div>
3. 利用BFC特性
<style>
.left {
    width: 100px;
    height: 100px;
    float: left;
    background-color: olive;
}
.right {
    height: 100px;
    overflow: hidden;
    background-color: #abcdef;
}
</style>
<div>
    <div class="left">宽度固定</div>
    <div class="right">宽度自适应</div>
</div>

注:

  • 利用BFC块不重叠的特性。

两列自适应布局

1. 利用百分比布局
<style>
.left {
    width: 50%;
    height: 100px;
    float: left;
    background-color: olive;
}
.right {
    width: 50%;
    height: 100px;
    float: left;
    background-color: #abcdef;
}
</style>
<div>
    <div class="left">宽度自适应</div>
    <div class="right">宽度自适应</div>
</div>

三列布局

中间列自适应,左右列固定宽度布局

1. 利用float和margin
<style>
.left {
    width: 100px;
    height: 100px;
    float: left;
    background-color: olive;
}
.center {
    height: 100px;
    margin: 0 100px;
    background-color: pink;
}
.right {
    width: 100px;
    height: 100px;
    float: right;
    background-color: #abcdef;
}
</style>
<div>
    <div class="left">宽度固定</div>
    <div class="right">宽度固定</div>
    <div class="center">宽度自适应</div>
</div>

注:

  • 注意div中的先后顺序。
2. 利用position属性
<style>
div {
    height: 200px;
}
.left {
    position: absolute;
    width: 200px;
    left: 0;
    background-color: blue;
}
.right {
    position: absolute;
    width: 200px;
    right: 0px;
    background-color: olive;
}
.center {
    margin: 0 200px;
    background-color: yellow;
}
</style>
<body>
    <div>
        <div class="left">宽度固定</div>
        <div class="right">宽度固定</div>
        <div class="center">宽度自适应</div>
    </div>
</body>
3. 圣杯布局

<style type="text/css">
.sub,
.main,
.extra{ 
    float: left;
    height: 200px;
}
.sub{
    margin-left: -100%;
    width: 200px;
    background: red;
}
.extra{
    margin-left: -200px;
    width: 200px;
    background: blue;
}
.main{ 
    width: 100%;
}
.main-inner{ 
    margin-left: 200px;
    margin-right: 200px;
    height: 200px;
    background: green;
}
</style>
<body>
    <div class="main">
        <div class="main-inner"></div>
    </div> 
    <div class="sub"></div>
    <div class="extra"></div>
</body>
4. 双飞翼布局
<style type="text/css">
.left,
.middle,
.right{ 
    position: relative;
    float: left;
    height: 200px;
}
.container{
    padding:0 200px 0 200px;
}
.left{
    margin-left: -100%;
    left: -200px;
    width: 200px;
    background: red;
}
.right{
    margin-left: -200px;
    right: -200px;
    width: 200px;
    background: green;
}
.middle{ 
    width: 100%;
    background: blue;
}
</style>
<body>
    <div class="container">
        <div class="middle"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

flexbox

两列布局

<style>
.box {
    display: flex;
    height: 300px;
}
.left {
    width: 200px;
    border: 1px solid olive;
}
.right {
    flex-grow: 1;
    border: 1px solid blue;
}
</style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

三列布局

<style>
.box {
    display: flex;
    height: 300px;
}
.left {
    width: 200px;
    border: 1px solid olive;
}
.center {
    flex-grow: 1;
    border: 1px solid blue;
}
.right {
    width: 200px;
    border: 1px solid grey;
}
</style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

居中问题

水平居中问题

1. text-align

可以将需要居中的元素转成 inline/inline-block后,使用text-align: center来实现居中,

<style>
html {
    text-align: center;
}
.box {
    display: inline-block;
}
</style>
</head>
<body>
    <div class="box">123</div>
</body>

2. margin

<style>
.box {
    width: 300px;
    height: 100px;
    margin: 0 auto;
    border: 1px solid #ccc;
}
</style>
</head>
<body>
    <div class="box"></div>
</body>

水平垂直居中

1. position + margin 负值

需要提前知道居中元素的宽高。



2. flex

无需知道居中元素的宽高,

<style type="text/css">
* {
    padding: 0;
    margin: 0;
}
html,
body {
    height: 100%
}
.main {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center
}
.center {
    width: 300px;
    height: 200px;
    border: 1px solid red;
}
</style>
<body>
    <div class="main">
        <div class="center">水平垂直居中</div>
    </div>
</body>
Copyright & copy https://www.zhuyuntao.cn 2019 all right reserved,powered by Gitbook该文件修订时间: 2019-11-03 12:36:28

results matching ""

    No results matching ""