前端面试准备（Day1）

1.讲一下盒模型，普通盒模型和怪异盒模型有什么区别？

盒模型：CSS把每个元素视为一个盒子，每个盒子包括分为内容（content）、填充（padding）、边框（border）、边界（margin）四个部分。盒模型是CSS布局的基本单元。

W3C标准盒模型（content-box）：（属性width，height只包含内容content，不包含border和padding。）  

IE盒模型（也称怪异盒模型）（border-box）：（属性width，height包含content、border和padding）

2.块元素和行内元素区别是什么？常见块元素和行内元素有哪些？

1.常见的块元素有<h1>~<h6> <p> <div> <ul> <ol> <dl> <li>等

块元素的特点有：

        1.总是从新的一行开始

        2.宽度（width），高度（heigth)，外边距以及内边距都可以控制

        3.宽度默认是父容器的%

        4.可以容纳内联元素或者其他块元素

2. 常见的行内元素有<a>、<strong>、<em>、<i>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素

行内元素的特点有：

        1.和相邻行内元素在一行上

        2.高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效

        3.默认高度就是它本身内容的宽度

        4.内行元素只能容纳文本内容和其他内行元素（<a>比较特殊）

3.行内块元素： <img />、<input />、<td>

行内块元素的特点：

        1.和相邻行内元素（行内块元素）在一行上，但是之间会有空白缝隙

        2.默认宽度就是它本身内容的宽度

        3.高度、行高、外边距以及内边距都可以控制

3.HTML语义化标签有哪些？

通过使用恰当语义的HTML标签，让页面具有良好的结构与含义.

header网页的头部

main网页的主体部分（只有一个main）

nav  网页的导航

section  一个独立的区块

aside  和主体相关的其他内容（侧边栏）

article独立的文章

footer  网页的底部

4.伪类和伪元素的区别是什么？

伪类（pseudo-class）是一个以冒号作为前缀，被添加到一个选择器末尾的关键字，样式被呈现到指定的元素时。如：（：last-child、:nth-of-type(n)），通过在元素选择器上加入伪类改变元素状态。

伪元素是以两个冒号作为前缀，用于创建一些不在文档树中的元素，并为其添加样式。通过对元素的操作进行对元素的改变。

5.CSS如何实现垂直居中？

1)设定行高（line-height）：设定行高是垂直居中最简单的方式，适用于“单行”的“行内元素，行内元素的上下都加上行高的1/2，所以就垂直居中

2)添加伪元素:

 .div0::before{

  content:'';

  width:0;

  height:100%;

  display:inline-block;

  position:relative;

  vertical-align:middle;/* vertical-align针对行内元素，div是block*/

  background:#f00;

}

3)calc属性动态计算：top： calc（“50%的外框高度- 50%的div高度”

至于为什么不用margin-top，因为margin相对的是水平宽度，

4)使用表格或假装表格

5)Transform：

position：relative；

top：50%

transform:translateY(-50%);

6)绝对定位

7)用Flexbox

6.水平方向布局

一个元素在父元素中，水平布局满足一下等式:( margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素内容区的width)

7 .垂直方向布局

如果子元素超过了父元素大小，则会溢出使用overflow属性设置父元素如何处理溢出

overflow：overflow-x/overflow-y：

            visible（默认值） 会溢出，在父元素外部显示

            hidden 溢出的内容会被裁剪，不会显示

            scroll 生成滚动条

            auto 根据需要生成滚动条

8、CSS常见的选择器有哪些？

1）元素选择器：元素{}

2）id选择器：#id{}

3）类选择器：.class{}

4）复合选择器

  选择器1 选择器2....(交集)

  选择器1，选择器2，...(并集)

5）关系选择器

  5.1 子元素选择器：父元素>子元素{}

  5.2 后代选择器：祖先元素 后代元素{}

  5.3 兄弟选择器：前一个+后一个{}（只会选择一个）

    前一个~后面{}（前面的兄弟不会被选中）

6）属性选择器

  [属性名] 选择含有指定属性的元素

  [属性名=属性值] 选择含有指定属性和指定值的元素

7）伪类选择器（带一个：）

  7.1 ：first-child:第一个子元素

  7.2 :last-child :最后一个子元素

  7.3 :nth-child（）：选中第n个  2n/even偶数个 2n-1/odd奇数

  7.4 :first-of-type

  7.5 :last-of-type

  7.6 :not（）：除了

8）超链接的伪类

  8.1 ：hover 鼠标移入

  8.2 ：link 表示一个没访问过的链接

  8.3 ：visited 表示一个访问过的链接，只能改变颜色

  8.4 ：active 鼠标点击

9）伪元素选择器（特殊的位置）

  9.1 ：：after 元素的结束位置

  9.2 ：：before 元素的开始位置

    使用9.1 9.2  必须结合content！！！

  9.3 ：：first-leter 第一个字母

  9.4 ：：first-line  第一行

  9.5 ：：selection 选中的内容

9..CSS的优先级如何计算？

对于每一条css规则，生成四元组（内联，id，class，元素）

！important  无穷大   

style 属性      1,0,0,0   

id 选择器      0,1,0,0   

类、伪类、结构伪类、属性选择器    0,0,1,0   

元素、伪元素选择器    0,0,0,1   

通配符选择器       0,0,0,0   

继承的样式    没有权重      

10长度单位px、em和rem，rpx，vw，vh的区别是什么？

px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em ：相对与父元素的font-size来计算的

