双飞翼布局内容不换行_web前端入门到实战:圣杯布局和双飞翼布局

稍微了解前端的人都知道,圣杯布局和双飞翼布局是前端面试时必问的问题,因为它既能体现你懂HTML结构又能体现出你对DIV+CSS布局的掌握,毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~

事实上,圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局。它们实现的效果是一样的,差别在于其实现的思想。

圣杯布局的出现是来自于a list part上的一篇文章In Search of the Holy Grail。比起双飞翼布局,它的起源不是源于对页面的形象表达。在西方,圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED,可以说是灵感来自于页面渲染。一起来看看这两种布局的区别在哪:

一、双飞翼布局


1d38ec3a10afac91aa525ea21b68ac27.png

可以看到,我们在main里面又加了一个内容层。如果知道盒子模型,就知道我们是不能直接给main添加margin属性,因为我们已经设置了width:100%,再设置margin的话就会超过窗口的宽度,所以我们再创造一个内容层,将所有要显示的内容放到main-content中,给main-content设置margin就可以了。

因为不改变父元素所以只需要给main-content设置margin: 0 200px 0 200px;属性就可以了达到效果

通过缩放页面就可以发现,随着页面的宽度的变化,这三栏布局是中间盒子优先渲染,两边的盒子框子固定不变,即使页面宽度变小,也不影响我们的浏览。如果你有了那么一点理解以后,我们来看看圣杯布局的实现:

二、双飞翼布局


第一步:给出HTML结构:

`

Header内容区

``

中间弹性区

``

左边栏

``

右边栏

``
``

Footer内容区

`学习Q-q-u-n: 767-273-102 ,分享学习的方法和需要注意的小细节

写结构的时候要注意,父元素的的三栏务必先写中间盒子。因为中间盒子是要被优先渲染嘛~并且设置其自适应,也就是width:100%。

第二步:给出每个盒子的样式

`header{width: 100%;height: 40px;background-color: darkseagreen;}``.container{ height:200px;overflow:hidden;}``.middle{width: 100%;height: 200px; background-color: deeppink;float:left;}``.left{ width: 200px;height: 200px;background-color: blue;float:left;}``.right{width: 200px;height: 200px;background-color: darkorchid;float:left;}``footer{width: 100%; height: 30px;background-color: darkslategray;}`

第三步:看此时的效果图

3e47bd8fc232b43caba0e62d9f7830b8.png

大家可以看到,三栏并没有在父元素的一行显示,就是因为中间盒子我们给了百分之百的宽度。所有左右两个盒子才会被挤下来。
那么如何让它们呈现出一行三列的效果呢?那就要让左边的盒子要到中间盒子的最左边,右边的盒子到中间盒子的最右边。换个想法,如果中间盒子不是100%的宽度,那么按照文档流,左边的盒子一定会在中间盒子的后面显示,接着显示右边的盒子。但是现在中间盒子是满屏了的,所以左右两个盒子被挤到下一行显示。我们要做到的是让左右两个盒子都上去。此时,CSS的负边距(negative margin)该上阵了。

第四步:利用负边距布局

1.让左边的盒子上去

需要设置其左边距为负的中间盒子的宽度,也就是.left {margin-left:-100%;}。这样左盒子才可以往最左边移动。

2.让右边的盒子上去

需要设置其左边距为负的自己的宽度,也就是.right {margin-left:-200px;}。这样右盒子才可以在一行的最右边显示出自己。

第五步:看此时的效果图

819ecd6c74160182aeedfeab82bb5524.png

第六步:让中间自适应的盒子安全显示

首先:利用父级元素设置左右内边距的值,把父级的三个子盒子往中间挤。

代码如下:

.container{ padding: 0 200px;} 这里的200px是左右盒子的宽度。

效果如下:

0b2d13fcec3be9ee77860b7d0d9811ad.png

我们可以看到,左右两边的内边距是有了,但是中间盒子上的内容还是被压着。

