html5学习笔记（六）（摘抄讲义加部分理解）--布局

本文链接：https://blog.csdn.net/danchejikafo/article/details/54925848

视频地址：http://study.163.com/course/courseMain.htm?courseId=1003005

讲义地址：https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/2.html

第 27 章 CSS 传统布局[上]
1.表格布局，基本被淘汰了，不建议使用。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css传统布局（上）</title>
	<link rel="stylesheet" type="text/css" href="css/style12.css">
</head>
<body>
	<table border=0>
			<tr>
				<td colspan="2" class="header">header</td>
			</tr>
			<tr>
				<td class="aside">aside</td>
				<td class="section">section</td>
			</tr>
			<tr>
				<td colspan="2" class="footer">footer</td>
			</tr>
	</table>
</body>
</html>

@charset "utf-8";
body{
	margin: 0;
}
table{
	width:960px;/**固定宽度，宽度不会随窗口大小而改变*/
	/*width:100%;*//**流体布局，宽度会随窗口大小而改变，效果不好*/
	margin: 0px auto;/*上下为0，左右auto则居中*/
	/*border-spacing: 0px;*/
	border-collapse: collapse;
}
.header{
	height: 120px;
	background-color: olive;
}
.aside{
	width: 200px;
	height: 500px;
	background-color: purple;
}
.section{
	width: 760px;
	height: 500px;
	background-color: maroon;
}
.footer{
	height: 120px;
	background-color: gray;
}

2.浮动布局

浮动布局主要采用 float 和 clear 两个属性来构建。只适用于PC端。目前也大量使用。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css传统布局（上）-浮动布局</title>
	<link rel="stylesheet" type="text/css" href="css/style13.css">
</head>
<body>
	<header>header</header>
	<aside>aside</aside>
	<section>section</section>
	<footer>footer</footer>
</body>
</html>

@charset "utf-8";
body{
	margin: 0 auto;
	width: 960px;
}
header{
	height: 120px;
	background: olive;
}
aside{
	width:200px;
	height:500px;
	background-color: purple;
	float: left;
}
section {
	width:760px;
	height: 500px;
	background-color: maroon;
	/*float: left;*/
	float: right;
}
footer{
	height: 120px;
	background-color: gray;
	/*float: left;*//*如果使用这个设置，则必须设置width,不建议使用，直接用clear更好*/
	clear: both;
	
}

改成流体布局：

body{
	margin: 0 auto;
	width: auto;
}

aside{
	width:20%;
	height:500px;
	background-color: purple;
	float: left;
}
section {
	width:80%;
	height: 500px;
	background-color: maroon;
	/*float: left;*/
	float: right;
}

3.定位布局

一．CSS2 提供了 position 属性来实现元素的绝对定位和相对定位。
属性   说明
static   默认值，无定位。
absolute 绝对定位，使用 top、right、bottom、left进行位移。
relative   相对定位，使用 top、right、bottom、left进行位移。
fixed   以窗口参考定位，使用 top、right、bottom、left 进行位移。

脱离文档流的意思，就是本身这个元素在文档流是占位的。如果脱离了，就不占有文档的位置，好像浮在了空中一般，有了层次感。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css传统布局（下）</title>
	<link rel="stylesheet" type="text/css" href="css/style14.css">
</head>
<body>
	<header>header</header>
	111
	<aside>aside</aside>
</body>
</html>

@charset "utf-8";
body{
	margin: 100px;
	height: 800px;
	border:1px solid red;
}
header{
	width: 100px;
	height: 100px;
	background-color: silver;
	/*脱离文档流，以窗口文档左上角 0,0 为起点*/
	/*position: absolute; 
	top:0;
	left:0;
	z-index: 1;*//**z-index: auto	默认层次;数字设置层次，数字越大，层次越高*/

	/**以窗口参考定位，脱离文档流，会随着滚动条滚动而滚动，就像背景固定的那种效果，或者说是悬浮图标，不管滚动体如何滚动，该元素位置不曾变化*/
	/*position:fixed; 
	top:100px;
	left:0;*/

	/**相对定位，不脱离文档流，占位偏移*/
	/*position: relative;
	top:10px;
	left:10px;*/
}
/*aside{
	width: 100px;
	height: 100px;
	background-color: pink;
	position: absolute;
	top:20px;
	left:20px;
	z-index: 2;
}*/

示例中的绝对定位如图显示：

fixed定位如图：

相对定位如图：

如果代码改为：

body{
	margin: 100px;
	height: 800px;
	border:1px solid red;
	/*在body父元素设置一个不需要top和left定位的相对定位，这个叫设置参考点*/
	position: relative;
}

header{
	width: 100px;
	height: 100px;
	background-color: silver;

	position: absolute;
	top:0px;
	left: 0px;
}

效果如图：

，和上面的绝对定位效果不一样，因为有了body父元素设置的相对定位。。

再改一下header:

header{
	width: 100px;
	height: 100px;
	background-color: silver;

	position: absolute;
	top:100px;
	left: 100px;
}

效果如图：

布局代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css传统布局（下）</title>
	<link rel="stylesheet" type="text/css" href="css/style15.css">
</head>
<body>
	<header>header</header>
	<aside>aside</aside>
	<section>section</section>
	<footer>footer</footer>
