常见的CSS布局总结

作者: 夜未央_M | 来源:发表于2018-10-22 02:45 被阅读12次

CSS经典布局
css
CSS布局
CSS常见布局总结
css常见布局总结
CSS布局
常见的CSS布局总结
CSS布局
CSS 常见布局问题总结
CSS的布局与居中

这是一片引用别人的文章，因为自己目前掌握还不够透彻，暂时先学习他写的文章，待以后清楚了再补回来这篇。

作者：sunny519111
链接：https://www.jianshu.com/p/be7a452bf707

1.左侧固定，主要内容自适应

主要运用知识点

负边距 margin-left: -.....；
浮动 float:left;
填充 padding;

     <div class="layout">
       <div class="layout_left"></div>
       <div class="layout_main"></div>
     </div>

css样式

.layout:after{
   display: block;
   content: "";
   clear:both;
}
.layout{
  padding-left: 210px;
}
.layout_left,.layout_main{
  height: 100px;
  float: left;
}
.layout_main{
  width:100%;
  background: red;
}
.layout_left{
  width: 200px;
  background: green;
  margin-left: -210px;
}

对应效果请点击,comecomecome.

2. 右侧固定左侧主要内容自适应

主要运用知识点

负边距 margin-left: -.....；
浮动 float;
填充 padding;
注意相对于左边固定浮动变成了右浮动相应的负边距也变成了右

     <div class="layout">
       <div class="layout_main"></div>
       <div class="layout_right"></div>
     </div>

css样式

.layout:after{
   display: block;
   content: "";
   clear:both;
}
.layout{
  padding-right: 210px;
} 
.layout_main{
  width:100%;
  background: red;
  height: 100px;
  float: left;
}
.layout_right{
  float: right;
  width: 200px;
  height: 100px;
  background: green;
  margin-right: -210px;
}

对应效果请点击,comecomecome.

三栏布局

在传统的圣杯布局上有一些改动，效果和圣杯布局相似

左右2边固定，中间内容自适应

主要运用知识点

负边距 margin-left: -.....；
浮动 float;
填充 padding;
注意左右浮动和左右负边距

<div class="layout">
    <div class="layout">
      <div class="layout_left"></div>
      <div class="layout_main"></div>
      <div class="layout_right"></div>
    </div>
</div>

css样式

.layout:after{
   display: block;
   content: "";
   clear:both;
}
.layout{
  padding: 0 210px;
}
.layout_left,.layout_main{
   float: left;
   height: 100px;
}
.layout_left{
  width: 200px;
  margin-left: -210px;
  background: red;
}
.layout_main{
  width: 100%;
  background: #adcdef;
}
.layout_right{
  float: right;
  width:200px;
  height: 100px;
  background: #666;
  margin-right: -210px;
}

对应效果请点击,comecomecome.

2个固定项目都在左边固定，主要内容在项目右边自适应

主要运用知识点

负边距 margin-left: -.....；
浮动 float;
填充 padding;
注意左右浮动和左右负边距

<div class="layout">
     <div class="layout_left1"></div>
     <div class="layout_left2"></div>
     <div class="layout_main"></div>
</div>

css样式

.layout:after{
   display: block;
   content: "";
   clear:both;
}
.layout{
  padding-left: 420px;
}
.layout_left1,.layout_left2,.layout_main{
  float: left;
  height: 100px;
}
.layout_left1{
   width: 200px;
   background: red;
   margin-left: -420px;
}
.layout_left2{
   width: 200px;
   margin-left: -210px;
   background: orange;
}
.layout_main{
  width: 100%;
  background: blue;
}

对应效果请点击,comecomecome.

2个固定项目都在右边固定，主要内容在项目左边自适应

主要运用知识点

负边距 margin-left: -.....；
浮动 float;
填充 padding;
注意左右浮动和左右负边距

<div class="layout">
     <div class="layout_main"></div>
     <div class="layout_right1"></div>
     <div class="layout_right2"></div>
</div>

css样式

.layout:after{
   display: block;
   content: "";
   clear:both;
}
.layout{
  padding-right: 420px;
}
.layout_main{
  width: 100%;
  background: #eee;
  height:100px;
  float: left;
}
.layout_right1,.layout_right2{
  float: right;
  height: 100px;
  width: 200px;
}
.layout_right1{
  background: red;
  margin-right: -210px;
}
.layout_right2{
  background: blue;
  margin-right: -420px;
}

对应效果请点击,comecomecome.

下面是我写的。
借鉴https://blog.csdn.net/baidu_24024601/article/details/52810921?utm_source=blogxgwz0

左右布局

1.左边固定宽度，右边自适应

方法：左元素左浮动+右元素元素设置margin-left为左边元素的宽度（同理可得右固定，左自适应）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
       #left{
           width:300px;
           height: 100%;
           background: #009f95;
           float:left;
       }
        #right{
            margin-left: 300px;
            height: 100%;
            background: #444444;
        }
    </style>
</head>
<body>
    <div id="left">
        left
    </div>
    <div id="right">
        right
    </div>
</body>
</html>