CSS学习笔记

135430.png

CSS基础

  在学习CSS基础知识之前,我们应该先了解HTML、CSS、JavaScript之间的关系。

  • 首先HTML、CSS和JavaScript技术共同编写一个完整的网页;
  • HTML是网页内容的载体,是网页的结构骨架;
  • CSS是网页样式的美化,是网页的外观控制;
  • JavaScript是行为,用来实现网页特效效果,让用户拥有良好的体验;

CSS的含义

  • 层叠样式表(Cascading Style Sheets);
  • 用于定义HTML网页内容在浏览器内显示的样式;

CSS的发展历史

  • 1996年,W3C制定CSS1规范;
  • 1998年,W3C制定CSS2规范;
  • 2011年至今,W3C制定CSS3规范。

学习CSS的理由

  • CSS简化HTML相关标签,网页体积小,下载快;
  • 解决内容和样式分离的问题,代码可维护性强。

CSS命名规范

  • 采用英文字母,数字以及”-“和”_”;
  • 以小写字母开头,不能以”-“,”_”开头;
  • 命名形式: 单字,连字符,下划线和驼峰.
  • 使用有意义命名.

代码图片规范

图片规范

内容图

  内容图多以商品图等照片类图片形式存在,颜色较为丰富,文件体积较大

  • 优先考虑 JPEG 格式,条件允许的话优先考虑 WebP 格式
  • 尽量不使用PNG格式,PNG8 色位太低,PNG24 压缩率低,文件体积大
  • PC平台单张的图片的大小不应大于 200KB。
背景图

  背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片

  • PNG 与 GIF 格式,优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率;
  • 图像颜色比较简单的,如纯色块线条图标,优先考虑使用 PNG8 格式,避免使用 JPEG 格式;
  • 图像颜色丰富而且图片文件不太大的(40KB 以下)或有半透明效果的优先考虑 PNG24 格式;
  • 图像颜色丰富而且文件比较大的(40KB - 200KB)优先考虑 JPEG 格式;
  • 条件允许的,优先考虑 WebP 代替 PNG 和 JPEG 格式.

CSS代码规范

代码格式化

  使用展开式的格式.

1
2
3
4
.xiaoxie {
display: block;
width: 50px;
}
代码大小写

  样式选择器,属性名,属性值关键字全部使用小写字母书写,属性字符串允许使用大小写。

选择器
  • 尽量少用通用选择器 *
  • 不使用 ID 选择器
  • 不使用无具体语义定义的标签选择器
代码缩进

  统一使用四个空格进行代码缩进.

分号

  每个属性声明末尾都要加分号;

代码易读性
  • 左括号与类名之间一个空格,冒号与属性值之间一个空格
  • 逗号分隔的取值,逗号之后一个空格
  • 为单个css选择器或新申明开启新行
  • 颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格,且取值不要带有不必要的 0
  • 属性值十六进制数值能用简写的尽量用简写
  • 不要为 0 指明单位
属性值引号

  css属性值需要用到引号时,统一使用单引号

  属性书写顺序

  • 布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,毕竟关系到模式)
  • 自身属性:width / height / margin / padding / border / background
  • 文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
  • 其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient

CSS基础语法

CSS样式规则

  CSS样式规则由两部分组成:

  • 选择器(选择哪一个标签或者哪一个元素);
  • 属性声明(属性:属性值);
1
2
3
4
5
6
7
8
9
10
11
<head>
<meta charset="UTF-8">
<title>CSS样式规则</title>
<style>
标签名{
属性名1:属性值;
属性名2:属性值;
属性名3:属性值;
}
</style>
</head>

CSS引用

1
2
3
4
5
6
7
8
9
<head>
<meta charset="UTF-8">
<title>CSS样式规则</title>
<!--写在head标签内-->
<style type="text/css">

/*CSS样式.....*/
</style>
</head>

CSS注释

  格式:

1
/*注释语句*/

CSS使用方法

  如何引入CSS样式:

  • 行内样式(内联样式);

  在开始标签内添加style样式属性。

1
<p style="color: aqua;">我是一个段落</p>
  • 内部样式表(嵌入样式);

  把CSS样式代码写在style标签内,style标签要放在head标签内。

1
2
3
4
<!--写在head标签内-->
<style type="text/css">
/*CSS样式.....*/
</style>
  • 外部样式表(Link链入);

  把CSS样式代码写在独立的一个扩展名为.css文件,然后通过link标签引入外部文件;

  link标签也要放在head标签内。

  这种方式要注意css文件的路径,在Webstorm软件中,可以直接拖拽css文件到HTML文件head标签里面也可以生成如下代码。

1
<link rel="stylesheet" href="p-styleDemo.css">
  • 导入式(import)。

  @import写在style标签内最开始。

  格式:

1
2
3
4
<style>
/*注意CSS样式文件的路径问题*/
@import "外部CSS文件"
</style>

CSS使用方法区别

类别引入方法位置加载
行内样式开始标签内stylehtml文件内同时
内部样式head标签中style内html文件内同时
外部样式head标签中link标签引用css样式文件,与html文件分离页面加载时,同时加载CSS样式
导入式@import在样式代码最开始处css样式文件,与html文件分离在读取html文件之后加载CSS样式

  通过对比上面表格之后我们发现,外部样式是最佳使用CSS的方式,原因如下:

  • 与行内样式、内部样式相比,外部样式采取CSS样式文件和html文件分离,有利于提高代码的阅读性和后期可维护性;
  • 与导入式相比,虽然都做到CSS文件和html文件分离,但是导入式的方式加载CSS样式是在读取html文件之后,会影响用户体验,而且导入式浏览器兼容性不是很好;
  • 所以,以后推荐使用CSS外部样式编写代码。

CSS使用方法的优先级

  行内样式>内部样式>外部样式

  • 链入外部样式表和内部样式表之间的优先级取决于位置的先后;
  • 最后定义的优先级最高(就近原则)。

CSS文字属性

文字样式属性:

  • 字体:font-family;
  • 文字大小:font-size;
  • 文字颜色:font-color;
  • 文字粗细:font-weight;
  • 文字样式:font-style;

文字样式(font-style)

  为元素内文字设置样式

  语法:

1
2
3
4
5
6
7
8
文本标签 {
/*倾斜的*/
font-style: italic;

/*正常样式,默认显示*/
font-style: normal;
font-style: oblique;
}

  快捷键:

1
2
fs+tab键  font-style: italic;
fsn+tab键 font-style: normal;

文字粗细(font-weight)

  为元素内文字设置粗细。

  语法:

1
2
3
4
5
6
7
8
9
10
font-weight: normal|bold|bolder|lighter|数值(使用较少,一般使用单词)
/*
说明:
1.默认是normal;
2.400等同于normal,700等同于bold;
3.取值方式有两种:数值(范围100~900)和单词;
4.bold:加粗;
5.bolder:在bold基础上加粗;
6.lighter:细线,默认就是细线
*/

  快捷键:

1
2
3
fw+tab键 font-weight: 400;
fwb+tab键 font-weight: bold;
fwbr+tab键 font-weight: bolder;

文字大小(font-size)

  定义元素内文字大小。

  • 当不设置字体大小时,默认为浏览器默认值;

  • 浏览器一般默认字体大小为16px(各个浏览器默认值可能不一样);

  • 我们就尽量给一个明确值大小,不要默认大小,一般给body设置页面文字大小。

  语法:

1
font-size:绝对单位|相对单位

绝对单位(了解)

  属性:in(英寸)、cm(厘米)、mm(毫米)、pt(磅)、pc(pica);

  绝对大小,不能随浏览器分辨率或者父元素大小的改变而改变。

  代码示例:

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
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字大小</title>
<style type="text/css">
.p1 {
font-size: 0.5in;
}

.p2 {
font-size: 0.5cm;
}

.p3 {
font-size: 5mm;
}

.p4 {
font-size: 15pt;
}

.p5 {
font-size: 2pc;
}

</style>


</head>
<body>
<p class="p1">我是一个段落in</p>
<p class="p2">我是一个段落cm</p>
<p class="p3">我是一个段落mm</p>
<p class="p4">我是一个段落pt</p>
<p class="p5">我是一个段落pc</p>
</body>
</html>
属性值CSS2缩放系数1.2
xx-small9px
x-small11px
small13px
medium16px
large19px
x-large23px
xx-large28px

示例代码:

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字大小</title>
<style type="text/css">
.p1 {
font-size: xx-small;
}

.p2 {
font-size: x-small;
}

.p3 {
font-size: small;
}

.p4 {
font-size: smaller;
}

.p5 {
font-size: medium;
}
.p6 {
font-size: large;
}
.p7 {
font-size: x-large;
}
.p8 {
font-size: xx-large;
}

</style>
</head>
<body>
<p class="p1">我是一个段落in</p>
<p class="p2">我是一个段落cm</p>
<p class="p3">我是一个段落mm</p>
<p class="p4">我是一个段落pt</p>
<p class="p5">我是一个段落pc</p>
<p class="p6">我是一个段落pc</p>
<p class="p7">我是一个段落pc</p>
<p class="p8">我是一个段落pc</p>
</body>
</html>

相对单位(掌握)

  • px像素;
    • 文字大小,受显示器分辨率影响;
  • em和%;
  • em和%都是针对父元素来说的,继承父元素的计算值。

(1)smaller:相对父元素的文字大小变小;

(2)larger:相对父元素的文字大小变小。

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
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.p1 {
font-size: 30px;
}

.d1 {
font-size: 30px;
}

/*
em单位指的是相对于父元素,两个字符的大小,父元素div一个字符大小是30px,
所以2em实际上就是60px;
可以通过谷歌开发者工具进行验证。
*/
.p2 {
font-size: 2em;
}

/*百分比相对于父元素而言,所以p3所在的标签文字大小是30px * 150% =45px
可以通过谷歌开发者工具进行验证。
*/
.p3 {
font-size: 150%;
}
</style>
</head>
<body>
<div class="d1">
<p class="p2">生活就是这样,又难过,又难说。</p>
<p class="p3">我在人间凑数的日子,热势褪尽,无关痛痒。</p>
<p class="p4">装喜欢你好累,还好我是真的喜欢你。</p>
</div>
<p class="p1">这世界很烦,但你要很可爱❤</p>
</body>
</html>

  快捷键:

1
2
fz+tab键 font-size:;
fz30+tab键 font-size: 30px

字体属性(font-family)

  定义元素内文字以什么字体来显示。

  语法:

1
2
3
4
5
6
7
8
<style>
标签名{
font-family: 字体1,字体2,字体3......;
}
标签名{
font-family: 具体字体名,字体集;
}
</style>

说明:

  • 字体设置为常用字体,尽量使用系统默认字体,保证在任何用户的浏览器都能正确显示.
  • 含有空格字体名,#,$等符号和中文,用英文引号(””)括起来;
  • 多个字体,用英文字体逗号“,”隔开;
  • 引号嵌套,外面使用双引号,内部使用单引号;
  • 如果设置的字体不存在, 那么系统会使用默认的字体来显示;
  • 中文字体可以处理英文, 而英文字体不能处理中文;
  • 如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面;
  • 设置多个字体,浏览器依次查找,如果都没有找到,就使用浏览器默认字体。
  • 网页中常用字体有宋体 ,微软雅黑,宋体等.

字体类型

  • 衬线体(Serif):笔画边缘的装饰部分;
  • 非衬线体(Sans-serif);
  • 等宽字体(Monospace):针对英文字体;
  • ……..其他字体.

字体集

  字体集结合两种或更多的字体以使得在一个窗口上可以同时使用英文和中文字符。

  • Serif;
  • Sans-serif;
  • Monospace;
  • Cursive;
  • Fantasy。

CSS Unicode字体

  在CSS直接使用Unicode编码来写字体名称,浏览器可以正确解析,避免乱码错误.

  格式:

1
<!--font-family: "\5b8b\4f53";-->

字体变形(font-variant)

  设置元素中文本为小型大写字母(英文字母)。

  所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。

  格式:

1
font-variant:normal|small-caps;

文字属性简写

1
font:font-style font-variant font-weight font-size font-family;
  • 值之间用空格隔开;
  • 注意书写顺序。
  • 在这种缩写格式中有的属性值可以省略
    • sytle可以省略
    • variant可以省略
    • weight可以省略
  • 在这种缩写格式中style和weight的位置可以交换;
  • 在这种缩写格式中有的属性值是不可以省略的
    • size不能省略;
    • family不能省略;
  • size和family的位置是不能顺便乱放的
  • size一定要写在family的前面, 而且size和family必须写在所有属性的最后

CSS文本属性

文本颜色(color)

  定义元素内文字颜色。

  语法:

1
color:颜色名|rgb|rgba|十六进制|十六进制缩写;

具体颜色名(英语单词)

  一般情况下常见的颜色都有对应的英文单词, 但是英文单词能够表达的颜色是有限制的, 也就是说不是所有的颜色都能够通过英文单词来表达,比如红色red等。

  HTML 和 CSS 颜色规范中定义了 147 中颜色名(17 种标准颜色加 130 种其他颜色)。

  17 种标准色是 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow。

rgb

  gb其实就是三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色)。

1
格式: rgb(0,0,0);

  说明:

  这其中的每一个数字它的取值是0-255之前, 0代表不发光, 255代表发光, 值越大就越亮。

  介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100%)。

  • 第一个数字就是用来设置三原色的红色显示的亮度;
  • 第二个数字就是用来设置三原色的绿色显示的亮度;
  • 第三个数字就是用来设置三原色的蓝色显示的亮度;
1
2
3
4
5
红色: rgb(255,0,0);
绿色: rgb(0,255,0);
蓝色: rgb(0,0,255);
黑色: rgb(0,0,0);
白色: rgb(255,255,255);

rgba

  rgba中的rgb和前面讲解的一样, 只不过多了一个a,那么这个a呢代表透明度, 取值是0-1, 取值越小就越透明。

  示例代码:

