CSS3_Node6_布局-分栏布局&弹性布局&响应式设计

最新推荐文章于 2021-06-17 01:02:03 发布

原创最新推荐文章于 2021-06-17 01:02:03 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css3

html/css篇专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了CSS3中的分栏布局、弹性布局和响应式布局。包括各布局类型的使用方法、属性介绍及其应用场景，同时对比了新旧版本语法的差异。

-->CSS3 分栏布局

-->CSS3 弹性布局

-->CSS3 响应式设计

一、分栏布局

column-count：auto | 整数；---控制栏数
column-width： auto | length；---每栏的宽度
column-gap : length ;---两栏之间的间距
column-rule : 宽度，线型，颜色；---栏与栏的间隔线
类似border，solid | dotted | dashed 实线 | 点线 | 虚线
column-width和column-count可以让一个元素进行多列布局
column-gap和column-rule就处在相邻两列之间

column-span : all / none ; 是否跨栏显示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
	width:700px;
	border:1px solid red;
	padding:10px;
	margin:50px auto;
	column-count:3;/*控制栏数*/
	/*column-width:100px;*//*每栏的宽度*/
	column-gap:20px;/*两栏之间的间距*/
	column-rule:2px dashed blue;/*栏与栏的间隔线*/
}
.box h1{
	font-size: 30px;
	text-align: center;
	/* column-span : all / none; 标题是否跨栏显示 */
	column-span:all;
}
.box p{
	font-size: 25px;
	text-indent: 2em;
	line-height: 150%;
}
</style>
</head>
<body>
	<div class="box">
		<h1>标题标题标题标题标题标题标题</h1>
		<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文文章文章文章文章文文章文章文章文章文章文章文章文章文章文章文文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
		<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文文章文章文章文章文文章文章文章文章文章文章文章文章文章文章文文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
	</div>
</body>
</html>

二、弹性布局

1、flexbox：弹性布局优点：

适应性强，在做不同屏幕分辨率的界面时非常实用

可以随意按照宽度、比例划分元素的宽高

可以轻松改变元素的显示顺序

弹性布局实现快捷，易维护

2、弹性布局新版本&老版本语法

/*新版本写法*/

display: flex;  伸缩盒子
align-items: center | flex-start | flex-end ; 对齐方式 /*垂直居中*/
justify-content: center | flex-start | flex-end ; 对齐方式 /*水平居中*/
flex-direction: row  row-reverse  水平布局 ｜ column  column-reverse  垂直布局
flex: number; 分配空间
order: number;  显示顺序


body {
display: -webkit-box;  /* 老版本语法: Safari,  iOS, Android browser, older WebKit browsers.  */
display: -moz-box;    /* 老版本语法: Firefox (buggy) */ 
display: -ms-flexbox;  /* 混合版本语法: IE 10 */
display: -webkit-flex;  /* 新版本语法： Chrome 21+ */
display: flex;       /* 新版本语法： Opera 12.1, Firefox 22+ */


/*垂直居中*/    
  
/*老版本语法*/
  
-webkit-box-align: center; 
  
-moz-box-align: center;
  
/*混合版本语法*/
  
-ms-flex-align: center; 
  
/*新版本语法*/
  
-webkit-align-items: center;
  
align-items: center;

  

/*水平居中*/
  
/*老版本语法*/
  
-webkit-box-pack: center; 
  
-moz-box-pack: center; 
  
/*混合版本语法*/
  
-ms-flex-pack: center; 
  
/*新版本语法*/
  
-webkit-justify-content: center;
  
justify-content: center;

  
margin: 0;
  height: 100%;
  width: 100% /* needed for Firefox */
}

<p>box-ordinal-group：number ;  <span style="color:#00B050;">子元素</span>显示顺序</p><p><span style="color:red;">新语法：</span><span style="color:red;">order: number;</span></p>

