什么是元素的显示模式
网页中的标签很多，在不同的地方使用不同类型的标签。
元素显示模式就是标签以什么方式进行显示。如：div自己占一行，span一行可以放多个。
HTML元素一般分为块元素和行内元素两种类型。
 
块元素
常见的块元素有：
<h1>~<h5>, <p>, <div>, <ul>, <ol>, <li>

其中div是最典型的块元素。

块元素的特点：
1.比较霸道，独占一行
2.宽度，高度，内边距，外边距都可以设置。
3.宽度默认是容器（父级容器）的100%
4.一个容器及盒子，里面可以放行内或块级元素。
注意：
1.文字类的元素内不能使用块级元素。p标签主要用于存放文字，因此p里面不能放块级元素，比如div
2.同理h1-h5等都是文字类元素，里面不能放其他块级元素。
 
行内元素
常见的行内元素有
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
其中span标签是最经典的行内元素。
行内元素的特点：
1.相邻行内元素在一行上，一行可以显示多个。
2.宽，高设置无效。
3.默认宽度是它内容本身的宽度。
4.行内元素只能容纳文本及其他行内元素。
注意：
1.链接里面不能再放链接
2.a标签里面可以放块级元素。
 
行内块元素
在行内元素中有几个特殊的标签:
<img/>、<input/>、<td>
它们既又行内元素的特点，又有块元素的特点。也被称为行内块元素。
行内块元素的特点：
1.多个行内块元素可以放置在一行，它们之间用空格分隔，一行可以显示多个（行内元素特点）。
2.默认宽度是它内容本身的宽度（行内元素特点）。
3.宽度，高度，内边距，外边距都可以设置（块元素特点）。
 
元素显示模式转换
特殊情况下我们需要元素的模式转换，简单理解是一个模式的元素想要另一个模式元素的特性。
比如：想要增加a的触发范围。
显示模式转换声明：
display: block;

display: inline;

display: inline-block; 
<style>

    /* 行内转块级 */

    span {

      width: 200px;

      height: 60px;

      display: block;

      background-color: antiquewhite;

    }

    /* 块级转行内 */

    div {

      background-color: lightblue;

      display: inline;

    }

    /* 行内转行内块级元素 */

    strong {

      background-color: aquamarine;

      display: inline-block;

      width: 200px;

      height: 60px;

    }

  </style>

  <body>

  <span>我是行内内容1</span><span>我是行内内容2</span>

  <div>我是块级标签内容1</div>

  <div>我是块级标签内容2</div>

  <strong>我是行内内容3</strong><strong>我是行内内容4</strong>

</body>
CSS字体设置
设置字体：字体系列，大小，粗细，文字样式（如斜体）
 /* 设置字体：字体系列，大小，粗细，文字样式（如斜体） */

        h2 {

            /* 字体带空格则使用引号包起来，字体可以设置多个，按照使用优先级从左到右排列，如果都匹配不到则使用浏览器默认字体。 */

            font-family: 'Macrosoft YaHei', 'Times New Roman', Times, serif;

            font-size: 20px;

            /* 文字加粗：font-weight:normal 和 bold 分别对应 400和700 */

            /* font-weight: normal; */

            font-weight: 400;

            /* font-style: italic 字体设置斜体的不多，更多的是把斜体设置成标准字体，如（em, i） */

            font-style: normal;

            /* font复合属性，简写节省代码，顺序不能随意改变，其中字号，字体必须同时出现 */

            /* font: font-style font-weight font-size/line-height font-family; */

        }

CSS文本属性

文本属性是用来定义文本的外观的，比如文本的颜色，对齐文本，装饰文本，文本缩进，行间距等。
        /* 文本设置可以定义文本的外观，如文本的颜色，对齐文本，装饰文本，文本缩进，行间距 */

        .article {

            /* 颜色设置有3种，red,green等名词。 十六进制#FF6600。 RGB代码rgb(155,2,2)/rgb(100%,1%,1%) */

            color: red;

            /* 文本的水平偏移，默认p标签占据一行，这里的偏移指的是内容的偏移 */
　　　　　　　// text-align: left（左对齐）; justify（两端对齐）;

            text-align: center;

            /* 文字装饰器，在文字的上面，下面，中级划线, 无下划线(a标签)，对应overline, underline, line-through, none */

            text-decoration: line-through;

            /* 首行缩进， 通常使用2em 代替 20px, em表示一个文字大小的距离 */

            text-indent: 20px;

            /* 行间距由一行的上间距+文本高度+下间距组成 */

            line-height: 26px;

        }

