CSS布局

布局概述

在进行页面布局时主要考虑以下几个方面

• 要有整体意识
• 从外向内，层层递进
• 模块化
• 命名规则

实现网页的页面布局一般有三种方法：表格布局、框架布局、DIV+CSS页面布局

表格布局优势：
（1）实现方式比较简单。
（2）各个元素可以位于表格独立的单元格中，相互影响较小
（3）对浏览器的兼容性较好。
表格布局的缺陷:
（1）在某些浏览器 下(例如IE),表格只有在全部下载完成后才可以显示，数据量比较大时会影响网页的浏览速度。
（2）搜索引擎难以分析较复杂的表格，而且网页样式的改版也比较麻烦。
（3）在多重表格嵌套的情况下，代码可读性较差，页面的下载速度也会受到影响。
因此：一般不采用表格布局，除了规模较小的网站之外。
**框架布局指利用框架对页面空间进行有效的划分，每个区域可以显示不同的网页内容，各个区域之间互不影响。
**
框架布局优点：
（1）网页更整洁、清晰，网页的下载速度较快。

框架布局缺点：
（1）框架用得较多，会影响网页的浏览速度。
（2）框架和浏览器的兼容性不好，保存比较麻烦，应用的范围有限
因此：一般也只应用于较小规模的网站。

** 对于规模较大、比较复杂的网站大多数采用DIV+CSS方式进行布局。DIV+CSS布局方式具有较为明显的优势:
（1）内容和表现相分离。
（2）对搜索引擎的支持更加友好。
（3）文件代码更加精简， 执行速度更快。
（4）易于维护。**

CSS布局常用属性

定位属性（position）

定位允许的是从正常的文档流布局中取出元素，并使他们具有不同的行为。

静态定位(static)

.static{
position:static;
}

static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。
静态定位是元素默认的定位方式，是各个 吗 v 元素在HTML文档流中的默认位置：在静态定位方式中，无法通过位置偏移属性（top、bottom、left、right）来改变元素位置。

相对定位（relative）

相对定位是普通文档流的一部分，相对于本元素在文档流原来出现位置的左上角进行定位。在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。虽然其移动到其他位置，但该元素仍占据原来未移动时的位置，该元素移动后会导致其覆盖其他框元素。

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

绝对定位（absolute）

绝对定位是脱离文档流的，不占据其原来未移动时的位置，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

固定定位（fixed）

一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。
一个固定定位元素不会保留它原本在页面应用的空隙（脱离文档流），并且移动浏览器对fixed的支持很差。

层叠定位属性（z-index）

多个块元素形成多个层。可以使用z-index属性对这些层进行层叠设置。z-index属性设置一个定位元素沿z轴的位置，z轴定义为垂直延伸到显示区的轴。数越大越显示到上方。
**注意:**元素可拥有负的z-index属性值、而且z-index仅能在绝对定位元素上起作用。

浮动属性（float）

浮动的框可以向左或者向右移动，直到其外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档普通流中，所以文档普通流中的块元素表现得就像浮动框不存在一样。

基本浮动定位（float属性）

在CSS中，通过float属性可以实现元素的浮动，而且可以定义是哪个方向浮动。
在CSS中任何元素都可以浮动，并且浮动元素会生成一个块级框，而不论本身是何种元素。

清除浮动属性

clear属性规定元素的哪一侧不允许出现浮动元素。在CSS中是通过自动为清除元素（即设置了clear属性的元素）增加上外边距实现的。

**例如：**图像的左侧和右侧均不允许出现浮动元素。

img{
    float:left;     /* 左浮动*/
    clear:both;     /* 左右两侧都不允许出现浮动*/
}

拓展1：溢出与剪切

visible

当开发人员将矩形队形的overflow属性设置为visible时，如果内容区域的大小能够容纳矩形对象，浏览器会正常显示子矩形对象‘当内容区域无法容纳子矩形区域时，浏览器会在内容区域之外显示完整的矩形形象。

hidden

当开发人员将矩形独享的overflow属性设置为hidden时，如果内容区域的大小能够容纳子矩形对象，浏览器会正常显示子矩形对象，当内容区域无法容纳子矩形区域时，浏览器会显示内容区域之内的子矩形对象，超出内容区域的则不显示。

seroll

当开发人员将矩形对象的overflow属性设置为scroll时，如果内容区域的大小能够容纳子矩形对象，浏览器会正常显示子矩形对象，同时显示滚动条功能，让用户能够通过浏览完整的子矩形形象。

auto

当开发人员将矩形对象的overflow属性设置为auto时，如果内容区域的大小能够容纳子矩形对象，浏览器会正常显示子矩形对象，当内容区域无法容纳子矩形对象时，浏览器会在内容区域之内显示完整的子矩形对象，同时显示滚动条并启用滚动条功能，让用户能通过滚动条浏览完整的子矩形对象。

拓展2：对象的显示与隐藏

在CSS中，display属性设置一个元素如何显示，visibility属性指定一个元素可见还是隐藏。隐藏的一个元素可以通过把display属性设置为none，或把visibility属性设置为hidden。这两种方法会产生不同的结果。

visibility属性

使用visibility属性设置的对象是否可见，该属性的语法格式如下。

visibility：visible | hidden
注意visibility：hidden可以隐藏某个元素，但隐藏恶毒元素仍需占用空间。也就是说，该元素虽然被隐藏了，但是仍然会影响布局

display属性

display:none
此方法同样可以隐藏某个元素，并且隐藏的元素不会占用任何空间。

DIV+CSS布局的应用