1
color: rgba(255,0,0,0.2);

十六进制

  在前端开发中通过十六进制来表示颜色, 其实本质就是RGB,十六进制中是通过每两位表示一个颜色。

  示例代码:

1
#FFEE00 FF表示R EE表示G 00表示B

  十六进制和十进制转换的公式
  用十六进制的第一位*16 + 十六进制的第二位 = 十进制数值;

十六进制缩写

  在CSS中只要十六进制的颜色每两位的值都是一样的, 那么就可以简写为一位
  例如:#FFEE00 == #FE0。

direction 属性

  direction属性指定文本方向/书写方向。

letter-spacing 属性

  letter-spacing 属性增加或减少字符间的空白(字符间距)

text-align属性

  设置元素内文本的水平对齐方式。

  格式:

1
2
3
4
5
6
7
text-align:left|right|center|justify;
/*
left: 左对齐;
right:右对齐;
center:居中对齐;
justify:两端对齐。
*/
  • 该属性对块级元素设置有效;

  快捷键:

1
2
3
ta+tab键 text-align: left;
tar+tab键 text-align: right;
tac+tab键 text-align: center;

line-height属性

  设置元素中文本行高。

  格式:

1
2
3
4
5
6
7
line-height:数字(当前字体大小的倍数)|长度值|百分比;
说明:
1.一行文字的高度;
2.行高指的是文本行的基线间的距离;
3.不允许使用负值有默认;
4.浏览器有默认行高,不同浏览器默认行高不一样。
5.继承变得是计算后的值,不是直接把em或者%的值继承过来

内容框

  每一个元素都会生成一个或多个矩形框,每一个元素框中心都有一个内容区.

文字基线

  为了更加清楚明白line-height属性,我们首先得了解基线的概念,所谓基线就是西方英文字母跑列的基本线,基线并不是汉字文字的下沿.具体参考如下图片(图片来源于网络):

f792c51.jpg

行高

  行高就是两行文本基线之间的距离

行间距(行距)

行距=行高(line-height)-文字大小(font-size)
##### 行内框

  将行间距的一半分别放到内容区的顶部与底部.

下载.jpg
行框

  一行文本会有不同大小的文字,,这就导致一行中有很多高低不平的行内框,行框就是一行文本中最高行内框的顶部与最低行内框的底部之间的距离.

vertical-align属性

  • 有宽度的块级元素居中对齐,是margin: 0 auto;
  • 让文字居中对齐,是 text-align: center;

  设置元素内容的垂直方式(只对行内元素,单元格元素生效,块级元素不生效).

  特别是行内块元素, 通常用来控制图片/表单与文字的对齐

  格式:

1
vertical-align: baseline|sub|super|top|text-top|middle|bottom|text-bottom|长度|百分比;
  • 长度|百分比是以基线为起点;
  • 百分比是相对于继承父元素计算后的值.

  代码示例:

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
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}

p {
background-color: #ececec;
height: 80px;
font-size: 50px;
}

.sub {
vertical-align: sub;
}

.super {
vertical-align: super;
}
</style>
</head>
<body>

<!--
vertical-align:只对行内元素和单元格元素垂直居中生效
1.sub属性值表示下标;
2.super属性值表示下标;
-->

<p>我是个段落我是个段落我是个段落我是个段落我是个段落我是个段落我是个段落</p>
<p>我是个段落我是个段落我是个段落<span class="sub">sub</span></p>
<p class="sub">我是个段落我是个段落我是个段落<span>sub</span></p>
<p>我是个段落我是个段落<span class="super">spuer</span></p>
</body>
</html>
22030.jpg
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.baseline {
vertical-align: baseline;
}

.top {
vertical-align: top;
}

.texttop {
vertical-align: text-top;
}

.middle {
vertical-align: middle;
}

.textbottom {
vertical-align: text-bottom;

}

.bottom {
vertical-align: bottom;
}
</style>
</head>
<body>

<p>
总有人在背后说我帅!
<span>总有人在背后说我帅!</span>
<img src="135430.png">

</p>

<p>
总有人在背后说我帅!
<span class="baseline">基线baseline</span>
<img src="135430.png">

</p>

<p>
总有人在背后说我帅!
<span class="top">顶端对齐top</span>
<img src="135430.png">

</p>

<p>
总有人在背后说我帅!
<span class="texttop">文本顶端对齐texttop</span>
<img src="135430.png">

</p>

<p>
总有人在背后说我帅!
<span class="middle">中线对齐middle</span>
<img src="135430.png">
<!-- <img src="135430.png" class="middle" >-->

</p>

<p>
总有人在背后说我帅!
<span class="textbottom">文本底端对齐textbottom</span>
<img src="135430.png">

</p>

<p>
总有人在背后说我帅!
<span class="bottom">底部对齐bottom</span>
<img src="135430.png">

</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
	<p>
CSS层叠样式表
<span style="vertical-align:-15px;">长度值</span>
<img src="img/logo.png"/>
</p>

<p style="line-height: 1.5em;">
CSS层叠样式表
<span style="vertical-align:-100%;">百分比值</span>
<img src="img/logo.png"/>
</p>

<table border="1px" class="one" cellspacing="0" >
<tr>
<td class="top"><span>top</span></td>
<td class="middle"><span>middle</span></td>
<td class="bottom"><span>bottom</span></td>
</tr>
</table>
<!-- td{height:80px; width:100px;} -->

图片、表单和文字对齐

  我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。

去除图片底侧空白缝隙

  • 原因:
    • 图片或者表单等行内块元素,他的底线会和父级盒子的基线对齐。
    • 就是图片底侧会有一个空白缝隙。
  • 解决方法:
    • 给img vertical-align:middle | top| bottom等等. 让图片不要和基线对齐;
    • 给img 添加 display:block; 转换为块级元素就不会存在问题了

水平居中应用

(1)元素为行内元素时

  我们直接给该行内元素设置属性text-align:center时,会发现没有水平居中的效果,代码如下:

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border: 2px aqua solid;
}

span {
text-align: center;
}
</style>
</head>
<body>

<div>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
</div>
</body>
</html>

  要想解决该问题的思路是,通过给其父元素(必须是块级元素)设置如下CSS样式:

1
2
3
4
5
div {
/*border: 2px aqua solid;*/
text-align: center;

}

  我们会发现上述span标签的元素内容水平居中.

  当然我们也可以通过display属性相关值进行设置,也可以达到水平居中的效果

  • display设置为inline、inline-block、inline-table、inline-flex等元素都有效.
1
2
3
4
5
6
7
8
span {
display: inline;
/*display: inline-block;*/
/*display: inline-flex;*/
/*display: inline-grid;*/
/*display: inline-table;*/
/*display: inline-list-item;*/
}
  • 另外一种通过设置元素自身display: block属性和text-align:center属性也能达到水平居中的效果;
1
2
3
4
span {
display: block;
text-align: center;
}
(2)元素为块级元素时
margin: 0 auto;

  我们通过给该块级元素设置如下代码 margin: 0 auto;,就能达到水平居中的效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border: 2px aqua solid;
}

p {
margin: 0 auto;
/*不要忘记设置该元素的宽度,否则元素的宽度会自动充满父元素,就不存在相对父元素水平居中.
width: 200px;
}
</style>
</head>
<body>
<div>
<p>我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落</p>
</div>
</body>
</html>
display:table和margin

  思路:先将子元素设置为块级表格来显示(类似),再将其设置水平居中.

  display:table在表现上类似block元素,但是宽度为内容宽。

1
2
3
4
5
6
7
8
9
10
<style>
p{
display: table;
margin: 0 auto;
background-color: orangered;
}
</style>
<div class="div">
<p>我是一个段落,想要居中</p>
</div>
absolute+transform

  思路:(子绝父相)

  先将父元素设置为相对定位,再将子元素设置为绝对定位,向右移动子元素,移动距离为父容器的一半,最后通过向左移动子元素的一半宽度以达到水平居中.

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.div{
position: relative;
}
.p{
position: absolute;
left: 50%;
transform:translateX(-50%);
}
</style>
<div class="div">
<p class="p">我是一个段落,想要居中</p>
</div>
  • 绝对定位脱离文档流,不会对后续元素的布局造成影响。
  • transform 为 CSS3 属性,有兼容性问题.
flex+justify-content

  通过CSS3中的布局利器flex中的justify-content属性来达到水平居中

1
2
3
4
5
6
7
    .div {
display: flex;
justify-content: center;
}
<div class="div">
<p class="p">我是一个段落,想要居中</p>
</div>
flex+margin

  通过flex将父容器设置为为Flex布局,再设置子元素居中.

1
2
3
4
5
6
7
8
9
10
 .div{
display: flex;
}
.p {
margin: 0 auto;

}
<div class="div">
<p class="p">我是一个段落,想要居中</p>
</div>
多个块级元素时
利用flex布局

  利用弹性布局(flex),实现水平居中,其中justify-content 用于设置弹性盒子元素在主轴(默认横轴)方向上的对齐方式.

1
2
3
4
5
.div {
display: flex;
justify-content: center;
border: 2px dashed #f69c55;
}
利用inline-block
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.div {
text-align: center;
}
p{
display: inline-block;
}
</style>
<div class="div">
<p class="p1">我是一个段落,想要居中</p>
<p class="p2">我是一个段落,想要居中</p>
<p class="p3">我是一个段落,想要居中</p>
</div>
浮动元素水平居中
宽度不固定的浮动元素

  父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对右移动50%,或者子元素相对左移动-50%也就可以了.

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素水平居中</title>
<style>
.div{
float: left;
position: relative;
left: 50%;
}
p{
float:left;
position:relative;
right:50%;
}
</style>
</head>
<body>
<div class="div">

<p>我是一个段落,想要居中</p>
<p>我是一个段落,想要居中</p>
</div>
</body>
</html>
宽度固定的互动元素

  通过子元素设置relative + 负margin.

1666df38127a480b.jpg

1
2
3
4
5
6
7
8
9
.div {
background-color:pink; /*方便看效果 */
width:500px ;
height:300px; /*高度可以不设*/
margin: -150px 0 0 -250px; /*使用marin向左移动250px,保证元素居中*/
position:relative; /*相对定位*/
left:50%;
top:50%;
}
绝对定位的元素水平居中对齐
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
.div {
position: absolute;
width: 500px;
height: 300px;
background: palevioletred;
margin: 0 auto;
left: 0;
right: 0;
}

p {
text-align: center;
}
</style>
<div class="div">
<p class="p1">我是一个段落,想要居中</p>
<p class="p2">我是一个段落,想要居中</p>
<p class="p3">我是一个段落,想要居中</p>
</div>

垂直居中应用

单行文字垂直居中

  设置line-height和height属性为相等达到单行文字垂直居中.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>

div{
background-color: palevioletred;
border: 1px solid ;
width: 500px;
height: 200px;
line-height: 200px;
text-align: center;
}
</style>
<div>
<p>我是一个段落</p>
</div>
多行文字垂直居中

  使用 vertical-align: middle;属性设置.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>   
.div1 {
width: 1600px;
height: 1200px;
border: 1px aqua solid;
display: table;
text-align: center;
}

.div2 {
vertical-align: middle;
display: table-cell;
}
</style>
<div class="div1">
<div class="div2">
<h2>我是一个div</h2>
<p>我是一个段落</p>
<img src="135430.png">
</div>
</div>

word-spacing属性

  设置元素内单词(以空格为判断是否为单词)之间的间距.

  取值: px和em(正负值都可以).

letter-spacing属性

  设置元素内字母之间的间距.

  取值: px和em(正负值都可以).

text-transform属性

  设置元素内文本的大小写.

  取值:

  • capitalize(首字母大写);
  • uppercase(大写);
  • lowercase(小写);
  • none(默认效果)

text-decoration属性

  设置元素内文本的装饰.

  取值:

  • underline(下划线);
  • overline(上划线);
  • line-through(类似删除线);
  • blink(闪烁效果);
  • none(默认效果).

CSS文本样式应用

  经验技巧:

  • 网页制作从整体到局部;
  • 借助MDN和W3C网站查找.

CSS选择器

  找到特定的HTML页面元素.把想要修改样式的标签选择出来.

标签选择器

  根据指定的标签名称,在当前页面中找到所有该名称的标签,然后设置属性.

  格式:

1
2
3
标签名称{
属性: 值;
}
  • 标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签;
  • 标签选择器无论标签藏得多深都能选中;
  • 只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input等).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
p{
font: italic 50px "微软雅黑" ;
color: red;
}
</style>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<div>
<div>
<div>
<div>
<div>
<p>我是一个段落</p>
</div>
</div>
</div>
</div>
</div>

id选择器

  根据指定的id名称找到对应的标签, 然后设置属性.

  格式:

1
2
3
#id名称{
属性: 值;
}
  • 每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id;
  • 在同一个界面中id的名称是不可以重复的;
  • 在编写id选择器时一定要在id名称前面加上#;
  • id的名称是有一定的命名规范的;
    • id的名称只能由字母/数字/下划线;
    • id名称不能以数字开头;
    • id名称不能是HTML标签的名称;
  • 在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id是留给js使用的.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>

#p1 {
color: red;
}

#p2 {
color: aqua
}

#p3 {
color: palevioletred;
}

#p4 {
color: orangered;
}
</style>
<p id="p1">我曾对你的爱深表不疑,也曾对你给的惊喜满心欢喜</p>
<p id="p2">我曾对你的爱深表不疑,也曾对你给的惊喜满心欢喜</p>
<p id="p3">我曾对你的爱深表不疑,也曾对你给的惊喜满心欢喜</p>
<p id="p4">我曾对你的爱深表不疑,也曾对你给的惊喜满心欢喜</p>

类选择器

根据指定的类名称找到对应的标签, 然后设置属性.

  格式:

