css样式说明

background-image 背景图片

background-image: url("../../assets/homeimg/title.png");
background-repeat: no-repeat;
background-size: 100% 100%;

background-position-x: center;
background-position-y: top;

调整文字大小

• text-indent: 0pt 首行缩进 （标题）

• letter-spacing: 文字之间的空隙大小 （标题）

• text-decoration: none; 线的位置 （标题）
  

• text-align: center; 文本对齐方式：
  

• text-transform: uppercase; 转换不同元素中的文本：
  

• white-space: nowrap; 规定段落中的文本不进行换行：
  

将 i图标垂直水平居中

<el-menu-item class="approval-site-navba" index="0" @click="sidebarFold = !sidebarFold">
            <i style="vertical-align: middle; display: table-cell;" class="el-icon-s-fold">
            </i>
          </el-menu-item>

 .approval-site-navba {
    display: table;
    width: 40px;
    height: 40px;
  }

inline、block和inline-block的区别

• 块级元素特点 block：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（很霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.

• 内联元素特点 inline：

1、可以与其他行内元素共享一行，不会独占一行.
2、可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
4、不能更改元素的height，width的值，大小由内容撑开.

• 内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点。

inline-block 元素特点： 是不独占一行的块级元素

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

用了display:inline-block后，存在间隙问题，间隙为4像素

1.对父元素添加，{font-size:0}，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙
.对于浮动布局就用于需要文字环绕的时候，毕竟这才是浮动真正的用武之地，水平排列的是就交给inline-block了。
inline-block布局 vs 浮动布局
a.不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果

html常见的块元素与内联（行内）元素用法说明

html平时常见的块元素有：div, p, h1, h2, h3等，内联元素有：span, a, img等。
div块元素仅仅只用于进行页面布局，它自身不带任何默认样式。

span内联元素可以用来选中文本设置文本的样式，其自身不会带默认样式。
块级元素P是不能包含DIV的。

vertical-align

• 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。不能用它垂直对齐块级元素。
• 在父元素定义了line-height的条件下，vertical-align的作用是让（inline/inline-block）子元素依据父元素的基点对齐。

baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

margin塌陷以及margin合并

正正取最大，负负取最负，正负就相加
只有普通文档流中块级元素（block）的垂直外边距才会发生外边距合并。行内框，浮动框或绝对定位之间的外边距不会合并。
两个或多个垂直毗邻的兄弟元素
兄弟元素之间的margin-bottom 与 margin-top合并
两个或多个垂直毗邻的兄弟元素
第一个子元素的margin-top与父元素的margin-top合并
最后一个子元素的margin-bottom与父元素的margin-bottom合并
空白元素
一个块级元素中不包含任何内容，并且在其 margin-top 与 margin-bottom 之间没有边框、内边距，这种情况下这个元素自身的上下边距会发生合并

解决方法：

1. 设置垂直方向的 border；
2. 设置垂直方向的 padding；
3. 里面添加内联元素（直接 Space 键空格是没用的）；
4. 设置 height 或者 min-height。
5. 触发bfc(块级格式上下文),改变父级的渲染规则

方法:

改变父级的渲染规则有以下四种方法,给父级盒子添加

(1)position:absolute/fixed

(2)display:inline-block;

(3)float:left/right

(4)overflow:hidden

这四种方法都能触发bfc,但是使用的时候都会带来不同的麻烦,具体使用中还需根据具体情况选择没有影响的来解决margin塌陷

box-sizing

content-box 的 width 不包括 padding 和 border
border-box 的 width 包括 padding 和 border，
正因为如此：元素box-sizing为border-box时，使用line-hight使文字垂直居中时需要考虑元素的padding和border

	.text-area{
				height: 80px;
				background-color: azure;
				margin-top: 30px;
				padding: 10px;
				line-height: 80px;
			}

在文字的父类 设置行高，高度，来达到 垂直 居中的效果

background-clip

规定背景的绘制区域：

如果什么都不加，默认是第一种 展示情况

.box4 {
    border: 10px dotted cornsilk;
    background: url(../img/1.jpg);
    background-clip: padding-box;
}

transparent是透明的意思，background-color:transparent;就是把背景色设置为透明。不过，默认情况下只要不设置背景颜色，背景就是透明的。

水平居中

• 行内元素水平居中

父级元素设置text-align=center

• 块级元素水平居中

父级元素设置text-align=center

display:inline-block;text-align=center;

 margin: 0 auto

;

垂直居中

line-hight和verticle-align:middle

	.out3{
			width: 600px;
			height: 400px;
			line-height: 400px;
	 }
	.in{
		width: 50%;
		height: 50%;
		display: inline-block;
		vertical-align: middle;	
	}

字体大小-单位

px 像素
固定大小的单元
相同分辨率显示效果相同
页面文字默认16px

em
相对长度单位
相对于父级元素字体大小
em会继承父级元素字体大小
未经过调整的元素1em=16px
rem
相对长度单位
相对于根节点的字体大小（html节点）

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比
vmin：当前 vw 和 vh 中较小的一个值
vmax：当前 vw 和 vh 中较大的一个值

<span style="font-size: 10vmax">随意缩小，也能看到我</span>

字体 响应式布局

<style>
		html,body{
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
		}
		
		@media screen and (max-width: 1024px){
			html{
				font-size:10px ;
			}
		}
		@media screen and (min-width: 1024px){
			html{
				font-size:12px ;
			}
		}
		@media screen and (min-width: 1366px){
			html{
				font-size:16px ;
			}
		}
		@media screen and (min-width: 1680px){
			html{
				font-size:18px ;
			}
		}
		@media screen and (min-width: 1920px){
			html{
				font-size:20px ;
			}
		}		
	
	</style>