单行文本垂直居中的方法
行高 = 盒子高度
  <style>

    a {

      display: block;

      width: 180px;

      background-color: dimgray;

      text-decoration: none;

      color: #fff;

      text-indent: 2em;

      /* 行高 = 盒子高度 */

      height: 50px;

      line-height: 50px;

    }

    a:hover {

      background-color: brown;

    }

  </style>

文本超出2行，超出部分省略

.title {

	font-size: 40rpx;

	font-weight: 700;

	// 文本超出2行，超出部分省略

	word-break: break-all;

	text-overflow: ellipsis;

	display: -webkit-box;

	-webkit-box-orient: vertical;

	-webkit-line-clamp: 2; /* 这里是超出几行省略 */

	overflow: hidden;

}

标签阴影

盒子阴影设置

	/*

		box-shadow: h-shadow v-shadow blur spread color inset;

	    X轴与Y轴设为正值（正值 X轴向右 Y轴向下）

		h-shadow：必需设置的值，定义水平阴影的位置。允许负值。

		v-shadow：必需设置的值，定义垂直阴影的位置。允许负值。

		blur：可选设置的值，定义模糊距离。

		spread：可选设置的值，定义阴影的尺寸。

		color ：可选设置的值，定义阴影的颜色。如果没有设置值，颜色值基于浏览器显示，建议设置。

		inset：可选设置的值，

	*/

	// box-shadow: 4px 4px 5px 3px red;

文本阴影设置

	/*

		text-shadow: h-shadow v-shadow blur spread color 

		X轴与Y轴设为正值（正值 X轴向右 Y轴向下）

		- 第一个属性值表示水平方向

		- 第二个属性值表示垂直方向

		- 第三个属性值表示模糊程度

		- 第四个属性值表示颜色

	*/

// 	text-shadow: 0 0 1px blue;

标签边框

标签边框设置

	/*

		border 属性是 border-width、border-style、border-color 三种属性的简写，

		使用 border 属性可以同时定义上述三个属性

		border-bottom：统一设置下边框的宽度、样式、颜色；

		border: 四个边框都设置

	*/

 	border-bottom: 2px solid red;

盒子模型样式

<template>

	<view class="container">

		<view class="box" v-for="(item,index) in 5" :key="index">

			<image src="../../static/logo.png" mode="aspectFit"></image>

			<view class="close">X</view>

		</view>

		<view class="box add">

			+

		</view>

	</view>

</template>

<style lang="scss" scoped>

.container {

	display: flex;

	// 超过一行换行显示

	flex-wrap: wrap;

	.box {

		// [自己]样式设置

		width: 190rpx;

		height: 190rpx;

		background-color: lightgray;

		margin: 1rpx;

		// [自己]文档流方式（默认相对，绝对：会脱离文档流独立定位）

		position: relative;

		// [孩子]布局方式设置

		display: flex;

		align-items: center;

		justify-content: center;

		.close {

			// [自己]样式设置

			width: 40rpx;

			height: 40rpx;

			background-color: lightblue;

			// [自己]文档流方式（默认相对，绝对：会脱离文档流独立定位）

			position: absolute;

			top: 0;

			right: 0;

			// [孩子]布局方式设置

			display: flex;

			justify-content: center;

			align-items: center;

		}

		// 显示图片内容不能超过父容器边界

		image {

			max-width: 100%;

			max-height: 100%;

		}

	}

	.add {

		font-size: 50rpx;

		color: white;

		border-radius: 10rpx;

	}

}

</style>

对应图片内容不能超过父容器边界问题，可以通过设置image的max-width和max-height来解决

// 显示图片内容不能超过父容器边界

image {

	max-width: 100%;

	max-height: 100%;

}

