该文章主要讨论两栏布局和三栏布局,三栏布局包括很著名的圣杯布局和双飞翼布局

一、两栏布局的七种方法(左边固定,右边自适应)

原理:

  • block水平元素宽度能够跟随父容器调节的流动特性,block级别的元素盒子的宽度具有填满父容器,并随着父容器的宽度自适应的流动特性。
  • 利用CSS的calc( )方法动态设定宽度
  • 利用CSS的新型布局flex layout与grid layout

基本样式布局为:两个盒子相距20px,左侧盒子宽度为120px,右侧盒子宽度自适应

<div class="wrapper" id="wrapper">
<div class="left">
左边固定宽度,高度不固定 </br> </br></br></br>高度有可能会很小,也可能很大。
</div>
<div class="right">
这里的内容可能比左侧高,也可能比左侧低。宽度需要自适应。</br>
基本的样式是,两个div相距20px, 左侧div宽 120px
</div>
</div>
.wrapper {
padding: 15px 20px;
border: 1px dashed #ff6c60;
}
.left {
width: 120px;
border: 5px solid #ddd;
}
.right {
margin-left: 20px;
border: 5px solid #ddd;
}

1.1 双inline-block方案

.wrapper-inline-block {
box-sizing: content-box;
font-size:; /* 消除空格的影响 */
} .wrapper-inline-block .left,
.wrapper-inline-block .right {
display: inline-block;
vertical-align: top; /* 顶端对齐 */
font-size: 14px;
box-sizing: border-box;
} .wrapper-inline-block .right {
width: calc(100% - 140px); /* 注意减号两边一定要有空格,否则该语句无效*/
}

补充知识:

  • box-sizing

简而言之,设置box-sizing为content-box,那么盒子的可绘制区域(即为设定的宽度和高度)仅包括内容,不包括他的边框和内边距,如果绘制内边距和边框,均会在设定的宽度和高度之外绘制;

设置box-sizing为border-box,那么盒子的可绘制区域(即设置的宽度和高度)包括内边距+边框+内容。

  • inline-block:

  • overflow:    overflow 属性规定当内容溢出元素框时发生的事情。

1.2 双float方案

动态计算宽度实现自适应,由于浮动的block元素在有空间的情况下会依次紧贴,排列在一排

.wrapper-double-float {
overflow: auto; /* 清除浮动 */
box-sizing: content-box;
} .wrapper-double-float .left,
.wrapper-double-float .right {
float: left;
box-sizing: border-box;
} .wrapper-double-float .right {
width: calc(100% - 140px);
}

1.3 float+margin-left方案

.wrapper-float {
overflow: hidden; /* 清除浮动 */
} .wrapper-float .left {
float: left;
} .wrapper-float .right {
margin-left: 150px;
}

1.4 absolute+margin-left方法

  • 使用了绝对定位,若是用在某个div中,需要更改父容器的position

  • 没有清除浮动的方法,若左侧盒子高于右侧盒子,就会超出父容器的高度。因此只能通过设置父容器的min-height来放置这种情况

.wrapper-absolute {
min-height: 200px;
}
.wrapper-absolute .left {
position: absolute;
} .wrapper-absolute .right {
margin-left: 150px;
}

1.5 float+BFC方法

.wrapper-float-bfc {
overflow: auto; /* 清除浮动 */
} .wrapper-float-bfc .left {
float: left;
margin-right: 20px;
} .wrapper-float-bfc .right {
margin-left:;
overflow: auto;
}
  • 这个方案同样是利用了左侧浮动,但是右侧盒子通过overflow: auto;形成了BFC,因此右侧盒子不会与浮动的元素重叠。
  • 这种情况下,只需要为左侧的浮动盒子设置margin-right,就可以实现两个盒子的距离了。而右侧盒子是block级别的,所以宽度能实现自适应。
  • 父元素需要清除浮动

1.6 flex方案

.wrapper-flex {
display: flex;
align-items: flex-start;
} .wrapper-flex .left {
flex: 0 0 auto;
} .wrapper-flex .right {
flex: 1 1 auto;
}

flex容器的一个默认属性值:align-items: stretch;。这个属性导致了列等高的效果。
为了让两个盒子高度自动,需要设置: align-items: flex-start;

1.7 grid方案

.wrapper-grid {
display: grid;
grid-template-columns: 120px 1fr;
align-items: start;
} .wrapper-grid .left,
.wrapper-grid .right {
box-sizing: border-box;
} .wrapper-grid .left {
grid-column:;
} .wrapper-grid .right {
grid-column:;
}
  • grid布局也有列等高的默认效果。需要设置: align-items: start;

  • grid布局还有一个值得注意的小地方和flex不同:在使用margin-left的时候,grid布局默认是box-sizing设置的盒宽度之间的位置。而flex则是使用两个div的border或者padding外侧之间的距离。