2-1、弹性布局老版本写法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;list-style: none;}
html,body{
	width:100%;
	height:100%;
	display: box;/*将一个元素的子元素以弹性布局进行布局*/
	display: -webkit-box;
	display: -moz-box;/*火狐*/
	display: -o-box;/*欧朋*/
	display: -ms-flexbox;/*欧朋*/
	-webkit-box-orient:horizontal;/*子元素的排列方式--横向*/
	/*box-orient:vertical;*//*子元素的排列方式--竖向*/
	-webkit-box-align:center;/*子元素的对齐方式--水平*/
	-webkit-box-pack:center;/*子元素的对齐方式--垂直*/
}
.wrap{
	width:90%;
	height:90%;
	background: pink;
	display: -webkit-box;
	-webkit-box-orient:vertical;
}
 .header{
	height:60px;
	display: -webkit-box;
	-webkit-box-orient:horizontal;
} 
.header .logo{
	width:200px;
	height:60px;
	background: #7AD1D4;
}
.header .nav{
	-webkit-box-flex:3;
	height:60px;
	background: #97F59A;
}
.content{
	/*box-flex：number ;--子元素如何分配剩余空间*/
	-webkit-box-flex:3;
	background: #E389F7;
	display: -webkit-box;
	-webkit-box-orient:horizontal;
}
.content .con1{
	width:150px;
	background: #F0B7A9;
	-webkit-box-ordinal-group:2;
}
.content .con2{
	-webkit-box-flex:3;
	background: #9E9EE5;
	-webkit-box-ordinal-group:3;
}
.content .con3{
	-webkit-box-flex:2;
	background:#F4F56E;
	-webkit-box-ordinal-group:1;
}
.footer{
	height:100px;
	background: #8E7694;
}
</style>
</head>
<body>
<div class="wrap">
	<div class="header">
		<div class="logo">上左--宽高固定</div>
		<div class="nav">上右--高度固定，宽度自适应</div>
	</div>
	<div class="content">
		<div class="con1">中1--高度自适应</div>
		<div class="con2">中2--高度自适应，宽度自适应</div>
		<div class="con3">中3--高度自适应</div>
	</div>
	<div class="footer">底部</div>
</div>
</body>
</html>

2-1、弹性布局新版本写法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;list-style: none;}
html,body{
	width:100%;
	height:100%;
	display: flex;/*将一个元素的子元素以弹性布局进行布局*/
	display: -webkit-flex;
	display: -moz-box;/*火狐*/
	display: -o-box;/*欧朋*/
	display: -ms-flexbox;/*欧朋*/
	flex-direction:row;/*子元素的排列方式--横向*/
	/*flex-direction:column;*//*子元素的排列方式--竖向*/
	align-items:center;/*子元素的对齐方式--水平*/
	justify-content:center;/*子元素的对齐方式--垂直*/

}
.wrap{
	width:90%;
	height:90%;
	background: pink;
	display: -webkit-flex;
	/*-webkit-box-orient:vertical;*/
	flex-direction: column;
}
 .header{
	height:60px;
	display:-webkit-flex;
	/* -webkit-box-orient:horizontal;
	-webkit-box-direction:reverse; */
	flex-direction: row-reverse;/*子元素的排列方式--横向反向*/

} 
.header .logo{
	width:200px;
	height:60px;
	background: #7AD1D4;
}
.header .nav{
	/*-webkit-box-flex:3;*/
	flex:3;/*子元素如何分配剩余空间*/
	height:60px;
	background: #97F59A;
}
.content{
	/*box-flex：number ;--子元素如何分配剩余空间*/
	/*-webkit-box-flex:3;*/
	flex:3;
	background: #E389F7;
	/*display: -webkit-box;*/
	display: -webkit-flex;
	/*-webkit-box-orient:horizontal;*/
	flex-direction: row;/*子元素的排列方式--横向*/
}
.content .con1{
	width:150px;
	background: #F0B7A9;
	order:2;
}
.content .con2{
	/*-webkit-box-flex:3;*/
	flex:3;
	background: #9E9EE5;
	order:3;
}
.content .con3{
	/*-webkit-box-flex:2;*/
	flex:2;
	order:2;
	background:#F4F56E;
	order:1;
}
.footer{
	height:100px;
	background: #8E7694;
}
</style>
</head>
<body>
<div class="wrap">
	<div class="header">
		<div class="logo">上左--宽高固定</div>
		<div class="nav">上右--高度固定，宽度自适应</div>
	</div>
	<div class="content">
		<div class="con1">中1--高度自适应</div>
		<div class="con2">中2--高度自适应，宽度自适应</div>
		<div class="con3">中3--高度自适应</div>
	</div>
	<div class="footer">底部</div>
