盒模型

说下盒模型?

有两种盒模型，W3C盒模型和IE盒模型。通常说的“IE盒子模型”指的是IE5.5，IE6及其以后，盒模型都为 content-box。当浏览器未设置声明时，盒模型都为 border-box。

通过 css3 的box-sizing属性，可以更改元素的盒子模型。标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

标准盒模型 box-sizing: content-box

IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。IE盒模型 box-sizing: border-box

标准的CSS的盒子模型？

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin

与低版本IE的盒子模型有什么不同的？

低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

box-sizing属性？

用来控制元素的盒子模型的解析模式，默认为content-box

context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽

border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

盒子模型在不同浏览器上的区别

   盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。盒子模型有两种，分别是IE盒子模型和标准W3C盒子模型。它们对盒子模型的解释各不相同，先看看我们熟知的标准盒子模型：

  标准的w3c盒子模型的范围包括margin、border、padding、content，并且content部分不包含其他部分。

  在来看下IE盒子模型：

   IE盒子模型的范围也包括margin、border、padding、content，和标准w3c盒子模型不同的是：ie盒子模型的content部分包含了border和padding。

  例如：

   一个盒子的margin为20px，border为1px，padding为10px，content的宽为200px、高为50px，加入用标准盒子模型解释，那么这个盒子需要占据的位置为：

   宽：20*2 + 1 * 2 + 10* 2 + 200 = 262px, 高：20 * 2 + 1 * 2 + 10 * 2 + 50 = 112px。

   盒子的实际大小为：宽1*2 + 10 * 2 + 200 = 222px,高1* 2 + 10 * 2 + 50 = 72px。

   假如用IE盒子模型，那么盒子需要占据的位置为：

   宽：20 * 2 + 200 = 240px,高：20 * 2 + 50 = 70px。

   盒子的实际大小：宽200px,高50px。

   一般推荐使用W3C盒子模型，怎样才算是选择了标准W3C盒子模型呢？就是在网页上加DOCKTYPE申明。如果不加，那么各个浏览器会根据自己的行为去理解网页。

   CSS3增加了box-sizing属性，值包括content-box|border-box|inherit。

   在我们的重置样式文件中一般也会重置这个属性，把box-sizing设置成border-box方便于排版。

水平垂直居中

不定宽高水平垂直居中？

1.通过display：flex；justify-content:center; align-items:center;就可以让子元素不定宽高水平垂直居中

2.也可以父display：flex；，子设置一个margin：auto；

3.通过css3，给父元素设置相对定位，给子元素设置绝对定位，left：50% top：50%   通过transform：translate（-50%，-50%）拉回自身的宽和高的一半。

4.通过给父元素设置display：table-cell; vertical-align：middle  text-align：center   给子元素设置vertical-align：middle  text-align：center。就可以让子元素不定宽高水平垂直居中了。

文字在垂直和水平方向重叠的两个属性分别是什么？

   垂直方向：line-height。设置成比字体高度还小就可以让两行重叠

水平方向：letter-spacing。设置为负值即可实现重叠。

如何居中div

-水平居中1：给 div 设置一个宽度，然后添加 margin:0 auto; 属性

div{
  width: 200px;
  margin: 0 auto;
}
-水平居中2：利用 text-align:center 实现
.container{
  background: rgba(0, 0, 0, .5);
  text-align: center:
  font-size: 0;
}
.box{
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
}
-让绝对定位的div居中
div{
  positionn: absolute;
  width: 300px;
  height: 300px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: pink; /* 方便看效果 */
}

-水平垂直居中1

/* 确定容器的宽高，宽500高300 */

div{
  position: absolute;
  width:500px;
  height: 300px;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -250px;
  background-color: pink;
}

-水平垂直居中2

/* 未知容器宽高，利用 transform 属性 */

div{
  position: absolute;
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: pink;
}

-水平垂直居中3

/* 利用 flex 布局实际使用时应考虑兼容性 */

