CSS的元素显示模式

,

，

等，其中

标签是最典型的块元素。

块级元素的特点：

1：独占一行
2：高度，宽度，外边距以及内边距都可以控制
3：宽度默认是容器（父级宽度）的100%
4：是一个容器及盒子，里面可以放很多行内或者块级元素
1
2
3
4

举例：

<head>
    <style>
        div {
            width: 500px;
        }
    style>
head>

<body>
    <div><img src="教学楼.jpg"/>div>
    <div><img src="餐厅.jpg"/>div>
    <div><img src="图书馆.jpg"/>div>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13

显示：

在这里插入图片描述
注意：

文字类的元素不能使用块级元素

标签主要用于存放文字，因此

里面不能放块级元素特别是不能放

-

等都是文字类块级标签，里面不能放其他块级元素

行内元素：

常见的行内元素有,,,,,,,,~~等，其中标签是典型的行内元素，有的地方也将行内元素称为内联元素。~~

行内元素的特点：

1：相邻行内元素在一行上，一行可以显示多个。 2：高，宽直接设置是无效的 3：默认宽度就是它本身内容的宽度 4：行内元素只能容纳文本或者其他行内元素。
1
2
3
4

举例：

<head> <style> .span1{ width: 200px; height: 200px; } style> head> <body> <span class="span1">我是行内元素1span> <span>我是行内元素2span> <span>我是行内元素3span> body>
1
2
3
4
5
6
7
8
9
10
11
12
13

显示：

注意：

链接里面不能再放链接

特殊情况链接里面可以放块元素，但是给里面可以放块级元素，但是给转换一下块级模式会更安全。

行块内元素：

在行内元素中有几个特殊的标签------,,,它们同时具有块元素和行内元素的特点。

行内块元素的特点：

1：和相邻行内元素(行内块)在一行上但是它们之间会有空白缝隙，一行可以显示多个(行内元素特点) 2:默认宽度就是它们本身内容的宽度(行内元素特点) 3:高度，行高，外边距以及内边距都可以控制（块级元素的特点）。
1
2
3
4
5

举例：

<head> <style> .span1{ width: 200px; height: 200px; } style> head> <body> 我是行内块元素1<input class="span1">input> <td>我是行内块元素2td> 我是行内块元素3<input>input> body>
1
2
3
4
5
6
7
8
9
10
11
12
13

显示：

通过两种显示，我们不难发现，我们在head中设置的样式对于行内元素来说是毫无意义的，但是它却能很好的改变行内块元素的高度等信息。

CSS的元素显示模式总结：

元素显示模式转换：

特殊情况下，我们需要元素模式的转换---->一个模式的元素需要另一个模式的特性。

比如：想要增加的触发范围。

转化方法：

转换为块元素:display:block; 转换为行内元素:display:inline; 转换为行内块元素:display:inline-block;
1
2
3

举例：

<head> <style> div{ width: 300px; height: 100px; background-color:aquamarine; } style> head> <body> <div><a href="#">javaa>我是Javadiv> <div><a href="#">weba>我是wendiv> <div><a href="#">c语言a>我是C语言div> body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

显示：
通过上面的学习我们知道

是一个块级元素，它单独占据一行，当我们想将如上所示的三个超链接显示在同一行上，就可以使用模式转换：

添加：

display: inline;
1

显示：

注：我们在style中设置的宽度和高度并不会在行内元素中体现出来，行内元素的高度和宽度与它内容有关。

添加：

display:inline-block;
1

显示：

get一个实用小工具：

snipaste:可将一个界面上的内容通过截图的方式，贴到电脑屏幕上，这样就不需要来回的切换界面啦

使用方法：
使用完成后直接关闭即可！

或者还可以使用快捷方式：

F1可以截图，同时测量大小，设置箭头，书写文字等 F3在桌面置顶显示点击图片，alt可以取色(按下shift可以切换取色模式) 按下esc取消图片显示
1
2
3
4
5
6
7

实现单行文字垂直居中：

CSS并未提供可使文字垂直居中的代码，这里我们可以使用一个小tips来实现：