1
2
3
.类名{
属性: 值;
}
  • 每个HTML标签都有一个属性叫做class;
  • 在同一个界面中class的名称是可以重复的;
  • 在编写class选择器时一定要在class名称前面加上.;
  • 类名的命名规范和id名称的命名规范一样;
  • 类名就是专门用来给CSS设置样式的;
  • 在HTML中每个标签可以同时绑定多个类名,用空格隔开;
1
<标签名称 class="类名1 类名2 ...">
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
<style>

.p1 {
color: red;
}

.p2 {
color: aqua
}

.p3 {
color: palevioletred;
}

.p4 {
color: orangered;
}
.f1{
font-size: 50px;
}
</style>
<p class="p1">我曾对你的爱深表不疑,也曾对你给的惊喜满心欢喜</p>
<p class="p2">我曾对你的爱深表不疑,也曾对你给的惊喜满心欢喜</p>
<p class="p3">我曾对你的爱深表不疑,也曾对你给的惊喜满心欢喜</p>
<p class="p4">我曾对你的爱深表不疑,也曾对你给的惊喜满心欢喜</p>
<p class="p4 f1">我曾对你的爱深表不疑,也曾对你给的惊喜满心欢喜</p>

id选择器和class选择器区别

  • 是否可重复性

    • id在同一页面不可重复;
    • class在同一页面可以重复;
  • 标签是否绑定多个选择器

    • 一个HTML标签只能绑定一个id名称;
    • 一个HTML标签可以绑定多个class名称;
  • 语法表现形式

    • id选择器是以#开头;
    • class选择器是以.开头;
  • 企业应用场景

    • id一般情况下是给js使用的, 所以除非特殊情况, 否则不要使用id去设置样式;
    • class专门是设置CSS样式的;

      良好开发习惯

      一般情况下在企业开发中要注重冗余代码的抽取, 可以将一些公共的代码抽取到一个类选择器中, 然后让标签和这个类选择器绑定即可.

后代选择器

  找到指定标签的所有特定的后代标签, 设置属性.

  格式:

1
2
3
标签1  标签2{
属性: 值;
}

  先找到所有名称叫做”标签1”的标签, 然后再在这个标签下面去查找所有名称叫做”标签2”的标签, 然后在设置属性.

  • 后代选择器必须用空格隔开;
  • 后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代;
  • 后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器;
  • 后代选择器可以通过空格一直延续下去.
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
<style>

/*1.获取div元素下的所有p标签字体大小50px,颜色为red
div p{
font-size: 50px;
color: red;
}
*/

/*2.获取div元素下的类名为xiaoxie的p标签字体大小30px,颜色为color: orangered;
div .xiaoxie{
font-size: 30px;
color: orangered;
}
*/
/*2.获取div元素下的ul标签下的li标签字体大小10px,颜色为aqua; */
div ul li{
font-size: 10px;
color: aqua;
}

</style>
p>我是一个段落</p>
<div>
<p>我是一个段落</p>
<p class="xiaoxie">我是一个段落</p>
<ul>
<li>我是一个无序列表</li>
<li>我是一个无序列表</li>
<li>我是一个无序列表</li>
</ul>
</div>
<p>我是一个段落</p>

子元素选择器

  找到指定标签中所有特定的直接子元素, 然后设置属性.

  格式:

1
2
3
标签名称1>标签名称2{
属性:值;
}

  先找到所有名称叫做”标签名称1”的标签, 然后在这个标签中查找所有直接子元素名称叫做”标签名称2”的元素.

  • 子元素选择器只会查找儿子, 不会查找其他被嵌套的标签;
  • 子元素选择器之间需要用>符号连接, 并且不能有空格;
  • 元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器;
  • 子元素选择器可以通过>符号一直延续下去.
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
<p>我是一个段落</p>
<div class="identity">
<p>我是段落</p>
<p>我是段落</p>
<ul>
<li>
<p>我是一个段落</p>
</li>
</ul>
</div>
<p>我是一个段落</p>
<style>
/* div>p{
color: red;
font-size: 50px;
}
*/

/* .identity>p{
color: blue;
}*/

div>ul>li>p{
color: orange;
}
</style>

后代选择器和子元素选择器的异同

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--
1.后代选择器和子元素选择器之间的区别?
1.1语法形式不同:
-后代选择器使用空格作为连接符号
-子元素选择器使用>作为连接符号
1.2特点不同
-后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子,只要是被放到指定标签中的特定标签都会被选中
-子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签.

2.后代选择器和子元素选择器之间的共同点:
2.1 后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
2.2后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
-选择器1>选择器2>选择器3>选择器4{}
-选择器1 选择器2 选择器3 选择器4{}

3.在企业开发中如何选择
3.1如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器
3.2如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器
-->

交集选择器

  给所有选择器选中的标签中, 相交的那部分标签设置属性.

  格式:

1
2
3
选择器1选择器2{
属性: 值;
}
  • 选择器和选择器之间没有任何的连接符号;
  • 选择器可以使用标签名称/id名称/class名称;
  • 交集选择器仅仅作为了解, 企业开发中用的并不多;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
/*
p.para1{
color: red;
}
*/
.para1#identity{
color: blue;
}
</style>

<p>我是段落</p>
<p>我是段落</p>
<p class="para1" id="identity">我是段落</p>
<p class="para1">我是段落</p>
<p>我是段落</p>

并集选择器

  给所有选择器选中的标签设置属性.

  格式:

1
2
3
选择器1,选择器2{
属性:值;
}
  • 并集选择器必须使用,来连接;
  • 选择器可以使用标签名称/id名称/class名称;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
/*.para1,.para2{
color: orange;
}*/
/* #pa1,.para2{
color: aqua;
}*/

</style>

<h1 class="ht">我是标题</h1>
<p class="para">我是段落</p>
<p>我是段落</p>
<p>我是段落</p>

兄弟选择器

相邻兄弟选择器 CSS2

  给指定选择器后面紧跟的那个选择器选中的标签设置属性.

  格式:

1
2
3
check1,check2{
attr: value;
}
  • 相邻兄弟选择器必须通过+连接;
  • 相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 <style>
h1 + p {
color: aqua;
}
</style>

<h1>我是标题1</h1>
<a href="#">我是一个超链接</a>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<h1>我是标题1</h1>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<h1>我是标题1</h1>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>

通用兄弟选择器 CSS3

  给指定选择器后面的所有选择器选中的所有标签设置属性.

  格式:

1
2
3
选择器1~选择器2{
属性:值;
}
  • 通用兄弟选择器必须用~连接;
  • 通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
h1~p{
color: chocolate;
}
</style>

<h1>我是标题1</h1>
<a href="#">我是一个超链接</a>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<h1>我是标题1</h1>
<a href="#">我是一个超链接</a>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<h1>我是标题1</h1>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>

序选择器

同级别的第几个

  注意点:不区分类型.

1
2
3
4
5
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素中唯一的标签

同类型的第几个

1
2
3
4
5
:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素中唯一类型的某个标签

代码实例:

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<style>
/*
p:first-child{
color: red;
}
*/
/*
p:first-of-type{
color: blue;
}
*/
/*
p:last-child{
color: red;
}
*/
/*
p:last-of-type{
color: blue;
}
*/
/*
p:nth-child(3){
color: red;
}
*/
/*
p:nth-of-type(3){
color: blue;
}
*/
/*
p:nth-last-child(2){
color: red;
}
*/
/*
p:nth-last-of-type(2){
color: red;
}
*/
/*
p:only-child{
color: purple;
}
*/
/*
p:only-of-type {
color: red;
}
*/
.para:only-of-type {
color: red;
}
</style>
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
<p>我是段落8</p>
</div>
<p class="para">我是段落1</p>
<div>
<p class="para">我是段落2</p>
<p class="para">我是段落2</p>
<h1>我是标题</h1>
</div>

同级别同类型的奇偶个

1
2
3
4
:nth-child(odd) 同级别奇数
:nth-child(even)同级别偶数
:nth-of-type(odd)同类型奇数
:nth-of-type(even)同类型偶数
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>序选择器</title>
<style>
/*
p:nth-child(odd){
color: red;
}
p:nth-child(even){
color: blue;
}
*/
/*
p:nth-of-type(odd){
color: red;
}
p:nth-of-type(even){
color: blue;
}
*/
/*
p:nth-child(2n+0){
color: red;
}
p:nth-child(2n+1){
color: blue;
}
*/
p:nth-child(3n+0){
color: red;
}
</style>
</head>
<body>
<!--
:nth-child(xn+y)
x和y是用户自定义的, 而n是一个计数器, 从0开始递增

-->
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
</body>
</html>

属性选择器

常规属性用法

  根据指定的属性名称找到对应的标签, 然后设置属性.

  格式:

1
2
3
4
5
6
标签名[attribute]
作用:根据指定的属性名称找到对应的标签, 然后设置属性

标签名[attribute=value]
作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
最常见的应用场景, 就是用于区分input属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
/*
p[id]{
color: red;
}
*/
p[class=cc]{
color: blue;
}
</style>
<p id="identity1">我是段落1</p>
<p id="identity2" class="cc">我是段落2</p>
<p class="cc">我是段落3</p>
<p id="identity3" class="para">我是段落4</p>
<p>我是段落5</p>

匹配属性用法

属性的取值是以什么开头
1
2
3
4
5
[attribute|=value] CSS2
[attribute^=value] CSS3
两者之间的区别:
CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开
属性的取值是以什么结尾的
1
[attribute$=value] CSS3
属性的取值是否包含某个特定的值
1
2
3
4
5
[attribute~=value] CSS2
[attribute*=value] CSS3
两者之间的区别:
CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
CSS3中的只要包含value就可以找到
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
35
36
37
38
39
40
<!--
<img src="" alt="abcdef">
<img src="" alt="abc-www">
<img src="" alt="abc ppp">
<img src="" alt="defabc">
<img src="" alt="ppp abc">
<img src="" alt="www-abc">
<img src="" alt="qq">
<img src="" alt="yy">
-->

<img src="" alt="abcwwwmmm">
<img src="" alt="wwwmmmabc">
<img src="" alt="wwwabcmmm">
<img src="" alt="www-abc-mmm">
<img src="" alt="www abc mmm">
<img src="" alt="qq">
<style>
/*
img[alt^=abc]{
color: red;
}
*/
/*
img[alt|=abc]{
color: red;
}
img[alt$=abc]{
color: blue;
}
*/
/*
img[alt*=abc]{
color: red;
}
*/
img[alt~=abc]{
color: red;
}
</style>

通配符选择器

  给当网页上所有的标签设置属性.

  格式:

1
2
3
4
*{
属性:值;
}
/*由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器*/

a标签的伪类选择器

  a标签的伪类选择器是专门用来修改a标签不同状态的样式的.

1
2
3
4
:link 修改从未被访问过状态下的样式
:visited 修改被访问过的状态下的样式
:hover 修改鼠标悬停在a标签上状态下的样式
:active 修改鼠标长按状态下的样式

注意点

  • a标签的伪类选择器可以单独出现也可以一起出现
  • a标签的伪类选择器如果一起出现, 那么有严格的顺序要求
    编写的顺序必须要个的遵守爱恨原则 love hate
  • 如果默认状态的样式和被访问过状态的样式一样, 那么可以缩写.

CSS三大特性

继承性

  给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性.

  • 并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承;
  • 在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承;
  • 继承性中的特殊性
    • a标签的文字颜色和下划线是不能继承父元素的的;
    • h标签的文字大小是不能继承父元素的.

  一般用于设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容.

层叠性

  所谓层叠性是指多种CSS样式的叠加,层叠性就是CSS处理冲突的一种能力.

  层叠性只有在多个选择器选中”同一个标签”, 然后又设置了”相同的属性”, 才会发生层叠性

优先级

  当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定.

优先级判断

间接选中就是指继承

  如果是间接选中, 那么就是谁离目标标签比较近就听谁的.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
ul {
color: orange;
}

li {
color: chartreuse;
}
</style>
<ul>
<li>
<p>我是一个段落</p>
</li>
</ul>

  因为ul和li标签都是间接选中,所以p标签就继承color属性,又因为ul和li标签设置相同的属性color,根据规则,p标签元素内的文本颜色为chartreuse(li距离p标签近).

相同选择器(直接选中)

  如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的.

1
2
3
4
5
6
7
8
9
<style>
p {
color: orange;
}

p {
color: chartreuse;
}
</style>
不同选择器(直接选中)

  如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠
  id>类>标签>通配符>继承>浏览器默认.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>

#identity{
color: purple;
}
.para{
color: pink;
}
p{
color: green;
}
*{
color: blue;
}
li{
color: red;
}
</style>
<ul>
<li>
<p id="identity" class="para">我是段落</p>
</li>
</ul>

!important

  用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高.

  • !important只能用于直接选中, 不能用于间接选中;
  • 通配符选择器选中的标签也是直接选中的;
  • !important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升;
  • !important必须写在属性值得分号前面;
  • !important前面的感叹号不能省略;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
#identity{
color: purple;
font-size: 50px;
}
.para{
color: pink ;
}
p{
color: green;
}
*{
color: blue !important;
font-size:10px;
}
li{
color: red ;
}
</style>

优先级权重

  当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高.

权重计算规则

  只有选择器是直接选中标签的才需要计算权重

标签选择器计算权重公式
继承或者 *0,0,0,0
每个元素(标签选择器)0,0,0,1
每个类,伪类0,0,1,0
每个ID0,1,0,0
每个行内样式 style=””1,0,0,0
每个!important 重要的∞ 无穷大

值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越,数位之间没有进制。

1
2
3
4
5
6
7
8
9
10
11
/*前提是该标签有没有被选中。
2.1首先先计算选择器中有多少个id, id多的选择器优先级最高;

2.2如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高;

2.3如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高;

2.4如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的;

2.5优先级如果一样, 那么谁写在后面听谁的.
*/
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
  <style>
/*
#xiaoxie1 .box2{
color: red;
}

.box1 .box2{
color: green;
}
div ul li p{
color: deepskyblue;
}*/

#xiaoxie1 #xiaoxie2{
color: palevioletred;
}