二、三栏布局

圣杯布局和双飞翼布局:https://www.cnblogs.com/guchengnan/p/10011932.html

2.1 绝对定位法

2.2 margin负值法

2.3 自身浮动法

Day7前端学习之路——多栏布局的更多相关文章

  1. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  2. 前端学习之路-CSS介绍,Html介绍,JavaScript介绍

    CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 & ...

  3. Day6前端学习之路——布局

    一.定位 1)静态定位  position:static(默认) 2)相对定位 position:relative(要配合top.bottom.left.right等属性来使用) 3)绝对定位 pos ...

  4. web前端学习之路

    test 随着自己对于web前端知识了解的越多,越来越发现自己真的好菜 一脸茫然阶段 两年前大学接触网页设计,那时对于网页设计一窍不通,只是看了一本自己大学编的一本入门教材,我甚至不知道那些网页设计的 ...

  5. 前端学习笔记之CSS网页布局

    CSS网页布局   阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...

  6. Day1前端学习之路——概述

    终于下定决心要好好学习前端知识了,以后会把学习过程中的一些随笔记录在这里.HTML.CSS.JavaScript这三大前端语言在大三的时候就有所接触,但是学习的不够深入,这一次希望能够坚持下去. 学习 ...

  7. web前端学习笔记(CSS变化宽度布局)

    一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按 ...

  8. Qt 学习之路:元素布局

    上一章我们介绍了 QML 中用于定位的几种元素,被称为定位器.除了定位器,QML 还提供了另外一种用于布局的机制.我们将这种机制成为锚点(anchor).锚点允许我们灵活地设置两个元素的相对位置.它使 ...

  9. 前端学习之路之CSS (四)

    Infi-chu: http://www.cnblogs.com/Infi-chu/ CSS盒子模型    概念:CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际 ...

随机推荐

  1. Java 几道常见String面试题

    String s1="abc"; String s2="abc"; System.out.println(s1==s2); System.out.println ...

  2. SpringMvc简单使用

    SpringMvc框架的简单使用 第一步:导入依赖 <dependencies> <dependency> <groupId>org.springframework ...

  3. [bzoj1041] [洛谷P2508] [HAOI2008] 圆上的整点

    Description 求一个给定的圆(x^2+y^2=r^2),在圆周上有多少个点的坐标是整数. Input 只有一个正整数n,n<=2000 000 000 Output 整点个数 Samp ...

  4. 为什么在留言处插入<script>alert(1)</script>不弹框

    对于新手来说,往往会在留言地方插入<script>alert(1)</script>来检测是否有存储xss,事实是基本上不会弹框的,为啥? 通过查看源码,可知道<> ...

  5. http轮询,长轮询

    轮询,长轮询 轮询 轮询:客户端定时向服务器发送Ajax请求,服务器接到请求后马上返回响应信息并关闭连接. 优点:后端程序编写比较容易. 缺点:请求中有大半是无用,浪费带宽和服务器资源. 实例:适于小 ...

  6. PTA笔记 堆栈模拟队列+求前缀表达式的值

    基础实验 3-2.5 堆栈模拟队列 (25 分) 设已知有两个堆栈S1和S2,请用这两个堆栈模拟出一个队列Q. 所谓用堆栈模拟队列,实际上就是通过调用堆栈的下列操作函数: int IsFull(Sta ...

  7. Git详解之基础使用

    前言 读完本章你就能上手使用 Git 了.本章将介绍几个最基本的,也是最常用的 Git 命令,以后绝大多数时间里用到的也就是这几个命令.读完本章,你就能初始化一个新的代码仓库,做一些适当配置:开始或停 ...

  8. 保存网页内容到excel

    from selenium import webdriverfrom time import sleepfrom selenium.common.exceptions import NoSuchEle ...

  9. 源码分析系列 | 从零开始写MVC框架

    1. 前言 2. 为什么要自己手写框架 3. 简单MVC框架设计思路 4. 课程目标 5. 编码实战 5.1 配置阶段 web.xml配置 config.properties 自定义注解 5.2 初始 ...

  10. PAT (Advanced Level) Practice 1001-1005

    PAT (Advanced Level) Practice 1001-1005 PAT 计算机程序设计能力考试 甲级 练习题 题库:PTA拼题A官网 背景 这是浙大背景的一个计算机考试 刷刷题练练手 ...