CSS布局秘诀有哪些 具体怎样实现

很多朋友都对“CSS布局技巧有哪些，具体怎样实现”的内容比较感兴趣，对此小编整理了相关的知识分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获，那么感兴趣的朋友就继续往下看吧！

需要实现横向两列布局：左列固定，右列自适应的效果。

HTML代码：

XML/HTML Code 复制内容到剪贴板

DOCTYPE html>  

html>  

head>  

meta charset="UTF-8">  

title>测试练习title>  

head>  

body>  

div class="parent">   

    div class="side">侧栏div>  

    div class="main">主栏div>  

div>  

body>  

html>  

方法一（推荐）：使用asolute属性实现，需要注意：固定宽的列的高度>自适应宽度列的高度

CSS代码：

CSS Code 复制内容到剪贴板

body{  

    margin:0;  

    padding:0;  

    font-size:30px;  

    font-weight:bold;      

}  

.parent{  

    text-align:center;  

    line-height:200px;  

}      

.side{  

    position:absolute;left:0;top:0;  

    width:200px;  

    height:200px;  

    background:red;  

}  

.main{  

    margin-left:210px;  

    background:blue;  

    height:200px;  

}  

方法二：通过设置float属性（使纵向排列的块级元素，横向排列）及margin属性（设置两列之间的宽度）

CSS代码：

CSS Code 复制内容到剪贴板

body{  

    margin:0;  

    padding:0;  

    font-size:30px;  

    font-weight:bold;      

}  

.parent{  

    text-align:center;  

    line-height:200px;  

}  

.side{  

    width:200px;  

    height:200px;  

    float:left;  

    background:red;  

}  

.main{  

    height:200px;  

    margin-left:210px;  

    background:blue;  

}  

方法三：使用Flex布局

CSS代码：

CSS Code 复制内容到剪贴板

body{  

        margin:0;  

        padding:0;  

        font-size:30px;  

        font-weight:bold;      

    }  

    .parent{  

        text-align:center;  

        line-height:200px;  

        display:flex;  

    }   

    .side{  

        width:200px;  

        height:200px;  

        background:red;  

        margin-right:10px;  

    }  

    .main{  

        background:blue;  

        height:200px;  

        flex:1;  

    }​    

方法四：利用BFC不与浮动元素重叠的特性

CSS代码：

CSS Code 复制内容到剪贴板

 body{  

    margin:0;  

    padding:0;  

    font-size:30px;  

    font-weight:bold;      

}  

.parent{  

    text-align:center;  

    line-height:200px;  

}  

.side {  

  width: 200px;  

  height: 100px;  

  float: left;  

  background: red;  

  margin-right: 10px;  

}  

.main {  

  /* 创建BFC   */  

  overflow: hidden;  

  background: blue;  

  height: 100px;  

}  

到此这篇关于“CSS布局技巧有哪些，具体怎样实现”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!