江苏龙网

  1. 主页 > 生活百科 > >

超详细常用css布局( 二 )

css


3.为了不影响其他元素，给父元素清除浮动
<style>.left {float: left;width: 100px;height: 200px;background: #ce5a4b;}.right {float: right;width: 200px;height: 200px;background: #499e56;}.main {margin-left: 120px;margin-right: 220px;height: 200px;background: #f8cf5f;}.container::after {content: '';display: block;clear: both;}</style><body><div class="container"><div class="left"></div><div class="right"></div><div class="main"></div></div></body>复制代码

缺点：使用的时候只需要注意一定要清除浮动
 
position布局实现步骤
  1. 给 container 设置position: relative，因为绝对定位的元素的参照物为第一个postion不为static的父元素 。
  2. left 向左定位，right 向右定位 。
  3. main 使用绝对定位，通过设置left和right并把两边撑开 。
<style>.container {position: relative;}.left {position: absolute;left: 0;width: 100px;height: 300px;background-color: #ce5a4b;}.main {position: absolute;left: 120px;right: 220px;height: 300px;background-color: #f8cf5f;}.right {position: absolute;right: 0;width: 200px;height: 300px;background-color: #499e56;}</style><body><div class="container"><div class="left"></div><div class="main"></div><div class="right"></div></div></body>复制代码
缺点：绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，导致了这种方法的有效性和可使用性是比较差的
 
float和BFC配合圣杯布局实现步骤
  1. 使左、中、右三栏都通过float进行浮动 。
  2. 将left的margin-left设置为-100%，此时左栏会移动到第一行的首部 。然后再将right的margin-left设置为其宽度的负值：-200px，则右栏也会移动到和左、中栏一行中
  3. 给container一个padding，该padding应该正好等于左、右栏的宽度
  4. 给左、右两栏加上相对布局，然后再通过设置left和right值向外移动 。
<style>.container {overflow: hidden;padding: 0 220px 0 120px;}.container>div {position: relative;float: left;height: 300px;}.main {width: 100%;background-color: #f8cf5f;}.left {width: 100px;margin-left: -100%;left: -120px;background-color: #ce5a4b;}.right {width: 200px;background-color: #499e56;margin-left: -200px;right: -220px;}</style><div class="container"><div class="main"></div><div class="left"></div><div class="right"></div></div>复制代码 
双飞翼布局实现步骤
  1. 使左、中、右三栏都通过float进行浮动 。
  2. 将left的margin-left设置为-100%，此时左栏会移动到第一行的首部 。然后再将right的margin-left设置为其宽度的负值：-200px，则右栏也会移动到和左、中栏一行中
  3. 给 main 的子元素content设置margin: 0 220px 0 120px;，同时设置overflow: hidden使其成为一个BFC
  4. 为了不影响其他元素，给main清除浮动
<style>.container {overflow: hidden;}.container>div {position: relative;float: left;height: 300px;}.main {width: 100%;}.main::after {content: '';display: block;clear: both;}.left {width: 100px;background-color: #ce5a4b;margin-left: -100%;}.right {width: 200px;background-color: #499e56;margin-left: -200px;}.content {height: 100%;margin: 0 220px 0 120px;overflow: hidden;background-color: #f8cf5f;}</style><div class="container"><div class="main"><div class="content"></div></div><div class="left"></div><div class="right"></div></div>复制代码
和圣杯布局类似，只是处理中间栏部分内容被遮挡问题的解决方案有所不同
 
flex布局实现步骤
  1. 给 container 设置为一个 flex 容器display: flex
  2. main 的宽度设置为width: 100%，left 和 right 分别设置为width: 200px和width: 100px
  3. 为了不让 left 和 right 收缩，给它们设置flex-shrink: 0
  4. 使用order属性给三个部分的 DOM 结构进行排序：left：order: 1，main：order: 2，right：order: 3
<style>.container {display: flex;}.main {background-color: #f8cf5f;width: 100%;height: 300px;order: 2;}.left {background-color: #ce5a4b;width: 100px;height: 300px;margin-right: 20px;flex-shrink: 0;order: 1;}.right {background-color: #499e56;width: 200px;height: 300px;flex-shrink: 0;margin-left: 20px;order: 3;}</style><body><div class="container"><div class="main"></div><div class="left"></div><div class="right"></div></div></body>复制代码


推荐阅读


上一篇：广西昭平,茶农赶采白露茶

下一篇：永春县佛手茶品牌形象大使选拔赛报名启动