前端的易错点

将文字在父元素中垂直居中
line-height: 48px;（写父元素的高度
文字水平居中：margin: 0 auto;

解决外边距重叠和高度塌陷的问题：

.clearfix::before,
.clearfix::after{
     content:'';
     display:table; /*解决外边距重叠*/
     clear:both; /*解决高度塌陷*/
}
1
2
3
4
5
6

text-align：文本的水平对齐。

去除li前的黑点：list-style-type: none;

去除inline-block的左右间距：font-size=0;(给父元素设置

行内元素不能设置宽高，由文字撑开。

强制在一行显示，超过就用省略号：

div{
    width: 数值+单位;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
1
2
3
4
5
6

display: inline-block会导致很多问题出现：

• 水平之间有间隔，解决方法：给父元素设置font-size=0px;
• 元素在一行不能整齐排列，解决方法：float:left
• 能不用就不用。

align和valign属性的区别：

1.align属性趋向于左右对齐(水平对齐)，其值包含：left、right、center

2.valign属性趋向于垂直对齐，其值包含：top（对内容进行上对齐）、bottom（对内容进行下对齐）、middle（对内容进行居中对齐）、baseline（与基线对齐）

可以使用display:flex;布局方式让文字水平垂直居中：

  display: flex;
  align-items: center;     /* 侧轴对齐方式*/
  justify-content: center; /* 主轴对齐方式 */
1
2
3

选项卡的水平垂直居中：

.top{
            width: 300px;
            height: 40px;
            /* 下面是让top里面的盒子水平垂直居中*/
            display: flex;
            align-items: center;     
            justify-content: center;
            
        }
        .top span{
            float: left; 
            /* 水平长度平分 根据盒子的数量来分*/
            width: 25%; 
            height: 100%;
            text-align: center;/* span里的文字水平居中*/
            line-height: 40px; /* 高度和父盒子的高度一样 里面的文字就可以垂直居中*/
            background-color: rgb(231, 56, 56);
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18