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 之间没有边框、内边距,这种情况下这个元素自身的上下边距会发生合并
解决方法:
- 设置垂直方向的 border;
- 设置垂直方向的 padding;
- 里面添加内联元素(直接 Space 键空格是没用的);
- 设置 height 或者 min-height。
- 触发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>