CSS 的三种元素显示模式
1 什么是元素显示模式
  网页中的 HTML 标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。其中元素显示模式就是元素(标签)以什么方式进行显示，比如
自己占一行，比如一行可以放多个等。
  HTML 元素一般分为块元素和行内元素两种类型。有的资料也有行内块元素的说法。
2 块元素
  常见的块元素有
~
、、
、、、等，其中 
 标签是最典型的块元素。
块级元素的特点
1.比较霸道，自己独占一行。
2.高度，宽度、外边距以及内边距都可以控制。
3.宽度默认是容器(父级宽度)的100%。
4.是一个容器及盒子，里面可以放行内元素或者块级元素。
注意
1.文字内的元素不能使用块级元素了
2.
 标签主要用于存放文字，因此 
 里面不能再放块级元素，特别是不能再放 

3.同理， 
~
 等都是文字类块级标签，里面也不能放其他块级元素
  从上面的示例可以看到当把块级元素 
 放到文字内的元素 
 中时，浏览器解析时会把它单独拿出来，同时设置的样式也不能生效。
3 行内元素
  常见的行内元素有 (链接) 、(加粗文本) 、(加粗文本) 、(斜体文本) 、(斜体文本) 、(删除线) 、(删除线) 、(下划线) 、(下划线) 、(盒子) 等，其中  标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点
1.相邻行内元素在一行上，一行可以显示多个。
2.高、宽直接设置是无效的。
3.默认宽度就是它本身内容的宽度。
4.行内元素只能容纳文本或其他行内元素。
注意
1.链接里面不能再放链接
2.特殊情况链接  里面可以放块级元素，但是给  转换一下块级模式最安全。在下一部分演示。
4 行内块元素
  在行内元素中有几个特殊的标签例如  、 、
 ，它们同时具有块元素和行内元素的特点。称它们为行内块元素。
行内块元素特点
1.和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
2.默认宽度就是它本身内容的宽度(行内元素特点)。
3.高度，行高、外边距以及内边距都可以控制(块级元素特点)。
5 元素显示模式总结
元素模式
元素排列
设置样式
默认宽度
包含
块级元素
一行只能一个
可以设置宽高
父级容器的100%
可包含任何标签
行内元素
一行可以多个
不能设置宽高
本身内容的宽度
可包含文本和行内元素
行内块元素
一行可以多个
可以设置宽高
本身内容的宽度
-
6 元素显示模式转换
  特殊情况下，我们需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性。比如想要增加链接  的触发范围。
语法
· 转换为块元素：display: block;
· 转换为行内元素：display: inline;
· 转换为行内块元素：display: inline-block;
7 单行文字居中显示
  在CSS基础知识(1)中讲到过文字的水平居中可以用 text-align: center; 来实现，那么要想让文字垂直也居中我们怎么实现呢？这里先了解文字行高的概念。
   解决方案: 让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中。简单理解: 行高的上空隙和下空隙把文字挤到中间了。如果行高小于盒子高度，文字会偏上，如果行高大于盒子高度，则文字偏下。
  文字的行高在CSS基础知识(1)中文本属性部分内容也有讲到，用 line-height: 26px;后面的属性值设置为盒子的高度即可实现单行文本垂直居中。

在使用matplotlib画图的时候将常会出现坐标轴的标签太长而出现重叠的现象，本文主要通过自身测过好用的解决办法进行展示，希望也能帮到大家，原图出现重叠现象例如图1：
代码为：
?
1、解决办法1： 将轴标签分两行显示，如图2：
只需在原代码中每个子图画图中加上代码：
?
'\n'+则表示换行显示的意思，想要哪个标签换行显示，则在标签前面加上此符号，也可以换多行，一个\n表示一行，例如'\n\n'+则表示换两行显示。fontsize是设置显示标签的字体大小。
2、解决办法2：轴标签倾斜显示
同样只需在原代码的基础上加上一句代码：
?
rotation表示倾斜的角度，10即为倾斜10度，可任意设置，也可结合上面换行显示一同使用。
3、解决办法3：利用matplotlib里面的自动调整语句
只需在原代码的画图部分的最后加上matplotlib自动调整的语句,图则会自动调整标签大小：
?
以上这篇python matplotlib画盒图、子图解决坐标轴标签重叠的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/baidu_37995814/article/details/98727766

标签 pre和css的white-space属性
今天看书发现css的段落属性有一个white-space属性，用来处理空白

white-space属性有三个值

1.normal:默认属性。即将连续的多个空格合并

2.pre：将源代码中的空格和换行符保留

3.norwrap:强制在同一行显示所有文本
突然就想到，这个white-space：pre和pre标签有没有什么不同？如果有需要的话要用哪个？

所以我就试了试

代码如下：



运行效果如下：



可以看到两段文字都达到了我们想要的效果，而且在段落里插入的a标签也都有预留文本的效果

这个时候我们打开f12看一下Element：




我们发现无论是pre标签还是p标签都有white-space：pre；这个属性

那么我们把pre标签的white-space设置为normal看一下效果



pre标签的预留效果没有了，所以我得出结论是，pre和css的white-space属性是一样的，并无区别。
如果这篇文章有错误的话，还请指正

背景
要做一个书翻开的效果，书是可以反复点击查看的
一开始做的动图，但是动图反复显示隐藏并不会按照我想的那样，所以只能切图后用js换图片了
前8张封面是不一样的，9–13张都是一样的，所以根据点击的是哪个按钮来决定显示那一套图片
需要的标签

点击出现书的按钮，这里只是演示作用所以写一个就行，是class为book_back_point_words的div
需要更换图片路径的标签，开始隐藏，点击按钮后显示，是class为book_flipchart的img

js代码
var flipchart_arr=new Array();//翻书图片数组
var flip_index;//翻书图片的index

$('.book_back_point_words').click(function() {
	book_start_anim('words');
})

function book_start_anim(book_name) {
	flip_index  = 0;
	$('.book_flipchart').attr({
		'src': ./img/book/fanshu/' + book_name + '1.png'
	});
	
	flipchart_arr[0]='./img/book/fanshu/' + book_name + '1.png';
	flipchart_arr[1]=./img/book/fanshu/' + book_name + '2.png';
	flipchart_arr[2]='./img/book/fanshu/' + book_name + '3.png';
	flipchart_arr[3]='./img/book/fanshu/' + book_name + '4.png';
	flipchart_arr[4]='./img/book/fanshu/' + book_name + '5.png';
	flipchart_arr[5]='./img/book/fanshu/' + book_name + '6.png';
	flipchart_arr[6]='./img/book/fanshu/' + book_name + '7.png';
	flipchart_arr[7]='./img/book/fanshu/' + book_name + '8.png';
	flipchart_arr[8]='./img/book/fanshu/flipchart9.png';
	flipchart_arr[9]='./img/book/fanshu/flipchart10.png';
	flipchart_arr[10]='./img/book/fanshu/flipchart11.png';
	flipchart_arr[11]='./img/book/fanshu/flipchart12.png';
	flipchart_arr[12]='./img/book/fanshu/flipchart13.png';
	
	$('.book_flipchart').show();
	let replace_flipchart = setInterval(function(){
		var obj=document.getElementsByClassName("book_flipchart")[0];
		if(flip_index == flipchart_arr.length-1){
			clearInterval(replace_flipchart);
		}
		else{
			flip_index +=1;
		}
		obj.src=flipchart_arr[flip_index];
	},60)
}