Web前端中的几种流行布局

CSS 同时被 2 个专栏收录
7 篇文章 0 订阅
4 篇文章 0 订阅

欢迎访问我的博客https://qqqww.com/,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

1 圣杯布局

圣杯布局是一种三列布局,两边定宽,中间宽度自适应

圣杯布局可以将整个div.container看做一个奖杯,div.leftdiv.right看做奖杯的两个耳朵

圣杯布局的原理就是当子元素处于浮动状态时,设置负margin,子元素会叠盖到兄弟元素之上

方法一:利用 BFC 元素与浮动元素不会相互覆盖的特性,实现圣杯布局

  1. 三个盒子都加上背景色,方便观察,两边固定宽度,左边左浮动,右边右浮动,中间创建 BFC
	<div class="left">left</div>
	<div class="middle">middle</div>
	<div class="right">right</div>	
		html, body { margin: 0; padding: 0; }
		.left {
		background: yellow;
			float: left;
			width: 180px;
		}
		.middle {
			background: blue;
			overflow: hidden;    
		}
		.right {
			background: red;
			width: 180px;
			float: right;
		}

BFC实现圣杯布局1

  1. 此时发现div.right这个盒子掉下来了,为什么呢?是因为由于div.middle这个盒子是自适应宽度并且在结构中先渲染,此时会提前挤占剩余宽度,所以会将div.right盒子挤下来,而解决办法就是让div.right盒子先渲染,原理是浮动元素脱离文档流,并提前浮动到右边,且 BFC 元素与浮动元素不会相互覆盖,此时div.middle再去占有剩余宽度就可以了

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		html, body { margin: 0; padding: 0; }
		.left {
		background: yellow;
			float: left;
			width: 180px;
		}
		.middle {
			background: blue;
			overflow: hidden;    
		}
		.right {
			background: red;
			width: 180px;
			float: right;
		}
	</style>
</head>
<body>
	<div class="left">left</div>
	
	<div class="right">right</div>
	<div class="middle">middle</div>	
</body>
</html>
  1. 此时再去浏览器,拉伸一下浏览器或者缩小浏览器,看看效果就两边宽度固定中间自适应了

BFC实现圣杯布局2

方法二:margin的应用

  1. 先把三个盒子呈现出来
	<div class="container">
		<div class="left"></div>
		<div class="middle"></div>
		<div class="right"></div>
	</div>
		* {
			margin: 0;
			padding: 0;
		}
		html, body {
			width: 100%;
		}
		.left, .middle, .right {
			min-height: 150px;
		}
		.left, .right {
			width: 220px;
		}
		.left {
			background-color: yellow;
		}
		.middle {
			background-color: blue;
		}
		.right {
			background-color: red;
		}

圣杯布局之呈现盒子

  1. 此时三者是垂直排列,需要将他们横向排列,所以给三者都添加浮动
.left, 
.middle, 
.right {
		float: left;
}

圣杯布局之浮动

  1. 这时候只是达到了三个盒子在一行的效果,并不能达到前面自适应的需求,而且整个页面不正常了,不着急,继续下一步,设置div.container的盒模型,使得父元素两边留白,留够div.leftdiv.right的空间
		.container {
			padding: 0 220px;
		}
  1. div.middle设置100%宽度,使其自适应
		.middle {
			width: 100%;
		}
  1. 设置div.leftdiv.right的负外边距,让其到div.container留白位置
		.left {
			margin-left: -220px;
		}
		.right {
			margin-right: -220px;
		}

此时惊奇的发现,这三列已经排列正常,且能自适应了

margin实现圣杯布局

  1. 但是发现,div.footer上去了,很简单,这是因为三个浮动元素会脱离标准文档流,所以div.footer会上去占有他们的文档流,解决办法是将div.footer设置一个BFC区域就行,BFC区域详细文档可以看BFC
.footer {
    overflow: hidden;
}

