CSS的元素显示模式

元素显示模式是什么？：

由于网页中的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。

元素显示模式就是元素(标签)以什么方式进行显示，比如<div>独占一行，比如一行可以放多个<span>标签

html元素一般就分为块元素和行内元素两种类型

块元素：

常见的块元素有<h1>---<h6>,<p>,<div>,<ul>,<ol>，<li>等，其中<div>标签是最典型的块元素。

块级元素的特点：

1：独占一行
2：高度，宽度，外边距以及内边距都可以控制
3：宽度默认是容器（父级宽度）的100%
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>

显示：

注意：

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

<p>标签主要用于存放文字，因此<p>里面不能放块级元素特别是不能放

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

行内元素：

常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s><ins>,<u>,<span>等，其中<span>标签是典型的行内元素，有的地方也将行内元素称为内联元素。

行内元素的特点：

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

举例：

<head>
    <style>
        .span1{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <span class="span1">我是行内元素1</span>
    <span>我是行内元素2</span>
    <span>我是行内元素3</span>
</body>

显示：

注意：

链接里面不能再放链接

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

行块内元素：

在行内元素中有几个特殊的标签——<img/>,<input/>,<td>,它们同时具有块元素和行内元素的特点。

行内块元素的特点：

1：和相邻行内元素(行内块)在一行上但是它们之间会有空白缝隙，一行可以显示多个(行内元素特点)

2:默认宽度就是它们本身内容的宽度(行内元素特点)

3:高度，行高，外边距以及内边距都可以控制（块级元素的特点）。

举例：

<head>
    <style>
        .span1{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    我是行内块元素1<input class="span1"></input>
    <td>我是行内块元素2</td>
    我是行内块元素3<input></input>
</body>

显示：

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

CSS的元素显示模式总结：

元素显示模式转换：

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

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

转化方法：

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

举例：

<head>
    <style>
        div{
            width: 300px;
            height: 100px;
            background-color:aquamarine;
        }
        
    </style>
</head>
<body>
    <div><a href="#">java</a>我是Java</div>
    <div><a href="#">web</a>我是wen</div>
    <div><a href="#">c语言</a>我是C语言</div>
</body>

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

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

添加：

 display: inline;

显示：

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

添加：

display:inline-block;

显示：

get一个实用小工具：

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

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

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

F1可以截图，同时测量大小，设置箭头，书写文字等

F3在桌面置顶显示

点击图片，alt可以取色(按下shift可以切换取色模式)

按下esc取消图片显示

实现单行文字垂直居中：

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

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

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

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

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

<head>
    <style>
        div{
            height: 40px;
            background-color:aquamarine;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div>我是Java</div>
</body>

显示：

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

div{
            height: 40px;
            background-color:aquamarine;
            line-height: 10px;
        }

显示：

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

div{
            height: 40px;
            background-color:aquamarine;
            line-height: 60px;
        }

显示：

CSS的背景：

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

背景颜色：

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

background-color:颜色值;

举例：

<head>
    <style>
        div{
            height: 300px;
            background-color:antiquewhite;
        }
    </style>
</head>
<body>
    <div><font color="red">我是Java</font></div>
</body>

显示：

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

背景图片：

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

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

举例：

<head>
    <style>
        div{
            height: 300px;
            background-image: url(图书馆.jpg);
        }
    </style>
</head>
<body>
    <div><font color="red">我是Java</font></div>
</body>

显示：

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

背景平铺：

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

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

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

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

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

背景位置：

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

background-position: 方位名词;

举例：

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

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

参数是精准单位：

举例：

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

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

参数是方位名词：

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

显示如下：

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

显示如下：

参数是混合单位：

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

background-position: 500px top;

背景图像的固定：

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

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

背景图片复合写法：

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

例如：

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

背景半透明色：

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

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

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

效果举例：

CSS的背景总结：

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/81415.html