什么是元素的显示模式
网页中的标签很多，在不同的地方使用不同类型的标签。
元素显示模式就是标签以什么方式进行显示。如：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. #2069：Coin Change（完全背包）

    Problem Description Suppose there are 5 types of coins: 50-cent, 25-cent, 10-cent, 5-cent, and 1-cen ...

  2. Educational Round 95 (Div. 2) A - B题题解（A题数据连错3次，搞人心态中）

    1418A. Buying Torches 这次A题,真心fo了(导致wa了我两次) 样例出错两次,数据出错一次. 讲一下我的思路吧. 首先先明确至少需要多少个棍.\(k\) 个火炬,至少需要$k ∗ ...

  3. 5分钟教会你如何在生产环境debug代码

    前言 有时出现的线上bug在测试环境死活都不能复现,靠review代码猜测bug出现的原因,然后盲改代码直接在线上测试明显不靠谱.这时我们就需要在生产环境中debug代码,快速找到bug的原因,然后将 ...

  4. CoinBase是什么？

    什么是CoinBase交易? 比特币区块链上的每个区块中都会包含一个或者多个交易(transaction),其中第一个交易就叫做CoinBase交易. 什么是CoinBase交易? CoinBase交 ...

  5. Jackson 使用 @JsonFormat 注解进行时间格式化

    本文为博主原创,未经允许不得转载: 最近帮同事定位了一个现网问题,记录一下: 项目中对所有请求的参数都进行了 Jackson 序列化,在接收请求的实体类字段上使用 @JsonFormat 注解,该注解 ...

  6. 12-异步FIFO

    1.异步FIFO的应用 跨时钟域 批量数据 传输效率高 2.异步FIFO结构 FIFO深度 - 双端口RAM设计 3.异步FIFO深度计算 4.异步FIFO读写地址的编码 5.异步FIFO读写时钟域的 ...

  7. 【转】国产飞腾D2000：基于A72？

    https://zhuanlan.zhihu.com/p/612054128 China's Phytium D2000: Building on A72? 国产飞腾D2000:基于A72? PS:麒 ...

  8. [转帖]（1.2）sql server for linux 开启代理服务（SQL AGENT），使用T-SQL新建作业

    https://www.cnblogs.com/gered/p/12518090.html 回到顶部 [1]启用SQL Server代理 sudo /opt/mssql/bin/mssql-conf ...

  9. [转帖]043、TiDB特性_缓存表和分区表

    针对于优化器在索引存在时依然使⽤全表扫描的情况下,使⽤缓存表和分区表是提升查询性能的有效⼿段. 缓存表 缓存表是将表的内容完全缓存到 TiDB Server 的内存中 表的数据量不⼤,⼏乎不更改 读取 ...

  10. [转帖]tidb之旅——tidb架构选择

    https://zhuanlan.zhihu.com/p/641650168 前言 从4月份开始利用tidb改造了我们公司bi系统.这个过程中,我感觉到了tidb的强大.也打算记录一下整个改造过程.我 ...