html学习过程（2）

发表于 | 分类于 ，

CSS3变形效果

transform

CSS3 提供了元素变形效果，也叫做变换。它可以将元素实现旋转、缩放和平移的功能。 属性有两个：transform 和 transform-origin

属性 说明
transform 指定应用的变换功能
transform-origin 指定变换的起点

对于transform的属性值，具体如下表：

transform属性值

transform-orgin

transform-origin 属性可以设置变换的起点。默认情况下，使用元素的中心作为起点。 具体设置例子如下所示

1
2
3
4
5
6
//默认值，以中心点变形 
transform-origin: center center; 
transform-origin: 50% 50%;
//以左上角为基准点变形
transform-origin: left top; 
transform-origin: 0px 0px;

CSS3过渡效果

CSS3过渡效果指的是通过一些简单的CSS动作触发平滑地过渡功能。
主要属性如下表：

transition属性

transition-property

简单来说就是指定过渡的属性，哪几个属性在接下去的动作中会进行平滑过渡，一般默认值为all，也即所有属性值都会进行过渡

transition-duration

过渡的时间。说明属性的改变在多长的时间内完成。（因为默认的时间是0s，所以平常看上去就是瞬间完成的）

transition-timing-function

由其属性名可知，是过渡随着时间改变的程序（可以理解为速度的变化）。

几种缓动方式

transition-delay

顾名思义，延时效果。过渡动作将在设置的时间之后再进行。

CSS3传统布局

例如建立一个如此这般的布局图：

布局示例图

表格布局

表格布局，就是通过设定固定的单元格，去除表格边框和填充实现的布局。
首先在HTML的代码上，就是一个合并了相应单元格并进行了系列操作的表格：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>

CSS方面也是简单的布局：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 	body {
	margin: 0;
}
table {
	/* width: 960px; */
	width: 100%;
	margin:0 auto;
	/* border-spacing: 0px; */
	border-collapse: collapse;
}
.header {
	height: 120px;
	background-color: olive;
}
.aside {
	/* width: 200px; */
	width: 20%;
	height: 500px;
	background-color: purple;
}
.section {
	/* width: 760px; */
	width: 80%;
	background-color: maroon;
}
.footer {
	height: 120px;
	background: gray;
}

以上代码在将table宽度设置为100%就成了流体布局。

浮动布局

HTML具有更好的语义化，所以可以直接使用语义化的标签进行HTML的编写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<header>
	header
</header>
<aside>
	aside
</aside>
<section>
	section
</section>
<footer>
	footer
</footer>

同时CSS部分与上相同，不做赘述。
同样的，要将固定布局改为流体布局，只需要将body元素的限定宽度设置为auto或者100%，同时左右两侧分别设置为适当的百分比即可

定位布局

首先了解下定位属性的应用

定位属性

  1. position: absolute;
    绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
    脱离文档流。
  2. position: relative
    相对定位的元素的位置相对于其自身原本的位置。
    不脱离文档流。
  3. position: fixed
    元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

这三种分别都在各自的情况下使用，均比较常用。但还有一种情况，就是：1.既要脱 离文档流（这样元素之间不会相互冲突）；2.以父元素，比如 body 或其他父元素为参考点 （这样可以实现区域性绝对定位）；3.还必须是绝对定位。

1
2
3
4
5
6
7
8
//第一步，将需要设置参考点的父元素设置为相对，且不设置坐标
body { 
    position: relative; 
}
//第二步，如果父元素设置了参考点，子元素的绝对定位将以它为基准  
header { 
    position: absolute; top: 0px; left: 0px; 
}

box-sizing 属性

CSS3 提供了一个属性 box-sizing，这个属性可以定义元素盒子的解析方式，从而可以选择避免掉布局元素盒子增加内边距和边框的长度增减问题。

box-sizing属性

resize 属性

CSS3 提供了一个 resize 属性，来更改元素尺寸大小。

resize属性