#xiaoxie2.box2{
color: orange;
}
</style>
<div id="xiaoxie1" class="box1">
<ul>
<li>
<p id="xiaoxie2" class="box2">我是一个段落</p>
</li>
</ul>
</div>
继承的权重是0
  • 其实,我们修改样式,一定要看该标签有没有被选中。
  • 如果选中了,那么以上面的公式来计权重。谁大听谁的;
  • 如果没有选中,那么权重是0,因为继承的权重为0.

Div标签和Span标签

div标签

  一般用于配合css完成网页的基本布局

span标签

  一般用于配合css修改网页中的一些局部信息

div和span标签的区别

  • div会单独的占领一行,而span不会单独占领一行;
  • div是一个容器级的标签, 而span是一个文本级的标签

容器级标签和文本级标签

  • 容器级的标签中可以嵌套其它所有的标签
  • 文本级的标签中只能嵌套文字/图片/超链接

CSS显示模式

  • 在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级;
  • 在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素.

  关于块级元素与行内元素的别,在HTML学习笔记中已经进行分析总结,就重复了.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*
2.块级元素和行内元素的区别?
2.1块级元素
独占一行
如果没有设置宽度, 那么默认和父元素一样宽
如果设置了宽高, 那么就按照设置的来显示

2.2行内元素
不会独占一行
如果没有设置宽度, 那么默认和内容一样宽
行内元素是不可以设置宽度和高度的

2.3行内块级元素
为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素
*/

CSS显示模式转换

  通过设置display属性进行块级元素,行内元素和行内块级元素之间的转换.

  取值:

  • block 块级
  • inline 行内
  • inline-block 行内块级

CSS背景与列表

CSS背景样式

背景颜色(background-color)

  设置元素的背景颜色,区别于文字的color属性,默认值为transparent背景透明色.

1
background-color:  transparent|color值;
  • transparent是全透明黑色(black)的记法,类似rgb(0,0,0);
  • 颜色值(颜色名|RGB|十六进制|十六进制缩写);
  • 背景区域包括内容,内边距和边框,不包含外边距。

背景图片(background-image)

  设置元素的背景图片.

1
2
3
background-image : none | url (url) ;
/*url背景图片后面的地址,url不要加引号;
*/
  • 图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址;
  • 如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充;
  • 如果网页上出现了图片, 那么浏览器会再次发送请求获取图片
  • 默认的,背景图片位于元素的左上角。
背景图片和插入图片区别
  • 背景图片仅仅是一个装饰, 不会占用位置,插入图片会占用位置;
  • 背景图片有定位属性, 所以可以很方便的控制图片的位置,插入图片没有定位属性, 所有控制图片的位置不太方便;
  • 插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用插入图片。

背景图像平铺(background-repeat)

  专门用于控制背景图片的平铺方式的.

1
2
3
4
5
6
7
8
background-repeat : repeat | no-repeat | repeat-x | repeat-y 
/*
取值:
repeat 默认, 在水平和垂直都需要平铺
no-repeat 在水平和垂直都不需要平铺
repeat-x 只在水平方向平铺
repeat-y 只在垂直方向平铺
*/

应用场景:

  可以通过背景图片的平铺来降低图片的大小, 提升网页的访问速度。

背景图像定位(background-position)

  专门用于控制背景图片的位置。实际场景使用最多的是(超大分辨率)背景图片居中对齐。

1
2
3
4
5
6
7
8
background-position : length || length
or
background-position : position || position
/*
length:百分数 | 由浮点数字和单位标识符组成的长度值

position: top | center | bottom | left | center | right 具体方位名词
*/
  • 必须先指定background-image属性;
  • position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
  • 如果指定两个值,两个值都是方位名字,则两个值前后顺序无关,比如left top和top left效果一致
  • 如果只指定了一个方位名词,另一个值默认居中对齐。
  • 如果position 后面是精确坐标, 那么第一个,肯定是 x ,第二的一定是y。
  • 如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中
  • 如果指定的两个值是 精确单位和方位名字混合使用,则第一个值是x坐标,第二个值是y坐标;
  • 同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 那么图片会覆盖颜色。

背景图片附着(background-attachment)

  设置背景图像是否固定或者随着页面的其余部分滚动。

1
2
3
4
5
6
background-attachment : scroll(滚动) | fixed (固定)
/*
scroll 背景图像是随对象内容滚动

fixed 背景图像固定
*/

背景透明(CSS3)

1
2
background: rgba(0, 0, 0, 透明度值);
/*透明度值范围0-1*/
  • 最后一个参数是alpha 透明度 取值范围 0~1之间
  • 我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);
  • 背景半透明是指盒子背景半透明, 盒子里面的内容不受影响
  • 因为是CSS3 ,所以 低于 ie9 的版本是不支持的。

背景简写

  background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;

1
background: transparent url(image.jpg) repeat-y  scroll center top ;
  • 虽然没有强制的书写顺序,但建议遵循前端共同的书写顺序。

CSS列表样式

list-style-type

  设置列表项标志的类型。

1
list-style-type:关键字|none;
  • 无序列表
    • none: 无标记;
    • disc: 实心圆点;
    • circle: 虚心圆点;
    • square: 实心方块;
  • 有序列表
    • none: 无标记;
    • decimal:从1开始的整数;
    • lower/upper-roman: 小/大写罗马数字;
    • lower/upper-alpha:小/大写英文字母

list-style-image

  将图像设置为列表项标志。

1
list-style-image:URL|none;

list-style-position

  设置列表中列表项标志的位置。

1
list-style-position:inside|outside;
  • inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐;
  • outside:默认值,列表项目标记放置在文本以外,且环绕文本不根据标记对齐;

list-style属性简写

1
list-stylelist-style-type list-style-image list-style-position
  • 值之间用空格进行隔开;
  • 顺序不固定;
  • list-style-image会覆盖list-style-type的设置。

CSS盒子模型

网页布局的本质

  • 利用css样式设置好盒子的大小,摆放盒子的位置;
  • 把网页元素比如文字图片等放入盒子里面;

盒子模型

  盒子模型用来”放”网页中的各种元素。

  • 盒子模型由元素的内容,边框(border),内边距(padding)和外边距(margin);
  • 盒子里面的文字图片等元素是内容区域;
  • 盒子的厚度是边框;
  • 盒子内容与边框之间的距离是内边距;
  • 盒子与盒子之间的距离是外边距。

内容区域

宽度属性

1
2
3
width:长度值|百分比|auto;
max-width:长度值|百分比|auto;
min-width:长度值|百分比|auto;

高度属性

1
2
3
height:长度值|百分比|auto;
max-height:长度值|百分比|auto;
min-height:长度值|百分比|auto;
1
2
3
4
5
6
7
8
9
10
11
12
/*
1.内容的宽度和高度
就是通过width/height属性设置的宽度和高度

2.元素的宽度和高度
宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
高度 同理可证

3.元素空间的宽度和高度
宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
高度 同理可证
*/

边框属性

边框四个方向:上下左右。

  • 边框宽度(border-width);
  • 边框颜色(border-color);
  • 边框样式(border-style)。
1
border:border-width || border-style || border-color

边框宽度

1
2
border-widthlength
/*length长度值,单位为px,其余英文单词属性值不常用*/

边框样式

1
border-style:none| solid |dashed | dotted;

边框的样式:

  • none:没有边框即忽略所有边框的宽度(默认值);
  • solid:边框为单实线(最为常用的);
  • dashed:边框为虚线 ;
  • dotted:边框为点线;

边框颜色

1
border-color:颜色值|transparent;

边框属性简写

  在企业实际开发中,很少会给边框四条都设置属性。

  先写大的,后写小的具体的属性。

1
2
border:border-width || border-style || border-color ;
/*书写顺序没有强制要求*/

不同方向:

  • border-top:[宽度] | [样式] | [颜色];
  • border-right:[宽度] | [样式] | [颜色];
  • border-bottom:[宽度] | [样式] | [颜色];
  • border-left:[宽度] | [样式] | [颜色];

表格单元格边框宽度重叠

  两个单元格之间的边框会出现重叠,从而使边框变粗。

1
table{ border-collapse:collapse; }
  • collapse 单词是合并的意思;
  • border-collapse:collapse; 表示相邻边框合并在一起。

内边距属性

  设置元素的内容与边框的距离,分四个方向(上右下左),值不能为负值。

1
2
3
4
padding-top:长度值|百分比;
padding-right:长度值|百分比;
padding-bottom:长度值|百分比;
padding-left:长度值|百分比;
  • 给标签设置内边距之后, 标签占有的宽度和高度会发生变化
  • 给标签设置内边距之后, 内边距也会有背景颜色
  • 内边距属性呈顺时针反向;

内边距属性简写

1
2
3
4
5
6
7
8
9
10
11
/* 四个方向的内边距都是10px*/
padding:10px

/* 上下方向都是10px,左右方向都是20px*/
padding:10px 20px

/* 上10px,右20px,下30px,左20px*/
padding:10px 20px 30px

/* 上10px,右20px,下30px,左40px*/
padding:10px 20px 30px 40px

盒子的实际大小

盒子的实际大小=内容的宽度与高度+内边距+边框
#### 内边距产生的问题

  通过给设置了宽高的盒子,减去相应的内边距的值,维持盒子原有的大小。

padding不影响盒子大小情况

  如果没有给一个盒子指定宽度, 此时,如果给这个盒子指定padding, 则不会撑开盒子。

补充

1
2
3
4
5
6
7
/*注意点:
1.在企业开发中, 如果一个盒子中存储的是文字, 那么一般情况下我们会以盒子左边的内边距为基准, 不会以右边的内边距为基准, 因为这个右边的内边距有误差

2.右边内边距的误差从何而来? 因为右边如果放不下一个文字, 那么文字就会换行显示, 所以文字和内边距之间的距离就有了误差

3.顶部的内边距并不是边框到文字顶部的距离, 而是边框到行高顶部的距离
*/

box-sizing属性(CSS3)

1
2
3
4
5
6
7
8
9
10
/*
1.CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变
2.box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变,和我们前面学习的原理一样, 增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度
3.box-sizing取值
3.1content-box
元素的宽高 = 边框 + 内边距 + 内容宽高
3.2border-box
元素的宽高 = width/height的宽高

*/

外边距属性

  margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离

属性作用
margin-left左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距
  • margin值的简写 (复合写法)代表意思 跟 padding 完全相同。
  • 外边距的那一部分是没有背景颜色的

块级盒子水平居中

  可以让一个块级盒子实现水平居中必须:

  • 盒子必须指定了宽度(width)
  • 然后就给左右的外边距都设置为auto。
1
2
3
4
div {
width: 300px;
margin: 0 auto;
}

常见的写法,以下下三种都可以。

  • margin-left: auto; margin-right: auto;
  • margin: auto;
  • margin: 0 auto;