CSS文本，字体设置与元素边框，阴影，显示模式的更多相关文章

  1. CSS 文本字体颜色设置方法(CSS color)

    CSS 文本字体颜色设置方法(CSS color) 一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网 ...

  2. CSS文本简单设置

    文本的设置直接影响到用户对界面的感受,好的文本设置能够让用户对界面有一种赏心悦目的感受,在这地方我们来简单的说说说对文本设置的时候,有哪些格式. 文本设置的时候我们应该注意什么: 平时我们文本设置的时 ...

  3. CSS中如何设置父元素透明度不影响子元素透明度

    原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看. 可以使用一张透明的图片做背景可以达成效果 ...

  4. css 文本省略号设置

    本文推荐2种方法. 1. css tip:只兼容chrome内核的浏览器.ff不支持. .box { overflow: hidden; /* 溢出时不显示溢出的内容 */ text-overflow ...

  5. css之字体设置

    字体大小font-size 字体风格font-style 字体加粗font-weight 字体类型font-family 字体阴影text-shadow 字体行高line-height 字间距lett ...

  6. 04CSS文本字体及排版

    CSS文本字体 字体——font-family font-family:字体1,字体2,字体3,……:应用font-family属性可以一次定义多个字体,而在浏览器读取字体时, 会按照定义的先后顺序来 ...

  7. IDEA 快捷键和字体设置

    IDEA的使用 一.IDEA 目录 IDEA的使用 一.IDEA 设置字体 文本字体设置 窗口字体设置 二.IDEA建立项目 三.IDEA快捷键 设置字体 点击File->Settings 文本 ...

  8. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  9. css（字体，文本，边距，边框，阴影，背景，渐变，多重背景，列表）

    font-family 设置字体名称 可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size ...

  10. CSS之背景设置、字体设置、文本设置

    <html> <head> <meta charset="utf-8"> <title>单行文本框与多行文本框</title& ...

随机推荐

  1. 勇者游戏（巴什博弈）- HDU 1846

    博弈算法中比较经典的一个博弈问题是巴什博奕,巴什博弈是这样的: 有一堆物品,数量为n,两个人轮流取,规定每次最多取m个,最少取1个. 我们定义先取者为F(first),后取者为S(second) 网上 ...

  2. 数字孪生 3D 风电场，智慧风电之海上风电

    前言 截止 2021 年,全球已有 127 个国家做出了"碳中和"的承诺,能源低碳转型和实现碳中和已经成为全球共同的战略目标.根据权威机构预测,到 2050 年,可再生能源发电将占 ...

  3. Nginx(2)---搭建一个静态web服务

    1.配置文件语法及参数说明:nginx.conf worker_processes 1; #工作进程多少个 events { worker_connections 1024; #连接数 } http ...

  4. WebGPU光追引擎基础课：使用WebGPU绘制三角形

    大家好~我开设了"WebGPU光追引擎基础课"的线上课程,从0开始,在课上带领大家现场写代码,使用WebGPU开发基础的光线追踪引擎 课程重点在于基于GPU并行计算,实现BVH构建 ...

  5. Git Clone一个GitHub仓库时，发生报错

    1.问题 1.使用HTTP方式:Git: fatal: unable to access ' https://github. com/Light-City/CPlusPlusThings. git/' ...

  6. [kubernetes]服务健康检查

    前言 进程在运行,但是不代表应用是正常的,对此pod提供的探针可用来检测容器内的应用是否正常.k8s对pod的健康状态可以通过三类探针来检查:LivenessProbe.ReadinessProbe和 ...

  7. 【C++】类大小

    [来源]C++类大小详尽讲解 [来源]空类(empty class)

  8. 百度网盘(百度云)SVIP超级会员共享账号每日更新（2023.12.21）

    一.百度网盘SVIP超级会员共享账号 可能很多人不懂这个共享账号是什么意思,小编在这里给大家做一下解答. 我们多知道百度网盘很大的用处就是类似U盘,不同的人把文件上传到百度网盘,别人可以直接下载,避免 ...

  9. [转帖]故障分析 | 让top命令直接显示Java线程名？-- 解析OpenJDK的一个bug修复

    https://zhuanlan.zhihu.com/p/413136873 作者:阎虎青DBLE 开源项目负责人,负责分布式数据库中间件研发工作:持续专注于数据库方面的技术,始终在一线从事开发:对数 ...

  10. [转帖]【我和CloudQuery 的故事】安装部署CloudQuery 初体验—-前篇

    https://www.modb.pro/db/1694256553947910144 一.前言 在日常数据库运维中,为连接多种数据库,经常要安装不同的客户端,非常繁琐,且占用大量存储空间.如果能有一 ...