其次:给左右两个盒子加一个定位,加了定位之后左右两个盒子就可以设置left和right值。

代码如下:

`.left{ position: relative; left: -200px;}``.right{position: relative;right: -210px;`学习Q-q-u-n: 767-273-102 ,分享学习的方法和需要注意的小细节

现在,圣杯布局终于搞定了,也实现了我们要的效果,左右侧的盒子固定,中间盒子自适应,而且中间盒子的内容完全不受影响。你是不是也懂了呢?

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/533600.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java 去掉 t_关于Java:在LocalDateTime中不能删除“ T”

这是问题所在:GetMapping("/main/search")public String search (RequestParam String departure,RequestParam String arrival,RequestParam String departureTime,Model model) {DateTimeFormatter formatter DateTimeFormatter.ofPattern("yyyy-…

数据结构知识点总结_大牛带你学 | 考研数据结构中线性表中顺序结构的知识点总结...

前言我们都知道,数据结构中逻辑结构可以划分为线性结构(线性表)与非线性结构两大类。而存储结构指的是数据元素在计算机中的存储及其逻辑关系的表现,也就是在计算机当中对逻辑结构的表示。线性表的存储结构主要有顺序结构和链式结构两种实现形式。本文主…

java矩形翻转_如何判断一个点在旋转后的矩形中

前言最近在做的一款游戏中,用到点与旋转矩形的判定来获得一个选中的物体。在此做个记录如图所示,黄色的颜料屏是旋转的,如果不做处理直接判断点是否在矩形中,那么点击红点的位置会判定为选中物体。显然这是不对的。如果物体没有旋…

python中用函数设计栈的括号匹配问题_数据结构和算法(Python版):利用栈(Stack)实现括号的匹配问题...

算法数据结构数据结构和算法(Python版):利用栈(Stack)实现括号的匹配问题在平时写程序当中,我们会经常遇到程序当中括号的匹配问题,也就是在程序当中左括号的数量和右括号的数量必须相等。如果不相等的话则程序必然会报错。Hint:在读取程序的…

python创建空元组_Python——元组的基本语法(创建、访问、修改、删除)

原标题:Python——元组的基本语法(创建、访问、修改、删除)Python 元组的使用Python 的元组与列表类似,不同之处在于元组的元素不能修改。元组使用小括号 ( ),列表使用方括号 [ ]。元组创建很简单,只需要在括号中添加元素&#xf…

openssl 生成证书_CentOS7 httpd(Apache)SSL 证书部署

在之前我的文章中我已经搭建了nextcloud服务器,现在我们需要通过域名及https访问怎么办1. 进行了简单的httpd设置后,就可以为网站添加SSL证书功能了。2. 首先得获取证书,有了证书才能添加。我们采用本地上传的方式将SSL证书上传到CentOS上。获…

FJ的字符串java问题_蓝桥杯VIP试题 之 基础练习 FJ的字符串- JAVA

问题描述FJ在沙盘上写了这样一些字符串:A1 “A”A2 “ABA”A3 “ABACABA”A4 “ABACABADABACABA”… …你能找出其中的规律并写所有的数列AN吗?输入格式仅有一个数:N ≤ 26。输出格式请输出相应的字符串AN,以一个换行符结束。…

java仿qq gui_Java仿QQ登入页面

1.[代码][Java]代码package com.myqq.frame;import java.awt.BorderLayout;import java.awt.Color;import java.awt.Cursor;import java.awt.FlowLayout;import java.awt.Font;import java.awt.GridLayout;import java.awt.Image;import java.awt.event.MouseAdapter;import ja…

python数据预处理 重复行统计_Python数据分析之数据预处理(数据清洗、数据合并、数据重塑、数据转换)学习笔记...

1. 数据清洗1.1 空值和缺失值的处理​空值一般表示数据未知、不适用或将在以后添加数据。缺失值是指数据集中某个或某些属性的值是不完整的。​一般空值使用None表示,缺失值使用NaN表示1.1.1 使用isnull()和notnull()函数​可以判断数据集中是否存在空值和缺失值1.1…

java编写系统登录界面_java 登陆界面怎么写,连接数据库后

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼界面是package 界面类;import javax.jws.soap.SOAPBinding.Use;import javax.swing.JButton;import javax.swing.JFrame;import javax.swing.JLabel;import javax.swing.JOptionPane;import javax.swing.JPanel;import javax.swing…

python如何复制oracle数据_Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法...

本文实例讲述了Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法。分享给大家供大家参考。具体实现方法如下:# Export Oracle database tables to CSV files# FB36 - 201007117import sysimport csvimport cx_Oracleconnection raw_input("Enter Or…

JAVA构造函数是不是封装_Java 封装与构造函数

面向对象思想思想的三个特征:封装,继承,多态。封装:表现:函数就是一个最基本的封装体,类也是一个封装体。好处:1、提高了代码的复用性,2、隐藏了实现细节,可以对外提供可…

python获取mysql数据为excel中的sheet_python 从excel、csv、mysql、txt获取数据源

使用python进行数据分析工作的第一步是获取数据源,数据源来可能来自于excel、txt、csv文件、mysql数据库。分别看看这些数据源怎么导入到python中。1. Excel 数据源导入python首先导入pandas 模块import pandas as pdexcel 导入格式为:pd.read_excel( 路…

我的世界seus光影java版下载_我的世界0.17SEUS PE光影材质包(水反高清)下载

我的世界0.17SEUS PE光影材质包已经震撼发布,随着我的世界pe0.17系列版本疯狂的出现,很多玩家都有点开始不适应了,毕竟这个更新的频率和速度太快了,0.16.0版本还没有玩够了,下面给大家提供我的世界0.17SEUS PE光影材质…

针式打印机风格英文字体_可爱漂亮的圣诞节和新年贺卡艺术字体推荐!

圣诞节即将到来,各种相应的促销活动和宴会搞起来,今天macz小编为您带来几款风格可爱漂亮的圣诞节和新年贺卡艺术字体推荐!可以用于卡片、海报、邀请函、徽标、产品介绍、T恤等,效果魅力非常哦!可爱漂亮的圣诞节和新年贺…

golang mysql curd_用 golang 造了个 curd api 的轮子

最近需要写个接口的项目 准备顺便熟悉一下 golang在 github 找了下 golang 的 resetful 接口项目 大部分需要对每张表定义一个 model 文件所以就造了个轮子 不需要定义 model 类型的 curd 接口基于 gin 框架 只支持 mysql只需要改下 config/db.go 数据库配置文件就能直接 go ru…

miniui展示日历能点击_2020年日历设计,除了366天有新字体,还有新形式

点击上方蓝字,把我设置为星标☆吧今天是12月1日,距离2020年还有最后一个月。在我们度过的日子中,我们应该铭记每一天,每一个日子。讲究仪式感的人,才是生活真正的智者。那么,对于2020年的日历,应…

fopen php 读取_PHP使用fopen与file_get_contents读取文件实例分享

php中读取文件可以使用fopen和file_get_contents这两个函数,二者之间没有本质区别,只是前者读取文件的php代码相比后者要复杂一点。本文章通过实例向大家讲解fopen和file_get_contents读取文件的实现代码。需要的码农可以参考一下。fopen读取文件的代码如…

php外部对象如何使用方法,php面向对象全攻略 (三)特殊的引用“$this”的使用...

7.特殊的引用“$this”的使用现在我们知道了如何访问对象中的成员,是通过“对象->成员”的方式访问的,这是在对象的外部去访问对象中成员的形式,那么如果我想在对象的内部,让对象里的方法访问本对象的属性,或是对象…

python编程制作接金币游戏_一个简单的pygame接金币游戏

左右键控制小人移动去接空中下来的金币,接住金币得5分,接不住游戏结束,金币速度会随着level的关数而越来越快import pygame,sys,os,randompygame.init()class rect():#画出小人def __init__(self,filename,initial_position):self.imagepygam…