文字居中和盒子居中区别

  • 盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐;
  • 块级盒子水平居中 左右margin 改为 auto ;
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
35
36
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子居中和内容居中</title>
<style>
.father{
width: 800px;
height: 500px;
background-color: red;
/*text-align: center;*/
margin:0 auto;
}
.son{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<!--
1.text-align:center;和margin:0 auto;区别
text-align: center;作用
设置盒子中存储的文字/图片水平居中

margin:0 auto;作用
让盒子自己水平居中
-->
<div class="father">
我是文字<br/>
<img src="images/girl.jpg" alt="">
<!--<div class="son"></div>-->
</div>
</body>
</html>

插入图片和背景图片区别

  • 插入图片 我们用的最多 比如产品展示类有利于SEO 移动位置只能靠盒模型 padding margin.
  • 背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
img {  
width: 200px;/* 插入图片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入当图片也是一个盒子 */
}

div {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */
}

清除元素的默认内外边距

  在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等, 所以在企业开发中, 编写代码之前第一件事情就是清空默认的边距。

  格式:

1
2
3
4
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
  • 通配符选择器会找到(遍历)当前界面中所有的标签, 所以性能不好;
  • 企业开发中可以从这个网址中拷贝进行清除元素默认外边距代码拷贝;
  • 行内元素为了照顾兼容性, 尽量只设置左右内外边距, 不要设置上下内外边距。
1
2
3
4
5
6
7
8
9
10
11
12
 /*
注意点:
1.如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来
2.如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性
3.在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin,margin本质上是用于控制兄弟关系之间的间隙的

*/
/*
注意点:
1.在嵌套关系的盒子中, 我们可以利用margin: 0 auto;的方式来让里面的盒子在外面的盒子中水平居中
2.margin: 0 auto; 只对水平方向有效, 对垂直方向无效。
*/

外边距合并

  使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。

相邻块元素垂直外边距合并

  • 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom
  • 下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和
  • 取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。

www.png

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距合并</title>
<style>
.nav, .side {
width: 200px;
height: 200px;
background-color: aqua;
border: 1px solid;
}

.nav {
margin-bottom: 100px;

}

.side {
margin-bottom: 100px;

}
</style>
</head>
<body>
<div class="nav"></div>
<div class="side"></div>
</body>
</html>

  解决方案:尽量给只给一个盒子添加margin值。

嵌套块元素垂直外边距合并(塌陷)

  • 对于两个嵌套关系的块元素,如果父元素没有上内边距及边框
  • 父元素的上外边距会与子元素的上外边距发生合并
  • 合并后的外边距为两者中的较大者。
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距合并</title>
<style>
.father {
width: 500px;
height: 300px;
background-color: orangered;
/*border: 1px solid;*/
/*padding-top: 100px;*/
overflow: hidden;
}
.son {
width: 300px;
height: 200px;
background-color: skyblue;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>

解决方案:

  • 可以为父元素定义上边框。
  • 可以为父元素定义上内边距
  • 可以为父元素添加overflow:hidden。

  还有其他方法,比如浮动、固定、绝对定位的盒子不会有问题,后面继续总结。

盒子模型布局稳定性

  按照优先使用宽度(width),其次使用内边距(padding),再次使用外边距(margin)

  • margin会有外边距合并问题以及IE6兼容问题,所以要最后使用;
  • padding会影响盒子大小,需要进行加减计算;
  • width没有太大问题(宽高剩余法),首先推荐使用。

切图工具的使用

PhotoShop切图

1
2
3
4
5
6
7
8
1. jpg图像格式: 
JPEG(.JPG)对色彩的信息保留较好,高清,颜色较多,产品类的图片经常用jpg格式的
2. gif图像格式:
GIF格式最多只能储存256色,所以通常用来显示简单图形及字体,但是可以保存透明背景和动画效果
3. png图像格式
是一种新兴的网络图形格式,结合了GIF和JPEG的优点,具有存储形式丰富的特点,能够保持透明背景
4. PSD图像格式
PSD格式是Photoshop的专用格式,里面可以存放图层、通道、遮罩等多种设计草稿。

FireWorks工具

PxCook(像素大厨)

网页的布局方式

  网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的。

标准流(文档流/普通流)排版方式

  默认状态,元素自动从左往右,从上往下的排列。

  • 浏览器默认的排版方式就是标准流的排版方式;
  • 在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素;
  • 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版;
    • 垂直排版, 如果元素是块级元素, 那么就会垂直排版;
    • 水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版。

浮动流排版方式

  让盒子从普通流中浮起来,主要作用是让多个块级盒子一行显示。

  • 浮动流是一种”半脱离标准流”的排版方式;
  • 浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐。
  • 浮动流中没有居中对齐, 也就是没有center这个取值;
  • 在浮动流中是不可以使用margin: 0 auto;
  • 在浮动流中是不区分块级元素/行内元素/行内块级元素的,无论是级元素/行内元素/行内块级元素都可以水平排版;
  • 在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽;
  • 浮动流中的元素和标准流中的行内块级元素很像

定位流排版方式

  将盒子定在浏览器的某一个位置。

浮动(float)

作用

  • 浮动最早是用来控制图片,文字环绕图片的效果。
  • 让多个盒子水平排列一行,使得浮动成为布局的重要手段
  • 实现盒子的左右对齐等

特点

  • 会使元素向左或向右移动,只能左右,不能上下;
  • 浮动元素碰到包含框或者另一个浮动框,浮动停止;
  • 元素浮动后具备行内块属性;
  • 浮动元素会脱离文档流

语法

1
2
3
4
5
6
float: none|left|right;
/*
1.none:默认值,不使用浮动;
2.left:靠左浮动;
3.right:靠右浮动。
*/

设置元素浮动的影响

脱标(脱离标准流)

  当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标。

  设置浮动属性的元素,不再是标准流了,漂浮起来(不占位置),浮在(覆盖)在标准流元素的上面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>脱标</title>
<style>
.one {
float: left;
width: 200px;
height: 200px;
background-color: aqua;
}
.two {
width: 300px;
height: 300px;
background-color: orangered;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>

改变元素的display属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>脱标</title>
<style>
div {
/*没设置float属性之前,div具备块级元素的特点,独占一行,默认宽度是父元素的宽度*/
height: 50px;
background-color: aqua;

/*设置float属性之后会发现,该元素div仍然是块级元素,具备行内块的特点,不独占一行,宽度由内容撑开*/
/*浮动元素默认之间是没有缝隙的*/
float: left;
}
</style>
</head>
<body>
<div>
我曾对你的爱深表不疑
</div>

</body>
</html>

浮动元素排序规则

  • 相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面;
  • 不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动;
  • 浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定。

相同方向的元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>

.box1 {
float: left;
width: 50px;
height: 50px;
background-color: red;
}

.box2 {
float: left;
width: 100px;
height: 100px;
background-color: orange;
}
</style>

不同方向的元素

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
<style>

.box1 {
float: left;
width: 50px;
height: 50px;
background-color: red;
}

.box2 {
float: left;
width: 100px;
height: 100px;
background-color: orange;
}
.box3 {
float: right;
width: 150px;
height: 150px;
background-color: blue;
}
.box4 {
float: right;
width: 200px;
height: 200px;
background-color: green;
}
</style>

浮动位置确定

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
<style>

.box1 {
float: left;
width: 50px;
height: 50px;
background-color: red;
}

.box2 {
width: 100px;
height: 100px;
background-color: orange;
}
.box3 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
.box4 {
width: 200px;
height: 200px;
background-color: green;
}
</style>

浮动元素的贴靠现象

  • 如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示;
  • 如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠;
  • 如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边。
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
35
36
37
38
39
.father {
/*
父元素宽度满足放下所有盒子的宽度时,排序按照前面讲的规则进行排序
width: 500px;
*/
/*
父元素宽度不满足放下所有盒子的宽度时,最后一个浮动元素会找贴靠当前元素的前一个元素进行贴靠
width: 300px;
*/

/*
父元素宽度不满足放下所有盒子的宽度时,如果前一个浮动元素贴靠依然超出父元素的宽度,
会找父元素进行贴靠,不管宽度是否超出父元素宽度
width: 250px;
*/
width: 250px;
height: 500px;
border: 1px solid;
}

.box1 {
float: left;
width: 100px;
height: 300px;
background-color: red;
}
.box2 {
float: left;
width: 150px;
height: 150px;
background-color: orangered;
}
.box3 {
float: left;
width: 200px;
height: 200px;
background-color: deepskyblue;
}
</style>

浮动元素字围现象

  • 浮动的元素不会盖住没有浮动元素中的文字,没有浮动元素中的文字会给浮动的元素让位置;
  • 字围效果可以用来做图文混排。

浮动和标准流的父盒子搭配

  给需要浮动的元素添加一个标准流的父亲,避免浮动给其他标准流元素的影响。

清除浮动

原因

  • 很多应用场景不方便给父盒子高度;
  • 标准流会撑开盒子;
  • 浮动流不会撑开盒子(浮动元素不占位置),会对后面的元素排版产生影响;
  • 准确地说,并不是清除浮动,而是清除浮动后造成的影响

浮动元素高度问题

  • 在标准流中内容的高度可以撑起父元素的高度;
  • 在浮动流中浮动的元素是不可以撑起父元素的高度的(高度为0).

清除浮动本质

​   清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后, 父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了

清除浮动的方法

给父元素设置高度

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
 <style>
.father {
width: 450px;
height: 200px;
background-color: black;
}

.box1 {
float: left;
width: 100px;
height: 100px;
background-color: red;
}

.box2 {
float: left;
width: 150px;
height: 150px;
background-color: orangered;
}

.box3 {
float: left;
width: 200px;
height: 200px;
background-color: deepskyblue;
}
</style>
/*在企业开发中, 我们能不写高度就不写高度, 所以这种方式用得很少*/

给后面盒子添加clear属性

  语法:

1
2
3
4
5
6
7
8
9
10
div {
clear: none|left|right|both
}
/*
1.none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
2.left: 不要找前面的左浮动元素
3.right: 不要找前面的右浮动元素
4.both: 不要找前面的左浮动元素和右浮动元素
在企业开发中,使用both属性值最多。
*/

局限性:

  当我们给某个元素添加clear属性之后, 那么这个属性的margin属性就会失效。

  div2 的父元素是body所以margin-top是距离body的顶端的距离,所以当设置21px的时候没有效果,小于等于21都没有效果,想要div1和div2分开必须margin-top大于21px,

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
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
background-color: mediumvioletred;
}

.box2 {
clear: both;
margin-top: 20px;
background-color: limegreen;
}

.box1 p {
float: left;
width: 100px;
background-color: deeppink;
}

.box2 p {
float: left;
width: 100px;
background-color: hotpink;
}
</style>

隔墙法

外墙法
  • 在两个盒子中间添加一个块级元素(给其添加高度height属性,避免使用margin属性);
  • 给这个额外的块级元素设置clear:both;属性;
  • 外墙法它可以让第二个盒子使用margin-top属性;
  • 外墙法不可以让第一个盒子使用margin-bottom属性.
  • 抽取公共信息,提高代码可维护性.
内墙法
  • 在第一个盒子中所有子元素最后添加一个额外的块级元素;
  • 给这个额外添加的块级元素设置clear: both;属性.
  • 内墙法它可以让第二个盒子使用margin-top属性;
  • 内墙法它可以让第一个盒子使用margin-bottom属性
外墙法与内墙法的区别

  外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度.

总结
  • 在企业开发中不常用隔墙法来清除浮动.
  • 添加许多无意义的标签,结构化较差.

伪元素选择器清除浮动

  隔墙法增加了无用的标签,前端中讲究语义和样式分开,所以推荐使用伪元素选择器来清除浮动.

1
2
3
4
5
6
7
.box::after{
content:"";
display:block;
height:0px;
visibility:hidden;
clear:both;
}
  • 本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都一样.
  • IE6中不支持这种方式, 为了兼容IE6必须给前面的盒子添加*zoom:1;属性.

设置overflow属性

  作用:

  • 可以将超出标签范围的内容裁剪掉;
  • 清除浮动;
  • 可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来.

overflow: hidden属性不兼容IE6,该设置*zoom:1;

伪元素选择器

  就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素.

1
2
3
4
5
6
7
8
9
10
11
标签名称: :after{}
/*标签名称: :before{
//指定添加的子元素中存储的内容
content:“爱你”;
//指定添加的子元素中的宽度和高度
height:20px;
//指定添加的子元素的显示模式
display:block;
//隐藏添加的子元素
visibility:hidden
*/
1
2
3
4
.box{
/*兼容IE6*/
*zoom:1;
}

定位(position)

  将盒子定在某一个位置,自由的漂浮在其他盒子(包括标准流和浮动)的上面.定位也是用来布局的,主要由两部分组成

定位=定位模式+边偏移
### 地位
  • 既是CSS的核心模块之一,又是作为CSS的属性;
  • 提供与元素定位和层叠相关的功能模块;
    • 盒子模型的类型和尺寸;
    • 布局模型;
    • 元素之间的关系;
    • 视口大小,图像大小等其他相关方面.
  • 属性position为盒子选择一种相应的定位模型.

边偏移

  我们定位的盒子,是通过边偏移来移动位置的.

  • top:顶端偏移量,定义元素相对于其父元素上边线的距离;
  • bottom: 底部偏移量,定义元素相对于其父元素下边线的距离;
  • left: 左侧偏移量,定义元素相对于其父元素左边线的距离;
  • right: 右侧偏移量,定义元素相对于其父元素右边线的距离;

定位改变display属性

  • 一个行内的盒子,如果加了浮动、固定定位和绝对定位,不用转换,就可以给这个盒子直接设置宽度和高度等;
  • 浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。

补充知识点

HTML Document Tree(文档树)

  每个HTML文档实际上可以称为文档树,像是在描述我们生活中的家族族谱一样描述树中的元素,.比如有祖先与后代,父母(包括爷爷奶奶等),孩子和兄弟姐妹.

  了解文档树对于我们学习CSS来说(CSS选择器使用文档树)很重要.

unnamed.gif
  • 祖先(ancestor);
1
2
3
4
5
/*
祖先是指已连接但在文档树中更远的任何元素-不管更高级别。

<body>元素是页面上所有其他元素的祖先
*/
  • 后代;
1
2
3
4
/*
后代指的是已连接但位于文档树下方的任何已连接元素-不管降低多少层。
在<div>元素下方连接的所有元素都是该<div>的后代
*/
  • 父母与子女;
1
2
3
4
5
/*
父级是直接在文档树中的元素上方并与之连接的元素,<div>是<ul>的父级。

子元素是一个直接位于文档树下方的元素,并与之相连,<ul>是<div>的子级。
*/
  • 兄弟.
1
2
3
4
5
/*
兄弟姐妹是与另一个元素共享同一父元素的元素。

<li>是兄弟姐妹,因为它们都共享同一个父对象-<ul>。
*/

normal-flow(文档流)

  • Normal FLow是指在不对页面进行任何布局控制时,浏览器默认的HTML布局方式。
  • 块级元素按照其在HTML中的顺序,在其容器框里从左上角开始,从上到下垂直地依次分配空间、堆砌( stack ),并独占一行,边界紧贴父容器。两相邻元素间的距离由 margin 属性决定
  • 行内元素从容器的顶端开始,一个接一个地水平排布。水平填充、边框和边距对行内元素有效。但垂直的填充、边框和空白边不影响其高度。

containing-block(包含块)

  就是相对父元素怎么定位的

  • absolute会脱离正常的文档流,去向上找最近的、position属性不为static的父元素,如果找不到就是body,然后根据这个父元素去定位。
  • 而relative是不会脱离文档流,只是相对自身原本正常的文档流来定位的。

定位模型

  • static 自然模型;
  • relative 相对定位模型;
  • absolute 绝对定位模型;
  • fixed 固定定位模型;
  • sticky 磁贴定位模型;

static模型

  我们称为静态定位/常规定位/自然定位,默认的定位模型.

作用

  使元素定位于标准流中(块,行垂直排列下去,行内水平从左到右).

特点

  • 忽略top/bottom/left/right或者z-index声明;
  • 两个相邻的元素如果都设置外边距,name最终外边距等于两者外边距中值较大的那个;
  • 具有固定width和height值的元素,如果把左右外边距设置为auto,则左右外边距会自动扩大占满剩余宽度,会导致这个块元素水平居中.

relative模型

相对定位就是相对于自己以前在标准流中的位置来移动(参照物).

relative1.png

特点

  • 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间;
  • 在相对定位中同一个方向上的定位属性只能使用一个;
  • 由于相对定位是不脱离标准流的, 在相对定位中是区分块级元素/行内元素/行内块级元素;
  • 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局.
  • 可以使浮动元素发生偏移,并控制他们的堆叠顺序.

应用场景

  • 用于对元素进行微调;
  • 配合后面学习的绝对定位来使用(子绝父相).

absolute模型

  • 绝对定位就是相对于body来定位(默认情况下).
  • 绝对定位是元素以带有定位的父级元素来移动位置 .

特点

  • 绝对定位的元素是脱离标准流的,完全不占位置;
  • 绝对定位的元素是不区分块级元素/行内元素/行内块级元素的.
  • 设置尺寸为百分比参照的是最近定位的祖先元素

参考点规律

  • 默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点;
relative2.png
  • 如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点.

    • 只要是这个绝对定位元素的祖先元素都可以;
    • 指的定位流是指绝对定位/相对定位/固定定位;
    • 定位流中只有静态定位不行.
    relative3.png
  • 如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点.

注意点

  • 如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度(打开浏览器默认的宽高度)作为参考点, 而不是以整个网页的宽度和高度(带滚动条的)作为参考点.
  • 一个绝对定位的元素会忽略祖先元素的padding.

子绝父相策略

相对定位弊端

  相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面.

绝对定位弊端

  默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化.

子绝父相含义

  子元素用绝对定位, 父元素用相对定位.

绝对定位之水平居中

  绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。

abs.png
  • 只需要设置绝对定位元素的left:50%;
  • 然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;
abs1.png

绝对定位与浮动的不同

  • 绝对定位:脱标,利用边偏移指定准确位置
  • 浮动:脱标,不能指定准确位置,让多个块级元素在一行显示

fixed模型

  固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动.

特点

  • 固定定位元素不会随着视口滚动而滚动;
  • 继承absolute模型的特点;
    • 固定定位的元素是脱离标准流的, 不会占用标准流中的空间;
    • 固定定位和绝对定位一样不区分行内/块级/行内块级;
  • IE6不支持固定定位,使用兼容写法适应;
  • 使用固定定位时,如果盒子中没有内容,需要指定宽度

参照物

  只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置;

  跟父元素没有任何关系;单独使用的

应用场景

  • 网页中的广告部分,顶部导航栏等不需要随着高度而滚动.
  • 固定在浏览器可视窗口某个位置的布局.

固定定位与绝对定位的区别

  • 相对于谁作绝对定位;

sticky模型(CSS3)

  一般称为磁贴定位/粘性定位/吸附定.

作用

  relative+fixed的完美结合,制造出吸附效果.

特点

  • 磁贴定位的元素不会脱离标准流;

参照物

  • 视口;
  • 最近可滚动的祖先元素.

z-index属性(堆叠顺序)

  • 默认情况下所有的元素都有一个默认的z-index属性, 取值是0.
  • z-index属性的作用是专门用于控制定位流元素的覆盖关系的.

特点

  • 数字后面不能加单位;
  • 默认情况下定位流的元素会盖住标准流的元素;
  • 默认情况下定位流的元素后面编写的会盖住前面编写的;
  • 如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面;
  • z-index 只能应用于相对定位、绝对定位和固定定位的元素,其他标准流、浮动和静态定位无效。

注意点

从父现象:

  • 如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上面
  • 如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说谁的父元素的z-index属性比较大谁就会显示在上面.

定位小结

定位模式是否脱标占有位置移动位置基准模式转换(行内块)使用情况
静态static不脱标,正常模式正常模式不能几乎不用
相对定位relative不脱标,占有位置相对自身位置移动不能基本单独使用
绝对定位absolute完全脱标,不占有位置相对于定位父级移动位置要和定位父级元素搭配使用
固定定位fixed完全脱标,不占有位置相对于浏览器移动位置单独使用,不需要父级

注意

  1. 边偏移需要和定位模式联合使用,单独使用无效
  2. topbottom 不要同时使用;
  3. leftright 不要同时使用。

网页边缘定位小技巧

dingwei.png

网页布局总结

  一个完整的网页,有标准流 、 浮动 、 定位 一起完成布局的.

标准流

  可以让盒子上下排列 或者 左右排列的;

浮动

  可以让多个块级元素一行显示 或者 左右对齐盒子 浮动的盒子就是按照顺序左右排列 ;

定位

  定位最大的特点是有层叠的概念,就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值。

CSS常用技巧

元素的显示与隐藏

display显示

1
2
display: none;
/*display:block 除了转换为块级元素之外,同时还有显示元素的意思。*/
  • 设置元素是否以及如何显示;
  • 隐藏之后,不在保留位置.
  • 配合后面js做特效(鼠标经过,显示下拉菜单)应用极为广泛.

visibility 可见性

1
visibility: visible|hidden;
  • 隐藏之后,继续保留原有位置。

overflow 溢出

  设置当对象的内容超过其指定高度及宽度时如何管理内容

属性值描述
visible不剪切内容也不添加滚动条
hidden不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll不管超出内容否,总是显示滚动条
auto超出自动显示滚动条,不超出不显示滚动条

  实际开发场景:

  • 清除浮动
  • 隐藏超出内容,隐藏掉, 不允许内容超过父盒子.

CSS用户体验

鼠标样式(cursor)

  设置鼠标指针采取不同的光标样式.

属性值描述
default小白 箭头 默认
pointer小手
move移动
text文本
not-allowed禁止

输入框轮廓线(outline)

  在实际开发中.我们都是直接去掉输入框的轮廓线.例如京东首页的输入框.

1
2
 outline : outline-color ||outline-style || outline-width ;
/* outline: 0; 或者 outline: none;*/

防止文本域拖拽(resize)

  实际开发中,我们文本域右下角是不可以拖拽:

1
<textarea  style="resize: none;"></textarea>

溢出的文字省略号显示

white-space

  设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容.

1
2
3
4
5
/*默认处理方式*/
white-space:normal

white-space:nowrap
/*强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。*/

text-overflow 文字溢出

  设置或检索是否使用一个省略标记(…)表示对象内文本的溢出.

  首先强制一行内显示,再次和overflow属性 搭配使用.

1
2
3
4
5
/*不显示省略标记(...),而是简单的裁切 */
text-overflow : clip

/* 当对象内文本溢出时显示省略标记(...)*/
text-overflowellipsis

总结

1
2
3
4
5
6
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;

CSS雪碧图

原因

  为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度。

含义

  CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图。

使用

  css精灵技术主要针对于背景图片,所以我们必须先使用background-image属性 然后使用background-position对精灵图进行定位.

  • 精确测量,每个小背景图片的大小和 位置。
  • 给盒子指定小背景图片时, 背景定位基本都是 负值。

CSS滑动门技术

  为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,最常见于各种导航栏的滑动门。

原理

  利用CSS精灵(主要是背景位置)和 盒子padding撑开宽度, 以便能适应不同字数的导航栏

margin负值技巧

负边距+定位:水平垂直居中

  利用父级盒子的 50%, 然后 往左(上) 走 自己宽度的一半 ,可以实现盒子水平垂直居中.

压住盒子相邻边框

  • 可以做出类似细线表格的效果;
  • 主要是解决盒子与盒子之间合并出现边框加粗从而变细的效果

CSS三角形

步骤

  • 宽度高度为0;
  • 4个边框都要写, 只保留需要的边框颜色,其余的不能省略,都改为 transparent 透明;
  • 为了照顾兼容性 低版本的浏览器,加上 font-size: 0; line-height: 0;

代码演示

1
2
3
4
5
6
7
8
9
10
11
div {

width: 0;
height: 0;
line-height:0
font-size: 0;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid #000;
}

CSS高级

CSS网页布局

  • 行布局;
  • 多列布局;
  • 圣杯布局;
  • 双飞翼布局;

行布局

基础的行布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本的行布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 1000px;
height: 500px;
text-align: center;
background-color: aqua;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">这是一个网页</div>
</body>
</html>
行布局自适应

  就是让盒子随着浏览器的伸缩进行自动适应

1
2
3
4
5
6
7
8
9
10
11
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 500px;
text-align: center;
background-color: aqua;
margin: 0 auto;
}
行布局自适应最大宽

  打开浏览器时,网页宽度并不是浏览器窗口的大小,而是限定了最大宽度.

1
2
3
4
5
6
7
8
.container {
width: 100%;
max-width: 1000px;
height: 500px;
text-align: center;
background-color: aqua;
margin: 0 auto;
}
行布局垂直水平居中

  典型例子:百度首页

1
2
3
4
5
6
7
8
9
10
11
12
.container {
position: absolute;
width: 1000px;
height: 200px;
line-height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -500px;
text-align: center;
background-color: aqua;
}

多列布局

两列布局固定
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
* {
margin: 0;
padding: 0;
}

.container {
width: 1200px;
height: 1000px;
margin: 0 auto;
text-align: center;
}

.left {
float: left;
width: 600px;
height: 1000px;
background-color: aqua;
}

.right {
float: left;
width: 600px;
height: 1000px;
background-color: skyblue;
}
两列布局自适应
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.container {
width: 90%;
height: 1000px;
margin: 0 auto;
text-align: center;
}

.left {
float: left;
width: 60%;
height: 1000px;
background-color: aqua;
}

.right {
float: left;
width: 40%;
height: 1000px;
background-color: skyblue;
}
三列布局固定
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
.container {
width: 1000px;
margin: 0 auto;
text-align: center;
}

.left {
float: left;
width: 300px;
height: 1000px;
background-color: aqua;
}

.middle {
float: left;
width: 500px;
height: 1000px;
background-color: limegreen;
}

.right {
float: right;
width: 200px;
height: 1000px;
background-color: orangered;
}
三列布局自适应
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

.container {
width: 100%;
margin: 0 auto;
text-align: center;
}

.left {
float: left;
width: 30%;
height: 1000px;
background-color: aqua;
}

.middle {
float: left;
width: 50%;
height: 1000px;
background-color: limegreen;
}

.right {
float: right;
width: 20%;
height: 1000px;
background-color: orangered;
}

混合布局

  结合行布局与列布局.

圣杯布局

  • 由Kevin Cornell提出的布局模型概念;
  • 布局要求:
    • 三列布局,中间自适应,两边顶宽;
    • 中间栏要在浏览器中优先展示与渲染;
    • 允许任意列的高度最高(不影响别的列);
    • 用最简单的CSS,最少的Hack语句(良好的兼容性).
代码演示步骤1
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本的行布局</title>
<style>
* {
margin: 0;
padding: 0;
}

body {
min-width: 700px;
}

.header,
.footer {
float: left;
width: 100%;
height: 40px;
background-color: orangered;
line-height: 40px;
text-align: center;
}

.container {
/*左右内边距分别是左右侧盒子的宽度*/
padding: 0 220px 0 200px;
}

.middle {
width: 100%;
background-color: skyblue;
}

.left {
width: 200px;
background-color: mediumvioletred;

}

.right {
width: 220px;
background-color: limegreen;
}
</style>
</head>
<body>
<div class="header">
<h4>这是页面头部</h4>
</div>
<div class="container">
<div class="middle">
<h4>这是页面中侧</h4>
<p>这是页面中侧这是页面中侧这是页面中侧这是页面中侧这是页面中侧这是页面中侧这是页面中侧这是页面中侧这是页面中侧这是页面中侧</p>
</div>
<div class="left">
<h4>这是页面左侧</h4>
</div>
<div class="right"><h4>这是页面右侧</h4></div>
</div>
<div class="footer">
<h4>这是页面尾部</h4>
</div>
</body>
</html>
代码演示步骤2
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
.container {
/*左右内边距分别是左右侧盒子的宽度*/
padding: 0 220px 0 200px;
}

.left,
.middle,
.right {
position: relative;
float: left;
min-height: 300px;
}

.middle {
width: 100%;
background-color: skyblue;
}

.left {
width: 200px;
background-color: mediumvioletred;
/*这一步是关键,向左移动父盒子宽度的距离*/
margin-left: -100%;
/*定位元素具有忽略内边距的特性,区别于浮动(浮动不能覆盖内边距)*/
left: -200px;

}

.right {
width: 220px;
background-color: limegreen;
margin-left: -220px;
right: -220px;
}

双飞翼布局

  • 对圣杯布局进行改良得出的布局模型
  • 去掉相对布局,只需要浮动和负边距;
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
* {
margin: 0;
padding: 0;
}

body {
min-width: 700px;
}

.header,
.footer {
width: 100%;
height: 40px;
float: left;
background-color: aqua;
text-align: center;
line-height: 40px;
}

.sub,
.main,
.extra {
float: left;
min-height: 300px;
}

.main {
width: 100%;

}

.main_inner {
margin-left: 200px;
margin-right: 220px;
background-color: orangered;
min-height: 300px;
}

.sub {
width: 200px;
background-color: hotpink;
margin-left: -100%;

}

.extra {
width: 220px;
background-color: limegreen;
margin-left: -220px;
}

</style>
</head>
<body>
<div class="header">
<h4>这是页面头部</h4>
</div>
<div class="main">
<div class="main_inner">
<h4>这是页面中侧</h4>
<p>这是页面中侧这是页面中侧这是页面中侧这是页面中侧这是页面中侧这是页面中侧这是页面中侧这是页面中侧这是页面中侧这是页面中侧</p>
</div>
</div>
<div class="sub">
<h4>这是页面左侧</h4>
</div>
<div class="extra"><h4>这是页面右侧</h4></div>
<div class="footer">
<h4>这是页面尾部</h4>
</div>
</body>
</html>

CSS3边框与圆角

CSS3圆角

  border-radius属性可以为元素添加圆角边框.

1
2
3
4
5
6
7
8
9
border-radius: (1-4)lenght;
/*
1.单值;
2.多值;
其中每一个值可以为 数值或百分比的形式。
技巧: 让一个正方形 变成圆圈
border-radius: 50%;
技巧: 让一个长方形 变成圆角 高度的一半,精确值.
*/

  圆角矩形可以为4个角分别设置圆度, 但是是有顺序的.

1
2
3
4
5
6
7
8
9
10
11
/*
先上下后左右
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
*/

/*简写格式*/
border-radius: lenght;
/*左上角 右上角 右下角 左下角(单位是px)*/

CSS3盒阴影

1
/*box-shadow:水平阴影 垂直阴影 模糊距离(虚实)  阴影尺寸(影子大小)  阴影颜色  内/外阴影;*/
  • 前两个属性是必须写的。其余的可以省略。
  • 外阴影 (outset) 是默认的 但是不能写,想要内阴影可以写 inset
1
2
3
4
5
6
7
8
div {
width: 200px;
height: 200px;
border: 10px solid red;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
/* box-shadow:水平位置 垂直位置 模糊程度 阴影扩展长度值 阴影颜色 内/外阴影; */
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增标签</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
height: 300px;
background-color: aqua;
margin: 0 auto;
box-shadow: 10px 10px 0 0 orangered inset;
}
</style>
</head>
<body>
<diV class="box">你满嘴的喜欢就像哭的空气</diV>
</body>
</html>

CSS3边框图片

  使用border-image复合属性来创建美丽的可扩展按钮.它能让你用漂亮的小图片来围绕HTML元素,以图片边框的形式出现。通过border-image属性,我们可以制作出非常漂亮的边框样式。

  • border-image-source;
  • border-image-slice ;
  • border-image-width;
  • border-image-outset:;
  • border-image-repeat ;
1
2
3
4
border-image: source slice width outset repeat;
/*
IE,Opera不兼容 Safari6+支持;
*/
border-image-source图片来源

  url():设置边框图片的路径.

1
border-image-source:none|url(image url);/*image url可以是相对地址也可以是绝对地址*/
border-image-slice图片裁剪
1
2
3
4
5
6
7
8
border-image-slice: number|fill;
/*
数字和百分比,不能带单位
百分比值大小是相对于边框图片的大小
*/
/* 前1~4 个参数 是按照线的位置分割,按照上 右 下 左的顺序进行分割,
提供2个值 就是上下和左右,提供1个值,就设置4条线的位置。
*/

图片切割.png

  五个属性分别控制上右下左四条线和内容区域,把一张图裁剪成”九宫图”

border-image-width图片宽度

 设置边框图片的宽度.可以设置 数字,和 px,数字的话是几倍的意思.代替盒子本身的边框宽度

1
2
3
4
5
6
border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4};
/*length 带 px, em等单位的尺寸值
percentage 百分比
number 不带单位的数字;它表示 border-width的倍数
auto 使用auto, border-image-width将会使用 border-image-slice 的值,然后加上px.
*/
border-image-outset边框图片扩散

  相当于把原来的贴图位置向外延伸,代替盒子本身的边框宽度.不能为负值.