单列布局

网页布局的基础，所有复杂的布局都是在此基础上演变而来的。

<div id="main">
    <div id="d3"></div>
    <div id="d4"></div>
</div>

#d3{
    height: 350px;
    width: 120px;
    background: red;
    float: left;
}

#d4{
	height: 350px;
    width: 70%;
	background: blue;
}

双列布局

两列自适应宽度

#d3{
    height: 350px;
    width: 120px;
    background: red;
    float: left;
}
#d4{
	height: 350px;
    width: 70%;
	background: blue;
}

两列自适应宽度

#d3{
    height: 350px;
    width: 120px;
    background: red;
    float: left;
}

#d4{
	height: 350px;
    width: 70%;
	background: blue;
}

两列固定宽度居中

#d3{
	height: 300px;
	width: 120px;
	background: red;
	float: left;
}
#d4{
	height: 350px;
	width: 650px;
	background: blue;
	margin-left: 120px;
}
#main{
	width: 770px; 
	 margin: auto;
}

使用CSS盒布局的三列布局

对于一些大型网站，特别是电子商务类网站，由于内容分类 较多，通常需要采用”三列布局“的页面布局方式。

<div id="main">
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</div>

三列自适应宽度

#d1{
    height: 200px;
    width: 300px;
    background: red;
    float: left;
}
#d2{
    height: 200px;
    width: 300px;
    background: blue;
    float: left;
}
#d3{
    height: 200px;
    width: 300px;
    background: greenyellow;
    float: left;
}

三列固定宽度居中

#d1{
    height: 200px;
    width: 300px;
    background: red;
    float: left;
}
#d2{
    height: 200px;
    width: 300px;
    background: blue;
    float: left;
}
#d3{
    height: 200px;
    width: 300px;
    background: greenyellow;
    float: left;
}
#main{
    width: 900px;
    margin:0 auto;
}

注意：自身浮动法侧栏要放在煮烂的前面。因为文档流由上至下，由左至右依次解析，如果改变了布局顺序就改变了解析顺序。
为什么自适应宽度需要用到float？使用float文档流时，其他盒子会无视这个元素，但是其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute脱离文档流的元素，其他盒子内的文本都会无视它。
== float不能放在前面，因为float有包裹性，设置了float之后，宽度自适应内容，此时的话width属性就不会再起效==

通栏布局

无论布局类型是单列布局、两列布局或者多列布局，为了网站的美观，网页中的一些模块，例如头部、导航、焦点图或页面底部等经常需要通栏显示。

上图导航栏、页面底部设置为通栏后，无论页面放大或者缩小，该模块都将横铺于浏览器窗口中。
HTML5中语义标签
标签 作用

除了按属性布局的这些分类之外，还有flex布局和grid布局。

这两部分内容比较多，单独整理出来了。
flex布局
grid布局

CSS高级应用

过渡

过渡：使元素从一种样式转变为另一种样式时添加效果，如渐显、渐弱、动画快慢等（不使用flash动面或者js脚本的情况下）
过渡通过以下属性实现

transition-property属性：规定设置过渡效果的CSS属性的名称。
transition-duration属性：规定完成过渡效果需要多少秒或者多少毫秒
transition-timing-function属性：规定速度效果的速度曲线。
transition-delay属性：定义过渡效果何时开始。

transition-property属性

该属性规定应用过渡效果的CSS属性的名称(当指定的CSS属性改变时，过渡效果将开始)。注意：过渡效果通常在用户将鼠标指针浮动到元素上时发生。其语法格式如下:

transition-property:none|all|property;

transition- duration属性

该属性规定完成过渡效果所花的时间(以秒或毫秒计)。默认值为0,表示没有过滤效果，其语法格式如下:

transition-duration:time

transtion-timing-function属性

该属性规定过渡效果的速度曲线，并且允许过渡效果随着时间来改变其速度，该属性的默认值时ease。

transition-timing function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

transition-delay属性

该属性规定过滤效果何时开始，默认值为0，其常用单位是秒或毫秒。transition-delay的属性值可以为正整数、负整数和0。

当设置为负数时，过渡动作会从该时间点开始，之前的动作被截断; 设置为正数时，过渡动作会延迟触发。语法格式如下:

transition-delay:time;

transtion属性

transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-function、transition-delay四个过渡属性。其基本语法格式如下

transition: property duration function delay;

变形

CSS3变形是一系列效果的集合，如：平移、旋转、缩放和倾斜，每个效果都被称为变形函数( Transform Function),它们可以操控元素发生平移、旋转、缩放和倾斜等变化。

例：transform 属性可以让元素在一个坐标系统中变形，这个属性包含一系列变形函数、可以进行无素的移动、旋转和缩放。transform属性的基本语法如下:

transform: none|transform-functions;

其中，transfom属性的默认值为none.适用于内联元素和块元素，表示不进行变形。transform-function用于设置变形函数，可以是一个或多个变形函数列表。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			border: 1px solid #000;
			background-color: red;
			float: left;
			margin: 50px;
		}
		.one{
			transform: rotate(30deg);   /*旋转30度*/
		}
		.two{
			transform: translate(20px,20px);     /* 向右向下移动20px*/
		}
		.three{
			transform: scale(2,1.5);  /*宽度为原来两倍，高度为原来1.5倍*/
		}
		.four{
			transform: skew(30deg,20deg);  /*在X轴上和Y轴上倾斜20度和30度*/
		}
	</style>
</head>
<body>
	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>
	<div class="four"></div>
</body>
</html>