圣杯布局

完整代码看这里:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		html, body { width: 100%; margin: 0; padding: 0; }
		.header,
		.footer {
			overflow: hidden;
			width: 100%;
			background-color: #ccc;
			text-align: center;
		}
		.container {
			padding: 0 220px;
		}
		.left,
		.middle,
		.right {
            position: relative;
			float: left;
			min-height: 150px;
		}
		.left,
		.right {
			width: 220px;
		}
		.left {
			margin-left: -220px;
			background-color: yellow;
		}
		.middle {
			width: 100%;
			background-color: blue;
		}
		.right {
			margin-right: -220px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="header">header</div>
	<div class="container">
		<div class="left">left</div>
		<div class="middle">middle</div>
		<div class="right">right</div>
	</div>	
	<div class="footer">footer</div>
</body>
</html>

2 双飞翼布局

看完了圣杯布局,来看双飞翼布局,其实和圣杯布局差不多,可以将div.container看做一只大鸟,将div.middle看做鸟的身体,将div.leftdiv.right看做鸟的两个翅膀

实现方式与圣杯布局差不多,但在解决中间栏div.middle部分的思路不一致

直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		html, body { width: 100%; margin: 0; padding: 0; }
		.header,
		.footer {
			clear: both;
			width: 100%;
			background-color: #ccc;
			text-align: center;
		}
		.left,
		.main,
		.right {
			float: left;
			height: 150px;
			text-align: center;
		}
		.left,
		.right {			
			width: 220px;
		}
		.left {
			margin-left: -100%;
			background-color: yellow;
		}
		.main {
			width: 100%;
		}
		.middle {
			min-height: 150px;
			margin: 0 220px;
			background-color: blue;
		}
		.right {
			margin-left: -220px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="header">header</div>
	<div class="container">
		<div class="main">
			<div class="middle">middle</div>
		</div>
		<div class="left">left</div>
		
		<div class="right">right</div>
	</div>	
	<div class="footer">footer</div>
</body>
</html>

2.1 圣杯布局 VS 双飞翼布局

主要是针对于中间div.middle的处理思路不一样
圣杯布局是先留白,在用margin让两边过去,利用了相对布局
双飞翼布局多创建一个div,包裹middle,利用margin为负值来布局

相比较而言,双飞翼布局比圣杯布局多用了个divcontainerpadding不需要加了,相对布局position: relative,双飞翼布局的子divmargin布局

注意:两种布局一般都需要将div.middle这一栏提到结构div.left的上面先渲染

前面分析了圣杯布局和双飞翼布局,了解到他们的原理实际上都是是当子元素处于浮动状态时,设置负margin,子元素会叠盖到兄弟元素之上

那么将中间是三个盒子的代码再复制一份,嵌套在div.middle中,看看效果

圣杯嵌套

此时会发现,中间div.middle部分多一部分盒子,且依然满足两边固定,中间宽度自适应,这个很像Bootstrap里的栅格嵌套

3 栅格布局

Bootstrap的栅格布局提供了一套响应式的解决方案,其实把这套布局拆分来看,分为这几部分:

  1. container的设计
  2. 响应式布局实现

其中行和列的布局原理和圣杯布局原理一样

3.1 container设计

container设计

3.2 响应式布局实现

@media媒体查询

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {/*当宽度大于768px时触发*/
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {/*当宽度大于992px时触发*/
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {/*当宽度大于1200px时触发*/
  .container {
    width: 1170px;
  }
}
.container-fluid { /*这个是宽度默认*/
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

3.3 行(row)

row实现

.row {
  margin-right: -15px;
  margin-left: -15px;
}

3.4 列(col)

Bootstrap分别将他们分割成12份,意思是你可以随意使用者12份,加起来要正好12,并能自己调整分配数字

column

Bootstrap实现了更好的响应式布局,列的种类是有很多种的
.col-xs-* 针对超小屏幕 手机(<768px)
.col-sm-* 小屏幕 平板 (≥768px)
.col-md-* 中等屏幕 桌面显示器 (≥992px)(栅格参数)
.col-lg-* 针对特大的(≥1200px)

例子:

表示小屏幕手机采用col-sm-6布局,中屏幕手机采用col-md-4布局

<div class="col-sm-6 col-md-4"></div> 

Bootsrap中关于栅格布局的代码实现,很多,这里不粘贴了,原理就是前面所说的,可以去官网看

当然,Bootstrap远不止实现了上面那点东西,例如 .col-md-offset-* .col-md-push-* 能够实现很好的细节的排版等等很多,这个神奇的东西还是需要慢慢领悟的~~,下面不能废话了,继续回归正题,说布局

4 Flex布局

请移步:Flex布局

5 绝对定位布局

绝对定位布局很多地方都有应用,依靠绝对定位,想定到哪,定到那,这里不细说

  • 3
    点赞
  • 0
    评论
  • 23
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

详尽的前端笔记,包含html和css部分,由xmind8做的笔记。css部分:编写的位置 1.内联样式 将样式编写到标签的style属性 <p style="color:red;"></p> 这种样式只会对当前标签起作用,不能对样式进行复用,不方便后期维护,不推荐使用 2.内部样式表 将样式表编写到head的style标签 <style type="text/css"></style> 使用内部样式表,进一步将表现和结构分离,可以同时为多个元素设置样式,方便后期的维护 3.外部样式表 将样式表编写到外部的CSS文件,然后通过link标签将外部文件引入 <link rel="stylesheet" type="text/css" href="文件的路径"/> 将样式编写到外部样式表,可以在不同的页面使用同一个样式表,完全将表现和结构分离,方便后期的维护,推荐使用的方式 编写的位置 1.内联样式 将样式编写到标签的style属性 <p style="color:red;"></p> 这种样式只会对当前标签起作用,不能对样式进行复用,不方便后期维护,不推荐使用 2.内部样式表 将样式表编写到head的style标签 <style type="text/css"></style> 使用内部样式表,进一步将表现和结构分离,可以同时为多个元素设置样式,方便后期的维护 3.外部样式表 将样式表编写到外部的CSS文件,然后通过link标签将外部文件引入 <link rel="stylesheet" type="text/css" href="文件的路径"/> 将样式编写到外部样式表,可以在不同的页面使用同一个样式表,完全将表现和结构分离,方便后期的维护,推荐使用的方式 基本语法 选择器 通过选择器可以选页面的一组元素,然后为其设置样式 元素选择器 根据标签名,选页面的指定元素 语法:标签名{ } 例子: div{} p{} h1{} id选择器 根据元素的id属性值选一个唯一的元素 语法:#id {} 例子: #box1{} #hello{} 类选择器 根据元素的class属性值,选一组元素 语法:.class{} 例子: .hello{} .box{} 通配选择器 选页面的所元素 语法:*{} 通配选择器的性能比较差,尽量避免使用 并集选择器 可以同时选符合多个选择器的元素 语法:选择器1,选择器2,选择器N{} 例子: div,p,#box,.hello{} 交集选择器 可以选满足多个条件的元素 语法:选择器1选择器2选择器N{} 例子:p.hello{} 后代元素选择器 选指定元素的指定后代元素 语法:祖先元素 后代元素{} 例子: div span {} div p{} 子元素选择器 选指定元素的指定子元素 语法:父元素 > 子元素 {} 例子: div > span {} div > p{} 声明块 声明块实际上就是一个一个CSS声明 声明 每一个CSS声明都是一个样式,实际上就是一个名值对的结构 名和值之间使用:链接 :左边是样式的名字 :右边是样式的值 每一个声明以;结尾 例子 color:red; font-size:20px; 元素之间的关系 父元素 直接包含子元素的的元素叫做父元素 子元素 直接被父元素包含的元素叫做子元素 祖先元素 直接或间接包含后代元素的元素叫做祖先元素,父元素也是祖先元素 后代元素 直接或间接被祖先元素包含的元素叫后代元素,子元素也是后代元素 兄弟元素 拥相同父元素的元素叫做兄弟元素 块元素和内联元素 块元素 块元素会独占页面的一行,无论他的内容的多少 一般使用块元素对页面进行布局 常见的块元素 div p h1~h6 内联元素 内联元素只占用自身的大小,不会独占一行 内联元素也叫行内元素(inline) 一般内联元素都是用来为文本来设置效果 常见的内联 span a img 包裹规则 一般都是使用块元素去包裹内联元素,而不会使用内联去包裹块元素 a元素可以包含任意元素,除了a本身 p元素不能包含任何块元素 伪类和伪元素 伪类和伪元素用来表示元素所处的一个特殊的状态,或者是一个特殊的位置 :link 表示一个普通的链接(未访问过的链接) :visited 表示访问过的链接 :hover 鼠标移入的链接,也可以为其他元素设置hover :active 正在被点击的链接,也可以为其他元素设置active :focus 表示元素获取焦点的状态,一般用于文本框 ::selection 表示内容被选的状态 在火狐使用::-moz-selection来代替 :first-letter 表示第一个字符 :first-line 表示文字的第一行 :before 选元素的最前边 一般该伪类都会结合content一起使用,通过content可以向指定位置添加内容 :after 选元素的最后边 一般该伪类都会结合content一起使用,通过content可以向指定位置添加内容 属性选择器 根据元素的属性选择指定元素 [属性名] 选取含指定属性的元素 [属性名="属性值"] 选取属性值等于指定值的元素 [属性名^="属性值"] 选取属性值以指定内容开头的元素 [属性名$="属性值"] 选取属性值以指定内容结尾的元素 [属性名*="属性值"] 选取属性值包含指定内容的元素 兄弟元素选择器 选取后一个兄弟元素 前一个 + 后一个 选取后边所的兄弟元素 前一个 ~ 后边所 子元素的伪类 :first-child 寻找父元素的第一个子元素,在所的子元素排序 :last-child 寻找父元素的最后一个子元素,在所的子元素排序 :nth-child 寻找父元素的指定位置子元素,在所的子元素排序 例子 p:nth-child(3) 可以使用even,来找到偶数的子元素 可以使用odd,来找到奇数的子元素 :first-of-type 寻找指定类型的第一个子元素 :last-of-type 寻找指定类型的最后一个子元素 :nth-of-type 寻找指定类型的指定子元素 否定伪类 从一组元素将符合要求的元素剔除出去 语法: :not(选择器) 例子: .abc:not(div) HTML,超文本标记语言 负责页面的结构,定义出页面的各个组成部分 HTML是采用纯文本的形式的编写,采用HTML标签来标识出页面的不同部分 标签 成对出现 <标签名></标签名> 自结束标签 <标签名 /> 属性 通过属性可以设置标签的效果 属性需要定义在开始标签或这自结束标签 属性实际上是一组一组名值对结构 例子: <标签名 属性名="属性值" 属性名="属性值"></标签名> <标签名 属性名="属性值" 属性名="属性值" /> HTML页面的基本结构 常用标签 <html> 网页的根标签 一个页面且只一个根标签 网页的所内容都需要写在html标签的内部 <head> 网页的头部 该标签的内容不会在网页直接显示 该标签用于帮助浏览器解析页面 子标签 <title> 用来设置网页的标题 默认会在浏览器的标题栏显示 搜索引擎检索网页时,会主要检索title的内容,它会影响到页面在搜索引擎的排名 <meta> 用来设置网页的元数据,比如网页使用的字符集 <meta charset="utf-8" /> 设置网页的关键字 <meta name="keywords" content="关键字,关键字,关键字,关键字"/> 设置网页的描述 <meta name="description" content="网页的描述"/> 请求的重定向 <meta http-equiv="refresh" content="秒数;url=地址" /> <body> 网页的主体 网页的可见部分都需要在body编写 <h1> ~ <h6> 标题标签 在html一共六级标题 六级标题,h1最重要,h6最不重要,一般页面只会使用h1~h3 h1的重要性仅次于title,浏览器也会主要检索h1的内容,以判断页面的主要内容 一般一个页面只能写一个h1 <p> 段落标签 <br /> 换行标签 <hr /> 水平线标签 内联框架 可以向一个页面引入其他的外部页面 <iframe></iframe> 属性 src 外部页面的地址,可以使用相对路径 width和height 可以设置框架的宽度和高度 name 可以为内联框架指定一个名字 可以将该属性值设置为超链接的target属性的值 这样当点击超链接时,页面将会在相应的内联框架打开 内联框架的内容不会被搜索引擎所检索,所以开发尽量不要使用内联框架 超链接 可以使当前页面跳转到其他的页面 <a>链接的文字</a> 属性 href 指向链接跳转的目标地址,可以是一个相对路径 还可以是#id属性值,这样当点击超链接以后,将会跳转到当前页面的指定位置 可以使用mailto:来创建一个发送电子邮件的超链接 target 指定在哪个窗口打开链接 可选值 _self 默认值,默认在当前窗口打开链接 _blank 在新窗口打开链接 内联框架的name属性值 在指定的内联框架打开链接 注释 语法 <!-- 注释内容 --> 注释的内容不会在页面显示,但是会在源码显示,我们可以通过注释来说明网页的代码 也可以通过注释隐藏一些页面不想显示的内容 实体 在HTML页面一些特殊符号是不能直接使用,需要使用实体来代替这些特殊符号 实体也可以称为转义字符 实体的语法 &实体名; 常用的实体 空格   < < > > 版权符号 © 图片标签 <img /> 使用图片标签可以向页面引入一个外部图片 属性 src 指向一个外部图片的路径,可以使用相对路径 alt 指定一个在图片无法加载时对图片的描述 搜索引擎主要通过该属性来识别图片的内容 如果不写该属性则搜索引擎会对图片进行收录 width 设置图片的宽度 height 设置图片的高度 图片的格式 JPEG 颜色丰富的图片,如,照片 GIF 颜色单一,简单透明的图片,动态图 PNG 颜色丰富,复杂透明的图片 图片选择的原则 效果一致,用小的 效果不一致,用效果好的 相对路径 相对于当前资源所在的目录的路径 可以使用../返回一级目录,返回几级使用几个../ xHtml语法规范 1.HTML不区分大小写,但是尽量使用小写 2.HTML的注释不能嵌套 3.标签必须结构完整 要么成对出现 要么自结束标签 4.标签可以嵌套但是不能交叉嵌套 5.属性必须值,且值必须加引号,单引号双引号都可以 文本标签 <em> 表示语气上的强调 <strong> 表示内容的重要性 <i> 表示单纯的斜体 <b> 表示单纯的加粗 <small> 表示细则一类的内容 <cite> 表示参考的内容,凡是加书名号的都可以使用cite <q> 短引用,行内引用 <blockquote> 长引用,块级引用 <sup> 上标 <sub> 下标 <del> 删除的内容 <ins> 插入的内容 <pre> 预格式标签,可以保留代码空格换行这些格式 <code> 表示程序代码 列表 无序列表 使用ul来创建一个无序列表,在列表使用li来表示一个列表项 无序列表使用符号作为项目符号 序列表 使用ol来创建一个无序列表,在列表使用li来表示一个列表项 使用序的序号作为项目符号 定义列表 列表相关的元素都是块元素,他们之间可以互相嵌套 去除项目符号 list-style:none
©️2021 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值