1
2
3
4
5
6
border-image-outset: <length> | <number> ]{1,4};
/*
length,具体的像素单位
number,具体的数字;代表对应的 border-width 的倍
作用:让边框背景延伸到盒子外
*/
border-image-repeat 边框图片平铺

  按照什么方式平铺边框图片.

1
2
3
4
5
6
7
8
9
10
border-image-repeat: stretch|repeat|round|space;
/*
属性值:
(1)repeat:平铺(重复)图像来填充区域
(2)round: 如果无法完整平铺所有图像,则对图像进行缩放以适应区域
(3)stretch:拉伸图像来填充区域
作用:图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)
1.一个参数, 代表 四个方向的平铺一样;
2.两个参数,第一个值 代表水平方向,第二个值代表垂直方向。
*/

CSS3背景

CSS3背景图像区域

  用来指定背景的绘制区域.

1
2
3
4
5
6
7
background-clip:border-box|padding-box|content-box;
/*
1.IE9+兼容;
2.border-box:默认值,从边框方框开始裁剪;
3.padding-box:从内边距开始裁剪;
4.content-box:从内容区域裁剪;
*/

CSS3背景图像原点

  设置元素背景图片的原始其实位置.

  • background-position:定义背景图片位置,水平和垂直偏移量,默认是左上角为坐标原点,但是左上角太抽象,具体的坐标原点是哪里,就由background-origin决定.
  • background-Origin属性指定background-position属性应该从哪个相对位置。
  • 如果背景图像background-attachment是”固定”,这个属性没有任何效果.
