前端-面试题

陆壹柒 -前端留级生

已于 2022-07-29 22:19:10 修改

阅读量138

点赞数 1

文章标签：前端

于 2022-07-28 17:55:20 首次发布

本文链接：https://blog.csdn.net/qq_45081636/article/details/126040492

版权

1、盒模型

盒子概念：盒子由内容(content),内边距(padding),边框(border),外边距(margin)组成。

标准盒模型

box-sizing:content-box,盒子的宽高等于内容的宽高。

IE盒模型(怪异盒模型)

box-sizing:border-box,盒子的宽高等内容宽高加上内边距加上边框。

2、清除浮动的方法

a、在浮动元素后加一个空盒子，这只clear:both;

b、伪元素清除浮动
.clearFloat::after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearFloat {
    zoom: 1;
} 
c、给父盒子设置overflow:hidden;

3、盒子水平垂直居中对齐

定位法

1)父相子绝，子盒子设置

top:50%;left:50%;

transform:translate(-50%,-50%);

transform:translate(-50%,-50%); = margin-top:负的子盒子高度的一半;margin-left:负的子盒子宽度的一半;

弹性盒布局法

1)父盒子设置display:flex; 子盒子设置margin:auto; (父盒子中只有一个盒子时采用)

2)父盒子设置 display:flex; justify-content: center; align-items: center;

tbale-cell

父盒子设置display: table-cell; vertical-align: middle; text-align: center;

#main{
    width: 400px;
    height: 400px;
    border: 1px solid black;
    /* position: relative; */
    /* display: flex;
    justify-content: center;
    align-items: center; */
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
#content {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    /* position: absolute; */
    /* top: 50%;
    left: 50%; */
    /* 指的是子盒子 宽高的一半 */
    /* transform: translate(-50%, -50%); */
    /* h */
    /* margin-top: -50px; */
    /* w */
    /* margin-left: -50px; */
    /* margin: auto; */
}

4、CSS怎么写一个三角形

div{
    display: inline-block;
    width: 0;
    height: 0;
    border: 10px solid;
    border-color: red transparent transparent transparent;
    /*透明 transparent  */
}