.container{
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
.container div{
  width: 100px;
  height: 100px;
  background-color: pink;
}

为什么margin: 0 auto会让div居中

margin 可以有4个值，分别对应影响的方向是上，右，下，左，   2个值的时候，对应第一个值是 控制上下距离，第二个值是控制左右， 所以magrgin：0 auto， 就是上下距离为0，auto是自适应，这里指的是左右两个方向的距离一样，也就是说，不论你的宽度怎么变化，都是两个方向距离一样，形成居中。

要给居中元素一个宽度，否则无效

该元素不可以浮动，否则无效

BFC

什么是BFC？

BFC是W3C CSS2.1规范中的一个概念，在CSS3.0规范中已被修改为flow root。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC（block formatting context），中文为“块级格式化上下文”

对BFC的理解？

BFC规定了内部的Block Box如何布局。

定位方案：

1. 内部的Box会在垂直方向上一个接一个放置。
2. Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
3. 每个元素的margin box 的左边，与包含块border box的左边相接触。
4. BFC的区域不会与float box重叠。
5. BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
6. 计算BFC的高度时，浮动元素也会参与计算。

1. float属性不为none 【会影响上级元素】
2. position为absolute或fixed 【会影响上机元素】
3. display为inline-block, table-cell, table-caption, flex, inline-flex
4. overflow不为visible, 【建议使用auto/hidden】
5. 根元素

如何触发BFC？

BFC解决了什么问题？

解决自适应两栏布局问题：利用BFC的区域不会与float box重叠的规则。

解决浮动后塌陷问题：利用计算BFC的高度时，浮动元素也参与计算规则。

解决垂直margin重叠问题：利用Box垂直方向的距离由margin决定。

属于同一个BFC(同一个标记)的两个相邻Box的margin会发生重叠规则，在一个box外包裹一个容器，让他生成不同的BFC，这样就不会margin重叠了。

为什么overflow:hidden能触发bfc？

块级格式化上下文 (Block Formatting Context)：

1. 盒子在容器（包含块）内从上到下一个接一个地放置
2. 两个兄弟盒之间的竖直距离由 margin 属性决定
3. 同一个 BFC 内垂直 margin 会合并
4. 盒子的左外边缘挨着容器（包含块）的左边

块级格式化上下文(BFC) 的特性

1. BFC 内的浮动不会影响到BFC外部的元素
2. BFC 的高度会包含其内的浮动元素
3. BFC 不会和浮动元素重叠
4. BFC 可以通过 overflow:hidden 等方法创建

所有要处理 margin 折叠，就需要让两个元素处于不同的BFC，overflow: hidden正好可以触发BFC

Position

Position定位值有哪些？

static（默认）：按照正常文档流进行排列；

relative:相对定位  一般给父元素设置

absolute:绝对定位  一般给子元素设置 相对父元素或祖先带定位样式的元素定位

fixed :固定在某个位置，相对浏览器窗口固定在一个位置

Inherit:继承父元素的position值。

absolute的containing block计算方式跟正常流有什么不同？

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：

1. 若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；
2. 否则,则由这个祖先元素的 padding box 构成。

如果都找不到，则为 initial containing block。

补充：

1. static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）
2. absolute: 向上找最近的定位为absolute/relative的元素
3. fixed: 它的containing block一律为根元素(html/body)

display

display有哪些值？说明他们的作用?

inline（默认）–内联

none–隐藏

block–块显示

table–表格显示

list-item–项目列表

inline-block

display:none与visibility：hidden的区别？

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）

visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性都将“丢失”；而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置任然存在。

display:inline-block 什么时候会显示间隙？

1. 有空格时候会有间隙 解决：移除空格
2. margin正值的时候 解决：margin使用负值
3. 使用font-size时候 解决：font-size:0、letter-spacing、word-spacing

overflow属性定义溢出元素内容区的内容会如何处理?

参数是scroll时候，必会出现滚动条。

参数是auto时候，子元素内容大于父元素时出现滚动条。

参数是visible时候，溢出的内容出现在父元素之外。

参数是hidden时候，溢出隐藏。

visibility属性有个collapse属性值？在不同浏览器下以后什么区别？

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。

1. chrome中，使用collapse值和使用hidden没有区别。
2. firefox，opera和IE，使用collapse值和使用display：none没有什么区别。

position跟display、overflow、float这些特性相互叠加后会怎么样？

display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。

类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

float浮动

为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

浮动带来的问题：

1. 父元素的高度无法被撑开，影响与父元素同级的元素
2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后
3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

1. 父级div定义height
2. 最后一个浮动元素后加空div标签 并添加样式clear:both。
3. 包含浮动元素的父标签添加样式overflow为hidden或auto。
4. 父级div定义zoom

设置元素浮动后，该元素的display值是多少？

自动变成display:block

margin和padding分别适合什么场景使用？

何时使用margin：

1. 需要在border外侧添加空白
2. 空白处不需要背景色
3. 上下相连的两个盒子之间的空白，需要相互抵消时。
4. 需要在border内侧添加空白
5. 空白处需要背景颜色
6. 上下相连的两个盒子的空白，希望为两者之和

何时使用padding：

兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。

选择器

CSS常用选择器

1. 标签选择器
2. ID选择器
3. 类选择器
4. 组选择器
5. 通配符选择器
6. 后代选择器
7. 子元素选择器
8. 伪类选择器

哪些属性可以继承？

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

优先级（就近原则）：!important > [ id > class > tag ]

!important 比内联优先级高

CSS优先级算法如何计算？

元素选择符： 1

class选择符： 10

id选择符：100

元素标签：1000

1. !important声明的样式优先级最高，如果冲突再进行计算。
2. 如果优先级相同，则选择最后出现的样式。
3. 继承得到的样式的优先级最低。

CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个元素

p:last-of-type 选择属于其父元素的最后元素

p:only-of-type 选择属于其父元素唯一的元素

p:only-child 选择属于其父元素的唯一子元素

p:nth-child(2) 选择属于其父元素的第二个子元素

:enabled :disabled 表单控件的禁用状态。

:checked 单选框或复选框被选中。

::before 和 :after 中双冒号和单冒号的区别？这2个伪元素的作用？

·在 CSS3 中 : 表示伪类， :: 表示伪元素

·想让插入的内容出现在其他内容前，使用::befroe。否则，使用::after

Flex布局

常见父项的属性：

●flex-direction :设置主轴的方向

Row 默认值从左到右

row-reverse 从右到左

column 从上到下

column-reverse 从下到上

●justify-content :设置主轴上的子元素排列方式

flex-start 默认值从头部开始 如果主轴是x轴，则从左到右

flex-end 从尾部开始排列（但元素的顺序还是从左到右）

center 在主轴居中对齐(如果主轴是x轴则水平居中)

space- around 平分剩余空间

space – between 先两边贴边再平分剩余空间(重要)

●flex-wrap :设置子元素是否换行

默认情况下,项目都排在一条线(又称”轴线”) 上。flex-wrap属性定义 , flex布局中默认是不换行的。

nowrap 默认值，不换行

wrap 换行

●align-content :设置侧轴上的子元素的排列方式(多行)

设置子项在侧轴.上的排列方式并且只能用于子项出现换行的情况(多行) , 在单行下是没有效果的。

flex-start 默认值在侧轴的头部开始排列

flex- end 在侧轴的尾部开始排列

center 在侧轴中间显示

space-around 子项在侧轴平分剩余空间

space- between 子项在侧轴先分布在两头,再平分剩余空间

stretch 设置子项元素高度平分父元素高度

●align-items :设置侧轴上的子元素排列方式(单行)

该属性是控制子项在侧轴(默认是y轴).上的排列方式在子项为单项(单行)的时候使用

flex-start 从上到下

flex- end 从下到上

center 挤在一起居中(垂直居中)

stretch 拉伸(默认值但是子盒子如果给高度就不会生效)

●flex-flow :复合属性,相当于同时设置了flex-direction和flex-wrap

flex-dicection: column;

flex-wrap: wrap;

它俩的简写可以写成：

flex-flow: column wrap;

常见子项的属性：

●flex子项目占的份数

flex属性定义子项目分配剩余空间,用flex来表示占多少份数。

●align-self控制子项自己在侧轴的排列方式

align-self属性允许单个项目有与其他项目不-样的对齐方式，可覆盖align-items属性。

默认值为auto ,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

span:nth-child(2){ 
  /*设置自己在侧轴的排列方式*/ 
  align-self:flex-end; 
}

●order属性定义子项的排列顺序(前后顺序)

数值越小,排列越靠前,默认为0。（这个是左右的形式）

注意:和z-index不-样。（index是叠罗汉的形式）

flex属性flex:1到底是什么？

flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。

推荐使用此简写属性，而不是单独写这三个属性。

flex-grow：定义项目的的放大比例；

默认为0，即使存在剩余空间，也不会放大；

所有项目的flex-grow为1：等分剩余空间（自动放大占位）；

flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n倍。

flex-shrink：定义项目的缩小比例；

默认为1，即 如果空间不足，该项目将缩小；

所有项目的flex-shrink为1：当空间不足时，缩小的比例相同；

flex-shrink为0：空间不足时，该项目不会缩小；

flex-shrink为n的项目，空间不足时缩小的比例是flex-shrink为1的n倍。

flex-basis： 定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间，

默认值为auto，即 项目原本大小；

设置后项目将占据固定空间。

所以flex属性的默认值为：0 1 auto （不放大会缩小）

flex为none：0 0 auto  （不放大也不缩小）

flex为auto：1 1 auto  （放大且缩小）

flex为一个非负数字n：该数字为flex-grow的值，

flex：n ；= flex-grow：n；

                           flex-shrink：1；

                           flex-basis：0%;

flex为两个非负数字n1，n2： 分别为flex-grow和flex-shrink的值。

flex：n1 n2；= flex-grow：n1；

                                flex-shrink：n2；

                                 flex-basis：0%;

flex为一个长度或百分比L：视为flex-basis的值，

flex：L；= flex-grow：1；

                        flex-shrink：1；

                        flex-basis：L;

flex为一个非负数字n和一个长度或百分比L：分别为flex-grow和flex-basis的值，

flex：n L；= flex-grow：n；

                           flex-shrink：1；

                           flex-basis：L;

可以发现，flex-grow和flex-shrink在flex属性中不规定值则为1，flex-basis为0%。

flex：1即为flex-grow：1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。

请解释一下flexbox（弹性盒布局模型）,以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。