</div>
</body>
</html>

三、响应式布局

1、Responsive Web Design

将已有的开发技巧（弹性网格布局、弹性图片、媒体和媒体查询）整合起来，
命名为响应式网页设计，是一种针对任意设备对网页内容进行“完美”布局的一种显示机制。
简言之，是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

2、响应式布局优劣
优势
多终端视觉和操作体验风格统一
兼容当前及未来新设备
节约了开发成本，维护成本也降低很多
不足
兼容性：低版本浏览器兼容性有问题
移动带宽流量：相比较手机定制网站，流量稍大，但比较加载一个完整pc端网站显然是小得多
代码累赘，会出现隐藏无用的元素，加载时间加长
在设计的初期就要考虑页面如何在多终端显示，兼容各种设备工作量大

3、适用什么？
对于重内容的网站，例如形象展示，则比较适合使用响应式web设计
不适用什么？
对于重功能的网站，如电子商务类，则更推荐使用独立移动网站

四、响应式实现

CSS3-media Query（媒体查询）
javascript
第三方开源框架
Bootstrap

1、CSS3-media Query（媒体查询）
定义和使用
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置响应式设计的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

CSS 语法
外联CSS语法：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
媒体类型：mediatype
关键字：and|not|only
媒体特征：media feature
实例：
<link rel="stylesheet" media="screen and (min-width:1024px)" href="red.css" />

CSS 语法
内嵌样式的语法：
@media mediatype and|not|only (media feature) { ... }
媒体类型：mediatype
关键字：and|not|only
媒体特征：media feature
实例：<style>
@media all and (min-width:500px) { … }
</style>

媒体类型：mediatype
all 用于所有设备
screen 用于电脑屏幕，平板电脑，智能手机等
print 用于打印机和打印预览
speech 应用于屏幕阅读器等发声设备
aural 用于语音和声音合成器
braille 应用于盲文触摸式反馈设备
embossed 用于打印的盲人印刷设备
handheld 用于掌上设备或更小的装置，如PDA和小型电话
projection 用于投影设备
tty 用于固定的字符网格，如电报和对字符有限制的便携设备
tv 用于电视和网络电视

关键字：and|not|only
and 用来连接条件，然后括号里就是一个媒体特征查询语句
not 用来排除某种媒体类型，即用于排除符合表达式的设备
only 用来限定某种媒体类型，可用来排除不支持媒体查询的浏览器
实例：
@media screen and (min-width: 500px) and (max-width : 800px)
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="red.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-width:240px)" href="w240.css" type="text/css" />

媒体特征：media feature
max-width:500px
min-width:500px
@media screen and (min-width: 320px) and (max-width : 500px)

分辨率精细的终端查询：device-pixel-ratio
如：iphone4以上的retina屏的像素比是2

@media only screen and (min-device-pixel-ratio: 2)

iphone4以上像素比是2，高分辨率Andriod设备像素比是1.5

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;list-style: none;}
@media screen and (min-width:1024px){
	.box{
		height:300px;
		background: red;
		color:#fff;
	}
}
@media screen and (min-width:720px) and (max-width:1024px){
	.box{
		height:200px;
		background: blue;
		color:pink;
	}
}
@media screen and (min-width:320px) and (max-width:720px){
	.box{
		height:100px;
		background:orange;
		color:#666;
	}
}
</style>
</head>
<body>
	<div class="box">
		12
	</div>
</body>
</html>