rem：相对于根元素html的font-size

rpx：小程序独有的，论大小屏幕，规定屏幕宽为750rpx

vw：相对于浏览器视口宽度

vh：相对于浏览器视口高度

11.讲一下flex弹性盒布局？

    弹性容器

           1）display：

                  flex：块级弹性容器

                  inline-flex：行内的弹性容器（不会独占一行）

           2）flex-direction：设置主轴的方向

                   row：默认值，水平排列

                   主轴：右——>左

                   row-reverse：反向水平排列

                   主轴：左——>右

                   column：垂直排列

                   主轴：上——>下

                   column-reverse：反向垂直排列

                   主轴：下——>上

                主轴：弹性元素的排列方向

                侧轴：与主轴垂直

            3）flex-wrap：弹性元素是否自动换行

                     nowrap：不换行

                     wrap：换行

                     wrap-reverse：辅轴反方向换行

            4）flex-flow：flex-direction和flex-wrap的简写，无顺序要求

            5）jusitify-content：主轴上的元素如何排列

                    flex-start：沿主轴开始

                    flex-end：沿主轴终边

                    center:元素居中排列

                    space-around：空白分布在元素两侧

                    space-evenly：空白分布在元素单侧

                    space-between：空白均匀分布到元素两侧

            6）align-items：元素在辅轴上如何对齐

                         strench：默认值，将同一行的元素设置成相同高度

                         flex-start：元素不会拉伸，沿辅轴起边对齐

                         flex-end：元素不会拉伸，沿辅轴终边对齐

                         center：垂直居中

                         baseline：基线对齐

            7）align-content：辅轴空白的如何分配

                    flex-start：沿主轴开始

                    flex-end：沿主轴终边

                    center:元素居中排列

                    space-around：空白分布在元素两侧

                    space-evenly：空白分布在元素单侧

                    space-between：空白均匀分布到元素两侧

    弹性元素

             弹性容器的子元素，是弹性元素，一个元素可以同时是弹性容器，元素  

            1）flex-grow：

                    指定弹性元素的伸长系数，默认是0

                    父元素的剩余空间，按比例分配

            2）flex-shrink：

                      指定弹性元素的收缩系数，默认时1

                      父元素的空间容纳不下时，对子元素进行收缩

            3）align-self：用来覆盖align-items

            4）flex-basis：元素在主轴上基础长度

            5）flex：增长 缩减 基础长度

                  initial：0 1 auto

                  auto：1 1 auto

                  none：0 0 auto

            6）order：元素的排列顺序

12.float：设置浮动，

float：none /left/right在其父元素内, 设置浮动后，水平等式不需要强制满足

浮动的特点：

        1）完全从文档流脱离，不再占用文档流的位置，下边的元素会向上移动

       2）通过浮动，可以使一个元素向其父元素的左侧或右侧移动，不会超过其他浮动元素，不会从父元素中移出

        3）如果上边是一个无浮动的元素，浮动元素无法上移

        4 ）浮动元素不会盖文字，文字会环绕图片

        脱离文档流特点!!

          --块元素不再独占一行  宽 高被内容撑 开

          --行内元素可以设置宽高（变为块元素）

13.清除浮动有3种办法：

1）在浮动元素后面增加一个元素，设置clear: both；

2）父元素设置伪元素，给伪元素设置clear: both，设置clear的元素不受前面浮动元素影响，位置会放在浮动元素后面，因此可以把父元素撑开。

3）父元素设置overflow: hidden。overflow: hidden让父元素形成一个BFC，所以可以清除浮动。

13.浮动塌陷问题解决方法是什么？（bug）

高度塌陷:元素的高度默认是被子元素撑开的，但子元素设置浮动后，脱离文档流，导致父元素高度丢失，导致下面元素向上移，导致页面混乱     

开启BFC：

   1)设置浮动 flaot=left/right

   2)display： flex/inline-flex/

3)overflow：hidden/auto/scroll

4)position:absolute/fixed

/* 解决外边距重叠和高度塌陷 */

clearfix::before,

clearfix::after{

    content: '';

    display: table;

    clear: both;

}

14.BFC、IFC是什么？

BFC（Block Formatting Contexts)直译为“块级格式化上下文” BFC就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响外面的元素，反之也是如此。

IFC  (Inline Formatting Context) 内敛格式化上下文。

       隐含属性，开启BFC后，变成独立的布局区域

       特点:

           1)开启BFC元素后，不会被浮动元素覆盖

           2)子与父元素外边距不会重叠

           3)可以包含浮动的子元素

15.position属性的值有哪些？各个值是什么含义？

position：left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=父元素内容区的width

            static：默认值

            relative：相对定位

                   1) 参照自身在文档流中的位置

                   2) 会提升元素层级

                   3）不会脱离文档流

                   4）不会改变元素性质

                   5）不设置偏移量，没有变化

            absolute：绝对定位

                   1）不设置偏移量，位置没有变化

                   2）脱离文档流

                   3）会改变元素性质（变为块元素）

                   4）会提升元素层级

                   5）开启了定位的祖先元素，没有则是根元素

                  position: absolute;

                  left: 0;

                  right: 0;

                top: 0;

                bottom: o;

                margin: auto; //实现水平垂直居中

            fixed：固定定位

                   1）不设置偏移量，位置没有变化

                   2）脱离文档流

                   3）会改变元素性质（变为块元素）

                   4）会提升元素层级

                   5）参考于浏览器视口

            sticky：粘滞定位