CSS的元素显示模式_资讯

,

，

等，其中
标签是最典型的块元素。

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

注意：

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

标签主要用于存放文字，因此
里面不能放块级元素特别是不能放
-
等都是文字类块级标签，里面不能放其他块级元素

行内元素：

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

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

举例：

我是行内元素1我是行内元素2我是行内元素3

显示：

注意：

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

行块内元素：

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

行内块元素的特点：

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

举例：

我是行内块元素1我是行内块元素2我是行内块元素3

显示：

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

CSS的元素显示模式总结：

元素显示模式转换：

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

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

转化方法：

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

举例：

java我是Java web我是wen c语言我是C语言

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

添加：

display: inline;

显示：

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

添加：

display:inline-block;

显示：

get一个实用小工具：

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

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

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

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

实现单行文字垂直居中：

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

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

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

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

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

我是Java

显示：

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

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

显示：

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

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

显示：

CSS的背景：

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

背景颜色：

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

background-color:颜色值;

举例：

我是Java

显示：

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

背景图片：

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

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

举例：

我是Java

显示：

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的背景总结：
上一篇：丁彦雨航被喊mvp（丁彦雨航拿mvp）丁彦雨航被喊mvp 涓佸溅闆ㄨ埅琚枈mvp鏁版嵁

下一篇：【PlasticSCM Could Edition】新版本云托管浅试 (与踩一些坑)

相关内容

块级元素的特点：

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

行内元素：

行内元素的特点：

行块内元素：

行内块元素的特点：

CSS的元素显示模式总结：

元素显示模式转换：

get一个实用小工具：

实现单行文字垂直居中：

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

CSS的背景：

背景颜色：

背景图片：

背景平铺：

背景位置：

参数是精准单位：

参数是方位名词：

参数是混合单位：

背景图像的固定：

背景图片复合写法：

背景半透明色：

CSS的背景总结：

相关内容

CSS的元素显示模式

元素显示模式是什么？：

块元素：

热门资讯

CSS的元素显示模式

元素显示模式是什么？：

块元素：

---,,

,,

块级元素的特点：

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

行内元素：

行内元素的特点：

行块内元素：

行内块元素的特点：

CSS的元素显示模式总结：

元素显示模式转换：

get一个实用小工具：

实现单行文字垂直居中：

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

CSS的背景：

背景颜色：

背景图片：

背景平铺：

背景位置：

参数是精准单位：

参数是方位名词：

参数是混合单位：

背景图像的固定：

背景图片复合写法：

背景半透明色：

CSS的背景总结：

相关内容

热门资讯