文章标题

来源：互联网发布：linux怎么安装ftp服务编辑：程序博客网时间：2024/06/01 08:22

两栏布局

负margin：

效果：

输入图片说明

html

<body><div class="left">    <div>this is left sidebar content</div></div><div class="right">    <div>this is right sidebar content</div></div></body>

css

<style type="text/css">    .left{        width:200px;        float:left;        background-color:pink;    }    .right{        width:100%;        float:left;        margin-left:-200px;    }    .right div{        margin-left:200px;        background-color:blue;    }</style>

此方法也是负margin的一种应用，原理不再赘述，详细参见：[负margin对浮动元素的影响

绝对定位

效果：

输入图片说明

html

<body><div class="left">    <div>this is left sidebar content</div></div><div class="right">    <div>this is right sidebar content</div></div></body>

css

<style type="text/css">    body{        margin:0;    }    .left{        width:200px;        background-color:pink;        position:absolute;left:0;top:0;    }    .right{        width:100%;        background-color:blue;        margin-left:200px;    }</style>

浮动定位

效果：

输入图片说明

html

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

css

<style type="text/css">    body{        margin:0;    }    .left{        width:200px;        background-color:blue;        float:left;    }    .right{        width:100%;        margin-left:200px;        background-color:pink;    }</style>

注意：绝对定位和浮动定位原理相同，区别在于：浮动定位可以清除浮动，使其占据位置，而绝对定位依旧是脱离文档流的。

flexbox

效果：

输入图片说明

html

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

css

<style type="text/css">    body{        display:flex;        align-items:stretch;    }    .left{        background-color:pink;        flex:0 0 200px;    }    .right{        background-color:blue;        flex:1 1 auto;    }</style>

Flex是flex-grow，flex-shrink，flex-basis的缩写

假设以上三个属性同样取默认值，则flex的默认值为0 1 auto
flex:none，则计算值为0 0 auto
flex:auto，计算值为1 1 auto
flex取值为一个非负数字，则flex-grow，flex-shrink取1，flex-basis取0%
flex取值为一个长度或百分比，则视为flex-basis值，flex-grow取1，flex-shrink取1
flex取值为两个非负数字，则分别视为flex-grow和flex-shrink的值，flex-basis取0%
flex取值为一个非负数字和一个长度或百分比，则分别视为flex-grow和flex-basis的值，flex-shrink取1

三栏布局

负margin

效果：

输入图片说明

html

<body><div class="center">    <div class="center_main">center</div></div><div class="left">left</div><div class="right">right</div></body>

css

<style type="text/css">    body{        margin:0;    }    .center{        width:100%;        float:left;    }    .center_main{        background-color:pink;        margin:0 220px;    }    .left{        width:200px;        background-color:blue;        float:left;        margin-left:-100%;    }    .right{        width:200px;        background-color:blue;        float:left;        margin-left:-200px;    }</style>

注意：center的元素必须在html中写在第一个
基本原理：center，left，right均设置浮动，center_main设置margin-right，margin-left，为left和right留出距离，left，right设置margin-left，值分别为100%，-（right元素的宽度），设置margin-left的原因参见：[负margin对浮动元素的影响]

绝对定位

效果：

输入图片说明

html

<body><div class="center">    <div class="center_main">center</div></div><div class="left">left</div><div class="right">right</div></body>

css

<style type="text/css">    body{        margin:0;    }    .center{        width:100%;    }    .center_main{        margin:0 220px;        background-color:pink;    }    .left{        width:200px;        background-color:blue;        position:absolute;left:0;top:0;    }    .right{        width:200px;        background-color:blue;        position:absolute;right:0;top:0;    }</style>

浮动定位

效果：

输入图片说明

html

<body><div class="left">left</div><div class="right">right</div><div class="center">center</div></body>

css

<style type="text/css">    html,body{        margin:0;        padding:0;    }    .left,.right{        width:200px;        background-color:blue;    }    .left{        float:left;    }    .right{        float:right;    }    .center{        background-color:pink;        margin:0 220px;    }</style>

flexbox

效果：

输入图片说明

html

<body><div class="left">left</div><div class="center">center</div><div class="right">right</div></body>

css

<style type="text/css">    body{        display:flex;        align-items:stretch;    }    .left,.right{        background-color:blue;        flex:0 0 100px;    }    .center{        background-color:pink;        flex:1 1 auto;    }</style>

flex：0 0 100px；是指设置left，right元素宽度为100px，不随着父元素的宽改变
flex：1 1 auto；是指center元素可放大，也可缩小，其尺寸可随着父元素的变化而变化，满足自适应要求。

阅读全文

0 0