</body>
</html>

@charset "utf-8";
body{
	width: 960px;
	margin: 0 auto;
	position: relative;
}
header{
	width: 960px;
	height: 120px;
	background-color: olive;
	/**做绝对定位的话必须制定长度和宽度*/
	/*position: absolute;*/
	top:0;
	left:0;
}

aside{
	width: 200px;
	height: 500px;
	background-color: purple;
	/*position: absolute;*/
	top: 120px;
	left: 0;
}
section{
	width: 760px;
	height: 500px;
	background-color: maroon;
	position: absolute;
	top:120px;
	/*left:200px;*/
	right: 0;
}
footer{
	width: 960px;
	height: 120px;
	background-color: gray;
	/*position: absolute;*/
	left: 0;
	top: 620px;
}

其中，注掉的position的绝对定位可以去掉，但是section的绝对定位不能去掉！

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css传统布局（下）</title>
	<link rel="stylesheet" type="text/css" href="css/style16.css">
</head>
<body>
	<header>header</header>
	<aside>aside</aside>
	<section>section
		<textarea></textarea>
	</section>
	<footer>footer</footer>
</body>
</html>

@charset "utf-8";
body{
	width: 960px;
	margin: 0 auto;
}
header{
	height: 120px;
	background-color: olive;
}

aside{
	/*width: 170px;
	height: 470px;*/
	width: 200px;
	height: 500px;
	border: 5px solid green;
	background-color: purple;
	float:left;
	padding: 10px;
	/*CSS3 提供了一个属性 box-sizing，这个属性可以定义元素盒子的解析方式，从而可以选择避免掉布局元素盒子增加内边距和边框的长度增减问题。*/
	box-sizing:border-box;/**border 和 padding 设置后不用于元素的总长度。css3提供的*/
}
section{
	width: 760px;
	height: 500px;
	background-color: maroon;
	float:right;
}
footer{
	width: 960px;
	height: 120px;
	background-color: gray;
	clear:both;
}
/**CSS3 提供了一个 resize 属性，来更改元素尺寸大小。*/
textarea{
	resize:none;/**设置完以后，section里的textarea从之前的可拖动变为不可拖动*/
}

如果不设置box-sizing:border-box;则aside里的width和height必须在原来的基础上去掉border和padding值。

如果让header块可拉伸，则需要配置css3提供的resize属性（来更改元素尺寸大小），并配合使用overflow: auto：

header{
	height: 120px;
	background-color: olive;
	resize: both; 
	overflow: auto;
}

属性说明
none 默认值，不允许用户调整元素大小。
both 用户可以调节元素的宽度和高度。
horizontal 用户可以调节元素的宽度。
vertical 用户可以调节元素的高度。
一般普通元素，默认值是不允许的。但如果是表单类的 textarea 元素，默认是允许的。而普通元素需要设置 overflow:auto，配合 resize 才会出现可拖拽的图形。

--------------------------------------------------

第 28 章 CSS3 多列布局

@charset "utf-8";
/**自适应的三列布局*/
div{
	/*columns:auto 3;*/
   /*columns:150px 3;*//**当浏览器缩放到小于 150 大小时，将变成 1 列显示。而如果是 auto，则一直保持四列。*/

   /**如果没有设置列数只设置每列多少宽度，则会自动设置宽度*/
   column-width: 100px;/*自动分段*/
   column-count: 3; /*列的个数*/
   column-gap: 50px; /**列的间距*/
   column-rule: 2px dashed green;/**分割线*/
}h1{
	text-align: center;
	column-span:all;


}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3多列布局</title>
	<link rel="stylesheet" type="text/css" href="css/style17.css">
</head>
<body>

	<div>
	<h1>大标题大标题大标题大标题大标题大标题大标题大标题</h1>
		<h3>蓝牙1</h3>
		<p>蓝牙在1999年因无线连接设备而被提出，目前的蓝牙5是其第十个版本，同时也向卓越技术更近了一步。它比蓝牙4.2快2倍，长度范围大4倍，并且拥有很酷的新连接功能。</p>
		<h3>蓝牙2</h3>
		<p>蓝牙5能够以高达2Mbps的速度进行数据传输，传输距离长达120米，蓝牙标准制定组织称：如果连接设备之间没有障碍物，那么传输距离会更长。蓝牙5能够以高达2Mbps的速度进行数据传输，传输距离长达120米，蓝牙标准制定组织称：如果连接设备之间没有障碍物，那么传输距离会更长。</p>
		<h3>蓝牙3</h3>
		<p>对于经常将电脑或移动设备与无线扬声器等外围设备配对的用户来说，蓝牙5的应用无疑是一个巨大的好消息，连接丢失的情况大幅下降，使用无线设备的体验大幅提升。</p>
		<h3>蓝牙4</h3>
		<p>蓝牙5将允一个设备向多个设备发送数据，这对于建设智能家庭来说大有益处。例如：如果监控系统检测到小偷，它可以同时激活安全灯和报警系统。</p>
		<h3>蓝牙5</h3>
		<p>蓝牙国际联盟去年12月表示：蓝牙5将在2-6个月内应用到设备上。首批设备将是搭载高通骁龙835处理器的智能手机和平板电脑，其芯片组中应用了蓝牙5。</p>
	</div>
</body>
</html>