1
2
3
4
5
6
background-origin: padding-box|border-box|content-box;
/*
1.content-box:背景图像相对于内容框来定位;
2.padding-box:背景图片相对于内边距框来定位;
3.border-box:背景图片相对于边框方框来定位;
*/

CSS3背景图像大小

  用来指定背景图片的大小.

1
2
3
4
5
6
7
background-size: length|percentage|cover|contain;
/*
1.length:设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 auto(自动).
2.percentage:将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二 个是设置为"auto(自动)"
3.cover:保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。(不留空白)
4.contain:保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。(至少一边不留空白)
*/

CSS3多重背景图像

  允许元素设置多个背景图像.

1
2
3
4
background-image: url(img1.jpg),url(img2.jpg);\
/*IE8及其更早版本不支持一个元素上设置多个背景图片。
注意图片的先后顺序.前面图片依次覆盖后面图片.
*/

CSS3背景属性整合

  背景简写属性可以在一个声明中设置所有的背景属性.

1
2
3
4
background: color| position|size|repeat|origin|clip|attachment|image;
/*
不推荐这样写,建议css属性与css3新增属性分开写.
*/

CSS3渐变

  渐变(gradients)可以再两个或多个指定的元素之间显示平稳的过渡(过渡指的是颜色的过渡).注意浏览器的兼容性;

色标(很重要)

  • 浏览器对于色标并没有默认值;
  • 必须设置至少两个色标。色标由颜色和位置组成。
  • 颜色使用任何一种颜色模式都可以,而位置可以使用百分比或数值。
  • 颜色的位置也可以设置负值.

规则

  • 颜色在前,位置在后
1
background:linear-gradient(red 0%,oranged 100%);
  • 位置可以省略,浏览器默认会把第一个颜色的位置设置为0%,把最后一个颜色的位置设置为100%
1
background:linear-gradient(red ,oranged);
  • 若渐变只有两种颜色,且第一个颜色的位置设置为n%,第二个颜色的位置设置为m%。则浏览器会将0%-n%的范围设置为第一个颜色的纯色,n%-m%的范围设置为第一个颜色到第二个颜色的过渡,m%-100%的范围设置为第二个颜色的纯色.
1
background:linear-gradient(red 20%,oranged 70%);
  • 若渐变颜色没有指定位置,则它们会均匀分布;

CSS3线性渐变

  沿着一根轴改变颜色,从起点到终点颜色进行顺序渐变(从一边拉向另一边)

1
2
3
4
5
background: linear-gradient(direction,color1,color2....);
/*
1.direction:方向
2.color1,color2:开始颜色,结束颜色
*/
从上到下(默认方向)
1
background: linear-gradient(color1,color2....);
1
2
3
4
5
6
7
8
9
10
11
12
div {
width: 1200px;
height: 800px;
/*这是谷歌浏览器兼容写法*/
background: -webkit-linear-gradient(red,blue);
/*这是火狐浏览器兼容写法*/
background: -moz-linear-gradient(red,blue);
/*这是欧朋浏览器兼容写法*/
background: -o-linear-gradient(red,blue);
/*这是浏览器标准写法*/
background: linear-gradient(red,blue);
}
从左到右
  • 不同浏览器内核写法不同;
  • 从上到下默认的不用写方向,从左到右要指明方向;
1
2
3
4
5
6
7
8
9
10
11
12
div {
width: 1200px;
height: 800px;
/*这是谷歌浏览器兼容写法,开始方向*/
background: -webkit-linear-gradient(red,blue);
/*这是火狐浏览器兼容写法,结束方向*/
background: -moz-linear-gradient(red,blue);
/*这是欧朋浏览器兼容写法,结束方向*/
background: -o-linear-gradient(red,blue);
/*这是浏览器标准写法,to结束方向*/
background: linear-gradient(red,blue);
}
对角方向
  • 同从左到右方向写法类似;
  • 不同浏览器内核写法不同;
1
2
3
4
5
6
7
8
9
10
11
12
div {
width: 1200px;
height: 800px;
/*这是谷歌浏览器兼容写法,开始方向(左上角)*/
background: -webkit-linear-gradient( left top ,red,blue);
/*这是火狐浏览器兼容写法,结束方向(右下角)*/
background: -moz-linear-gradient( right bottom,red,blue);
/*这是欧朋浏览器兼容写法,结束方向(右下角)*/
background: -o-linear-gradient(right bottom,red,blue);
/*这是浏览器标准写法,to结束方向(to右下角)*/
background: linear-gradient(to right bottom,red,blue);
}
使用角度
  • 不同浏览器内核角度开始的方向不相同的
    • webkit内核角度是以逆时针方向渐变;
    • 标准写法是以顺时针方向渐变;
1
2
3
4
5
background: linear-gradient(angle,color1,color2....);
/*
1.angle:角度值;
2.在0~360之间的数字后面加上deg,指定过渡在哪个方向结束。
*/
11135.jpg
颜色结点
  • 默认情况下,多个颜色是均匀分布的;
  • 可以给每个颜色相应比例的百分比来达到不均匀的效果;
  • 如果最后一个不写百分比值,默认是100%,如果第一个不写百分比值,默认是0%;
1
background: linear-gradient(color1 lenght|percentage,color2 lenght|percentage....);

透明色渐变

  • 为了添加透明度,我们使用 rgba() 函数来定义颜色结点;
  • 0 表示完全透明,1 表示完全不透明。
1
background: linear-gradient(direction rgba(0,0,0,0),rgba(0,0,0,1));
重复渐变
1
background: repeating-linear-gradient(color1 lenght|percentage,color2 lenght|percentage....);

CSS3径向渐变

  • 从起点到终点颜色从内到外进行圆形渐变(从中间向外拉的效果)
  • “径”指的是圆的半径的意思
1
background: radial-gradient(center,shape size,color1,color2...);
默认颜色结点均匀分布
1
background: radial-gradient(color1,color2...);
颜色结点不均匀分布
  • 百分比例:半径是指中心点到最远端对角线的百分比例
1
background: radial-gradient(color1 lenght|percentage,color2 lenght|percentage....);
1
2
3
4
5
6
div {
width:1200px;
height:800px;
/*是从50%-70%部分发生渐变*/
background: radial-gradient(red 50%, blue 70%);
}
设置形状
1
2
3
4
5
6
background: radial-gradient(shape,color1,color2....);
/*
1.circle圆形;
2.ellipse椭圆(默认)
3.如果元素宽高一样,设置那个参数都会显示圆形
*/
尺寸大小(关键字)
  • 圆形;
  • 椭圆形要考虑到中心短轴与长轴之间的距离;
1
2
3
4
5
6
7
8
background: radial-gradient(size,color1,color2...);
/*
关键字size取值:
1.closest-side:最近边;
2.farthest-side:最远边;
3.closest-corner:最近角;
4.farthest-corner:最远角;
*/
重复径向渐变
1
background: repeating-radial-gradient(color1 lenght|percentage,color2 lenght|percentage....);

IE渐变(IE6-IE9)

1
2
3
4
5
6
7
8
9
10
/*
(Enabled = [true | false],EndColor = <integer>,EndColorStr = <color>,StartColor = <integer>,StartColorStr = <color>,GradientType = [0 | 1])
*/
/*滤镜
GradientType代表渐变线方向,0为垂直(默认),1为水平
#color代表色标,格式是#aarrggbb,其中aa为透明度,rrggbb为rgb模式的颜色
startColorstr的默认值是#ff0000ff
endColorstr的默认值是#ff000000
*/
filter: progid:DXImageTransform.Microsoft.gradient(StartColorStr="#f00",EndColorStr="#00f",GradientType=0);

CSS渐变综合练习

1
2
3
4
5
6
7
8
9
10
div {
width: 800px;
height: 500px;
background-color: deepskyblue;
background-size: 100px 100px;
background-image: linear-gradient(45deg, red 25%, transparent 25%),
linear-gradient(-45deg, red 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, red 75%),
linear-gradient(-45deg, transparent 75%, red 75%);
}

CSS3文本与字体

  主流浏览器存在不兼容的问题.

CSS3文本阴影

  • text-shadow
1
2
3
4
5
6
7
text-shadow: h-shadow  v-shadow  blur color;
/*
h-shadow 水平偏移;
v-shadow 垂直偏移;
blur 模糊距离,不能为负值;
color 颜色;
*/
  • text-outline
1
2
3
4
5
6
text-outline:thickness blur color;
/*
text-outline规定文本轮廓
thickness 宽度值
任何主流浏览器都不支持该属性.
*/

CSS3换行

  • word-break属性:自动换行的处理方法
1
word-break: normal|break-all| keep-all;
  • word-wrap属性: 允许长单词或者url地址换行到下一行;
1
word-wrap:normal|break-word;

CSS3新文本属性

  • text-align-last属性:如何对齐文本的最后一行;
1
2
3
4
5
6
7
text-align-last: auto|left|right|center|justify|start|end|initial|inherit;
/*
1.只有IE浏览器支持
2.text-align-last 属性只有在 text-align 属性设置为 "justify" 时才起作用。
3.最后一行在行开头对齐(如果 text-direction 是从左到右,则向左对齐;如果 text-direction 是从右到左,则向右对齐)
4.最后一行在行末尾对齐(如果 text-direction 是从左到右,则向右对齐;如果 text-direction 是从右到左,则向左对齐)
*/
  • text-overflow属性:当文本溢出包含元素时发生的事情
1
2
3
4
5
6
text-overflow: clip|ellipsis|string;
/*
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本,只有火狐浏览器才支持。
*/

CSS3字体

@font-face的语法规则

1
2
3
4
5
6
7
8
9
10
@font-face {
font-family: fontname;/*自定义的字体名称*/
src: url();
/*字体存放路径,可以多个
1.source 字体存放路径,可以多个,推荐使用相对路径
2.format 自定义字体的格式,主要帮助浏览器识别
*/
font-weight: weight;/*字体粗细*/
font-style: style;/*字体类型*/
}

@font-face的字体格式

  • .ttf格式;
  • .otf格式;(不兼容IE浏览器)
  • .woff格式;(web字体最佳格式,不兼容苹果手机)
  • .eot格式(IE专用字体).
  • .svg格式(IE,火狐浏览器不支持)