具体方法即为：使文字的行高等于盒子的高度 便可以让文字在当前盒子内垂直居中

单行文字垂直居中的原理：

line-height用来设置行高：
文字与盒子的关系：

行高=盒子的高度：文字居中

<head> <style> div{ height: 40px; background-color:aquamarine; line-height: 40px; } style> head> <body> <div>我是Javadiv> body>
1
2
3
4
5
6
7
8
9
10
11
12

显示：

行高<盒子的高度：文字偏上

div{ height: 40px; background-color:aquamarine; line-height: 10px; }
1
2
3
4
5

显示：

行高>盒子的高度：文字偏下

div{ height: 40px; background-color:aquamarine; line-height: 60px; }
1
2
3
4
5

显示：

CSS的背景：

背景属性可以设置颜色，背景图片，背景平铺，背景图片位置，背景图像固定等。

背景颜色：

background-color属性定义了元素的背景颜色。

background-color:颜色值;
1

举例：

<head> <style> div{ height: 300px; background-color:antiquewhite; } style> head> <body> <div><font color="red">我是Javafont>div> body>
1
2
3
4
5
6
7
8
9
10
11

显示：

一般情况下，元素背景颜色默认值是transparent(透明),我们也可以手动指定背景颜色为透明色。

背景图片：

background-image属性描述了元素的背景图像，实际开发常用于logo的设计或者是一些小图标之类的，优点是非常方便控制位置。

//none表示无背景图 //url---->使用绝对或相对地址指定背景图片 background-image:none|url(url)
1
2
3

举例：

<head> <style> div{ height: 300px; background-image: url(图书馆.jpg); } style> head> <body> <div><font color="red">我是Javafont>div> body>
1
2
3
4
5
6
7
8
9
10
11

显示：

background-repeat: repeat;//平铺效果如上所示（默认效果）----在纵轴和横轴向上平铺
1

背景平铺：

background-repeat用来设置背景图片是否需要平铺，默认是平铺的。

background-repeat: no-repeat;//不平铺效果如下所示
1

background-repeat: repeat-x;//沿x轴平铺
1

background-repeat: repeat-y;//沿y轴平铺
1

页面元素既可以添加背景颜色也可以添加背景图片，但是同时添加这两个属性，背景图片会将背景颜色覆盖。

背景位置：

通过background-position属性对其进行设置！

background-position: 方位名词;
1

举例：

background-position: right top;//显示在页面的右上角 background-position: left top;//显示在页面的左上角
1
2

注:如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top 和top left 效果一致，但是如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

参数是精准单位：

举例：

background-position: 500px 500px;//指定x坐标和y坐标
1

background-position: 500px;//指定x坐标，y坐标上垂直居中
1

参数是方位名词：

background-position: top;//第一个参数确定-->top y轴顶部对齐，第二个参数省略 x轴是水平居中显示的
1

显示如下：

background-position: right;//水平一定是靠右侧对齐，第二个参数省略-->y轴是垂直居中对齐的
1

显示如下：

参数是混合单位：

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

background-position: 500px top;
1

背景图像的固定：

background-attachment：用来设置背景图像是否固定或者随着页面的其余部分滚动，它常用于制作时差滚动效果

background-attachment：scroll | fixed //scroll：背景图像随对象内容进行滚动 //fixed：背景图像固定
1
2
3

背景图片复合写法：

为了简化背景属性的代码，我们可以将有关background的属性写在同一个background中：

例如：

background:背景颜色背景图片地址背景平铺背景图像滚动背景图片位置 background：transparent url(img.jpg) repeat-y fixed top;
1
2

背景半透明色：

background：rgba(0,0,0,0.3);
1

最后一个参数为alpha透明度，其取值范围在0-1之间，0.3也可以直接写成.3

注意：背景半透明是指将对应的背景半透明化，其中的内容并不会受到任何影响

效果举例：

CSS的背景总结：

块级元素的特点：

等都是文字类块级标签，里面不能放其他块级元素

行内元素：

行内元素的特点：

行块内元素：

行内块元素的特点：