CSS居中(1)

</style>

 

<div id="father">

    <div id="son">我是块级元素</div>

</div>

不定宽度：默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素，给父元素设置 text-align: center;

<style>

    #father {

        width: 500px;

        height: 300px;

        background-color: skyblue;

        text-align: center;

    }

 

    #son {

        background-color: green;

        display: inline;

    }

</style>

 

<div id="father">

    <div id="son">我是块级元素</div>

</div>

方案二：使用定位属性



首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；



定宽度：设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%);

<style>

    #father {

        width: 500px;

        height: 300px;

        background-color: skyblue;

        position: relative;

}

 

    #son {

        width: 100px;

        height: 100px;

        background-color: green;

        position: absolute;

        left: 50%;

        margin-left: -50px;

}

</style>

 

<div id="father">

    <div id="son">我是块级元素</div>

</div>

不定宽度：利用css3新增属性transform: translateX(-50%);

<style>

    #father {

        width: 500px;

        height: 300px;

        background-color: skyblue;

        position: relative;

}

 

    #son {

        height: 100px;

        background-color: green;

        position: absolute;

        left: 50%;

        transform: translateX(-50%);

}

</style>

 

<div id="father">

    <div id="son">我是块级元素</div>

</div>

方案三：使用flexbox布局实现（宽度定不定都可以）



使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

<style>

    #father {

        width: 500px;

        height: 300px;

        background-color: skyblue;

        display: flex;

        justify-content: center;

    }

 

    #son {

        width: 100px;

        height: 100px;

        background-color: green;

    }

</style>

 

<div id="father">

    <div id="son">我是块级元素</div>

</div>

[]( )垂直居中

-------------------------------------------------------------



### []( )单行的行内元素



只需要设置单行行内元素的"行高等于盒子的高"即可；

<div id="father">

    <span id="son">我是单行的行内元素</span>

</div>

### []( )多行的行内元素



使用给父元素设置display:table-cell;和vertical-align: middle;属即可；

<span id="son">我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素</span>

### []( )块级元素



方案一：使用定位



首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，即让子元素的左上角垂直居中；



定高度：设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);

<style>

    #father {

        width: 500px;

        height: 300px;

        background-color: skyblue;

        position: relative;

}

 

    #son {

        height: 100px;

        background-color: green;

        position: absolute;

        top: 50%;

        margin-top: -50px;

}

</style>

 

<div id="father">

    <div id="son">我是块级元素</div>

</div>

不定高度：利用css3新增属性transform: translateY(-50%);

<style>

    #father {

        width: 500px;

        height: 300px;

        background-color: skyblue;

        position: relative;

}

 

    #son {

        width: 100px;

        background-color: green;

        position: absolute;

        left: 50%;

        transform: translateY(-50%);

}

</style>

 

<div id="father">

    <div id="son">我是块级元素</div>

</div>

方案二：使用flexbox布局实现（高度定不定都可以）



使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

<style>

    #father {

        width: 500px;

        height: 300px;

        background-color: skyblue;

        display: flex;

        align-items: center;

    }

 

    #son {

        width: 100px;

        height: 100px;

        background-color: green;

    }

</style>

 

<div id="father">

    <div id="son">我是块级元素</div>

</div>

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS

• JavaScript

• 前端框架

• 前端性能优化

• 前端监控

• 模块化+项目构建

• 代码管理

• 信息安全

• 网络协议

• 浏览器

• 算法与数据结构

• 团队管理

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容