@font-face的字体引用

  通用模板:

1
2
3
4
5
6
7
8
9
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

CSS3转换

CSS3 Transform

  让一个元素在坐标系中变形,主要包括移动,旋转和缩放元素.

1
transform: none|transform-*;

CSS3 2D转换

CSS3 rotate() 旋转

  通过指定的角度参数对原元素进行2D旋转.

  • rotate 里面跟度数,单位是 deg
  • 角度为正时,顺时针,角度为负时,逆时针
  • 默认旋转的中心点是元素的中心点
1
2
3
4
5
6
transform: rotate(angle);
/*
1.angle旋转角度;
2.正数:顺时针旋转;
3.负数:逆时针旋转.
*/
CSS3 translate()平移

  从给定的参数,从当前元素位置移动.

  • translateX(x): 水平方向移动;
  • translateY(Y): 垂直方向移动;
  • translate(X,Y):水平与垂直方向同时移动;
  • translate 最大的优点就是不影响其他元素的位置;
  • translate 中的100%单位,是相对于本身的宽度和高度来进行计算的;
  • 行内标签没有效果;
CSS3 scale()缩放

 给定的参数,进行缩放,坐标原点在图片中心.

  • scaleX(x): 水平方向缩放;
  • scaleY(Y): 垂直方向缩放;
  • scale(X,Y):水平与垂直方向同时缩放;
  • 不需要单位,scale(一个参数),不变形,等比例缩放.
  • scale 最大的优势:可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子
CSS3 skew()扭曲或斜切

  从给定的角度,指定斜切变换.

  • skewX(角度): 正数,逆时针方向斜切;负数,顺时针方向斜切,以垂直方向为中心轴
  • skewY(角度): 正数,顺时针方向斜切;负数,逆时针方向斜切,以水平方向为中心轴
  • skew(角度,角度):水平与垂直方向同时移动;
    • 取值范围(-90度-90度)
    • 只有一个参数时,另外一个参数
CSS3 2D转换简写属性
  • 同时使用多个转换,其格式为 transform: translate() rotate() scale();
  • 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
  • 但我们同时有位置或者其他属性的时候,要将位移放到最前面

CSS3 3D转换

3D特点
  • 近大远小;
  • 物体与面遮挡看不见
三维坐标系

  联想一下自己房子顶部的左上角.

  • x 轴:水平向右 – 注意:x 轴右边是正值,左边是负值
  • y 轴:垂直向下 – 注意:y 轴下面是正值,上面是负值
  • z 轴:垂直屏幕 – 注意:往外边的是正值,往里面的是负值
总体知识点
  • 3D 位移:translate3d(x, y, z)
  • 3D 旋转:rotate3d(x, y, z)
  • 透视:perspctive
  • 3D呈现 transfrom-style
CSS3 rotate3d();

  3D旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转.

  • transform: rotateX(45deg) – 沿着 x 轴正方向旋转 45 度
  • transform: rotateY(45deg) – 沿着 y 轴正方向旋转 45 度
  • transform: rotateZ(45deg) – 沿着 z 轴正方向旋转 45 度
  • transform: rotate3d(x, y, z, 45deg) – 沿着自定义轴旋转 45 deg
rotateX(angle)

  类似体操单杠运动,在x轴上的旋转角度.

1
2
3
4
5
6
div {
width: 800px;
height: 500px;
background-color: deepskyblue;
transform: rotateX(45deg);
}
rotateY(angle)

  类似拿着一本竖着的书进行转动,在y轴上的旋转角度.

1
2
3
4
5
6
div {
width: 800px;
height: 500px;
background-color: deepskyblue;
transform: rotateY(45deg);
}
rotateZ(angle)

  在z轴上的旋转角度.

rotate3d(x,y,z)
  • transform: rotate3d(x, y, z, deg) – 沿着自定义轴旋转 deg 为角度
  • x, y, z 表示旋转轴的矢量,是标识你是否希望沿着该轴进行旋转,最后一个标识旋转的角度
  • 参数不允许省略.
CSS3 perspective透视
  • 透视也称为视距,所谓的视距就是人的眼睛到屏幕的距离;
  • 距离视觉点越近的在电脑平面成像越大,越远成像越小;
  • 透视的单位是像素;
  • 透视需要写在被视察元素的父盒子上面
perspective-origin
CSS3 translateZ();
  • 指定对象z轴的平移.
  • translateZ 与 perspecitve的区别
  • perspecitve给父级进行设置,translateZ给 子元素进行设置不同的大小;
CSS3 translate3d(x,y,z);

  对指定方向的3d的平移,参数不允许省略

CSS3 scaleZ();

  指定对象的Z轴缩放

CSS3 scale3d(x,y,z);

  对指定对象的3d缩放,参数不允许省略

CSS3 Transform与坐标系统

  • transform-origin属性改变转换元素的位置;
1
2
3
4
5
6
7
8
9
10
11
transform-origin: x,y,z;
/*
默认情况下所有的元素都是以自己的中心点作为参考来旋转的
第一个参数:水平方向
第二个参数:垂直方向
注意点
取值有三种形式
具体像素
百分比
特殊关键字
*/
  • 注意后面的参数 x 和 y 用空格隔开
  • x y 默认旋转的中心点是元素的中心 (50% 50%),等价于 center center
  • 还可以给 x y 设置像素或者方位名词(topbottomleftrightcenter)

CSS3 矩阵

  • matrix(),元素2d平面的移动变换,2d变换矩阵为3*3;
  • matrix3d(),元素3d平面的移动变换,3d变换矩阵为4*4;
  • matrix在火狐浏览器下需要添加单位,webkit内核默认px,translate等方法需要加单位.

CSS3 扩展属性

tansform-style属性
1
nsform-style: flat(默认)|preserve-3d;
backface-visibility属性

  指定元素面向用户时是否可见

1
backface-visibility: visible|hidden;

过渡(CSS3)

  • 过渡(transition):状态过渡的过程,并改变css的属性值.
  • 允许CSS的属性值在一定的时间段内平滑的过渡(用css美化,css值发生变化);

transition-property属性

  • 参与过渡效果的属性(指定相应属性)
  • 一个元素,它的属性从一个值变化到另一个值;
  • 可写可不写.
1
transition-property: none|all|property(元素的属性名称);
transition-duration属性
  • 过渡的持续时间;
1
2
transition-duration: time;
/*单位是秒或者毫秒,默认是0*/
transition-timing-function属性
  • 设置过渡的动画类型;
1
transition-timing-function:ease|linear|ease-in|ease-out|ease-in-out|step-start|steps;
  • linear:线性过渡;
  • ease:平滑过渡;
  • ease-in:由慢到快;
  • ease-out:由快到慢;
  • ease-in-out:由慢到快到慢
  • step-start:等同于steps(1,start);
  • step-end:等同于steps(1,end);
  • steps:步长.
transition-delay属性
  • 设置过渡效果的延迟开始;
1
transition-delay: time;
transition属性简写
1
transition:property duration timing-function delay;

CSS3 动画

  • 视觉暂留原理:看到一个物体或者一幅画,在0.34秒内不会消失;
  • 使元素从一种样式逐渐变化为另一种样式的效果.
  • 手机设备的浏览器在使用css3动画时,要加上webkit前缀.

动画原理

  通过把人物的表情,动作,变化等分解成许多画幅,利用视觉暂留原理在上一幅画没消失之前播放下一幕画,就会给人一种流畅的视觉效果.

CSS3 animation属性

animation-name属性
1
animation-name:none|keyframename(自定义动画名称);
animation-duration属性
  • 设置动画的持续时间,时间为秒和毫秒,默认是0;
  • 动画名称和动画持续时间是必须要的属性;
animation-timing-function属性
  • 设置动画的过渡类型;
animation-delay属性
  • 定义动画开始前的等待时间,以秒或者毫秒,默认值是0;
animation-iteration-count属性
  • 设置动画的循环次数(infinite无限次,默认是1)
animation-direction属性
  • 设置动画在循环中是否反向运动
1
2
3
4
5
animation-direction: normal|reverse|alternate|alternate-reverse;
/*
1.normal:正常方向,
2.reverse:反方向运行.
*/
animation-fill-mode属性
  • 规定动画不播放(包括动画播放完成)时,要用到的元素样式;
1
2
3
4
5
6
7
animation-fill-mode:none|fowards|backwards|both;
/*
none: 默认样式值,不设置动画之外的状态;
fowards:设置动画结束时的样式;
backwards:设置动画开始时的样式
both:设置动画结束或者开始的状态.
*/
animation-play-state属性
  • 动画是否在运行或已暂停.
1
2
3
4
5
6
animation-play-state:paused|running;
/*
1.paused暂停动画播放
2.running默认值,动画播放

*/
animation属性简写
1
2
/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode
  • 简写属性里面不包含 animation-paly-state
  • 暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
  • 要想动画走回来,而不是直接调回来:animation-direction: alternate
  • 盒子动画结束后,停在结束位置:animation-fill-mode: forwards

CSS3 @keyframes

keyframes定义

  关键帧,可以指定任何顺序排列来决定animation动画变化的关键位置.

keyframes使用
1
2
3
4
5
6
7
8
9
10
11
12
 @keyframes animationname {
keyframes-selector{
css-styles;
}
}
/*
1.animationname 动画名称(必须写);
2.keyframes-selector,(必须写),动画吃醋事件的百分比.
2.1 0-100%;
2.2 from(0%)...to(100%)
3.css-style ,必须写,一个或多个css样式
*/

CSS3 will-change

  CSS中的属性通过让浏览器知道即将操作哪些属性和元素来优化动画,从而有可能提高该特定操作的性能。

1
2
3
4
5
6
7
8
will-change:auto|scroll-position|contents|<custom-ident>|<animation-feature>;
/*
auto: 适用于它通常所做的任何启发式和优化
scroll-position:表示将要改变元素的滚动位置.
contents:表示将要改变元素的内容
<custom-ident>明确指定将要改变的属性与给定的名称;推荐使用这个属性值.
<animation-feature>:动画的一些特征值.
*/
  • 不要滥用使用will-change属性,实际上可能导致页面性能下降.
  • 提前声明;
  • remove.
增强页面渲染性能
CPU和GPU
  • cpu(中央处理器),计算机的大脑;
  • GPU(图形处理器),专门处理和绘制图形相关的硬件.
硬件加速
  • 专业化,减轻CPU的工作量.

网站

网站ico图标

制作ico图标

  • 首先把我们想要的切成图片。
  • 要把图片转换为 ico 图标,我们借助于第三方转换网站: http://www.bitbug.net/.

使用ico图标

  • 首先把favicon.ico 这个图标放到根目录下。
  • 再html里面, head 之间 引入 代码。
1
<link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>

网站优化三大标签

SEO介绍

  • SEO是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”;

  • 常见的搜索引擎,比如百度,谷歌,雅虎,搜狗等等;

  • SEO是指通过对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化等)和站外优化,从而提高网站的关键词排名以及公司产品的曝光度.

三大标签

title网页标题

  搜索引擎了解网页的入口,和对网页主题归属的最佳判断点。

  • 标题的长度
1
2
谷歌(70kb),35个中文
百度(56kb),28个中文
  • 关键字分布
1
最先出现的词语权越重
  • 关键字词频
1
2
主关键字出现3此;
辅助关键词出现一次
Description网站说明

  简要说明我们网站的主要做什么的。

  • 描述中出现关键词,与正文内容相关,这部分内容是给人看的,所以要写的很详细,让人感兴趣, 吸引用户点击。
  • 字符数含空格在内不要超过 120 个汉字。
  • 补充在 title 和 keywords 中未能充分表述的说明.
  • 用英文逗号 关键词1,关键词2.
Keywords 关键字

  Keywords应该限制在6~8个关键词左右,电商类网站可以多 少许。

字体图标i(confont)

图片缺点

  • 图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的”http请求”,这都会大大降低网页的性能;
  • 图片不能很好的进行“缩放”,因为图片放大和缩小会失真;

字体图标优点

  本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果等等

  • 可以做出本身图片很多的效果;
  • 体积较小;
  • 浏览器兼容性强;
  • 移动端支持度高.

字体图标库

字体图标的使用

  • 下载字体图标库到本地;
  • 把字体文件包引入HTML页面中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*
1.在样式里面声明字体,自定义的字体(注意字体的相对路径)
*/
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;

/*结合标签使用字体,字体使用单引号*/
span {
font-family: "icomoon";
}

常见字体格式

  • TureType(.ttf)格式;
    • .ttf字体是Windows和Mac的最常见的字体,是一种RAW格式
  • OpenType(.otf)格式
    • .otf字体被认为是一种原始的字体格式
  • Web Open Font Format(.woff)格式
    • woff字体是Web字体中最佳格式
  • Embedded Open Type(.eot)格式
    • .eot字体是IE专用字体,
  • SVG(.svg)格式
    • 支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+
字体生成工具

  https://www.fontsquirrel.com/tools/webfont-generator

  可以在线生成 eot 、woff、ttf、svg 格式的字体.

@font-face
  • 指定一个用于显示文本的自定义字体,@font-face 可以消除对用户电脑字体的依赖.
  • @font-face 规则不仅仅使用在CSS的顶层,还可以用在任何CSS条件组规则中.
常用免费字体网站

  推荐几个常用的字体下载王章:

网站logo优化
  • 先放一个 h1 标签(目的提权,告诉浏览器很重要);
  • h1里面在放一个连接,给链接一个 大小 和 logo 的背景图片;
  • 连接 里面要放文字(网站名字)为了搜索引擎收录我们,但是文字不要显示出来.
    • 要用 text-indent 移到盒子外面 text-indent: -9999px然后overflow:hidden 淘宝的做法;
    • 直接给font-size: 0; 就看不到文字了,京东的做法。
    • 最后给 连接一个 title 这样鼠标放到logo上,就可以看到提示文字了.
点击查看
-------------------本文结束 感谢您的阅读-------------------
0%