前端面试题css篇

一、css清除浮动的方式

参考文档https://blog.csdn.net/wshwsh_/article/details/131968588

1.在标签结尾后面加空div标签clear:both；

2.给父级元素单独定义高度height

3.父级div定义 overflow:auto

4.父级div定义 伪元素:after

二、如何将文字超出部分隐藏并且不换行用省略号表示

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

三、 css——box-sizing属性

• box-sizing: content-box; //默认值 内容真正宽度 = 设置的宽度、规定宽度仅仅只代表内容不包括内边距和边框的宽度
• box-sizing: border-box; // 内容真正宽度width= 设置的width- 左右padding - 左右border、规定的宽度包括内容和内边距和边框

四、css中盒子垂直水平居中的方法有几种

1.flex布局

    display: flex;
    align-items: center;
    justify-content: center;

2.position定位

子绝父相

   1.

transform: translate(50%,50%);

   2.

top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

 3.grid布局

.father {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
            display: grid;
        }
        
.son {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            margin: auto;
        }

 4.table布局

.father {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
            display: table-cell;
            /* 文本水平居中 */
            text-align: center;  
            /* 垂直居中 */
            vertical-align: middle;
        }
        
.son {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            margin: auto;
}