CSS面试总结1.标准盒模型、IE盒模型标准盒模型的width、height范围只包括 content 部分。 IE盒

页面布局

常见的CSS布局单位

常用的布局单位包括像素（px），百分比（%），em，rem，vw/vh。

PX是页面布局的基础，一个像素表示终端屏幕所显示的最小的区域，像素分为：CSS像素和物理像素
%，当浏览器的宽度和高度发生变化时，%单位会随着浏览器的变化而变化。子元素的%相对于直接父元素
em：相对于父元素，相对于浏览器默认字体尺寸（默认16PX）
rem：相对于根元素，根元素（html元素）的font-size的倍数。作用：利用rem实现响应式布局，利用html元素字体的大小与屏幕间的比值设置font-size的值。
vw/vh与视图窗口有关的单位，vw相对于视图窗口的宽度，vh相对于视图窗口高度

CSS基础

标准盒模型、IE盒模型

标准盒模型的width、height范围只包括 content 部分。
IE盒模型的width、height范围包括 border、padding、content。

前端项目为什么要初始化CSS样式？

因为浏览器的兼容问题，不同浏览器对标签的默认值是不同的。

position:absolute绝对定位，是相对于谁的定位？

通过制定元素相对于最近的非static定位祖先元素进行定位。

sticky粘性定位

position:sticky;基于用户的滚动位置定位

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed; ，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

margin、padding的区别

margin是用来隔开元素与元素的间距。
padding是用来隔开元素与内容的间隔。

display属性

定义：display 属性规定元素应该生成的框的类型，建立布局时元素生成的显示框类型。

常用的值：

display:none 此元素不会被显示。
display:block 此元素将显示为块级元素，此元素前后会带有换行符。
display:inline-block 行内块元素。

BFC

定义：某个元素的一个CSS属性，是页面中的一块渲染区域，决定其子元素如何定位、以及和其他元素的关系，子元素不会影响到外面的布局。

满足下列条件之一就会触发BFC

根元素，即HTML元素

元素设置浮动：float除none以外的值

overflow值为：auto、scroll、hidden

元素设置绝对定位：position：(absolute、fixed)

display值为：inline-block(行内块元素)、table-cell、table-caption(此元素会作为一个表格标题显示）（类似 <caption>）、flex等

BFC作用与原理，(overflow:hidden)

清除内部浮动
防止margin重叠
自适应两栏布局

flex布局

⚠️：设置为flex布局后，子元素的float,clear,vertical-align属性会失效

flex:1

flex属性是 flex-grow + flex-shrink + flex-basis的简写，默认值为0 1 auto（后两个属性可选） ⚠️：flex:1，让所有弹性盒模型对象的子元素都有相同的长度，忽略他们内部的内容。

使用flex

flex为一个非负数字n:该数字为flex-grow的值
flex为两个非负数字n1,n2:分别为flex-grow和flex-shrink的值
flex为一个长度或百分比L：视为felx-basis的值
flex为一个非负数字n和一个长度或百分比L：分别为felx-grow和flex-basis的值

flex-grow、flex-shrink、flex-basis

flex-grow:定义项目的放大比例（默认为0，即使存在剩余空间，也不会放大。为1时，等分剩余空间）
flex-shrink：定义项目的缩小比例
flex-basis：是否有多余空间，(默认为auto,项目本身大小。设置后项目将占据固定空间）

页面布局实现

水平居中 `水平居中分为行内元素水平居中、块级元素水平居中`

行内元素水平居中

原理：text-align只控制行内内容(文字、行内元素、行内块级元素)如何相对他的块父元素对齐

父元素是块级元素，则直接给父元素设置 text-align: center
父元素不是块级元素，则先利用display:block将其父元素设置为块级元素，再给父元素设置 text-align: center。

块级元素水平居中（与宽度有关）

方案一：宽度确定与宽度无法确定两种

宽度确定：需要谁居中，给其设置 margin: 0 auto; （作用：使盒子自己居中）
宽度不确定：默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 display: inline(即将其转换成行内块级/行内元素)，给父元素设置 text-align。 center。

方案二：使用定位属性

首先设置父元素为相对定位(position:relative)

再设置子元素为绝对定位(position:absolute),设置子元素的left:50%(即让子元素的左上角水平居中)。

定宽度：设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%)。
不定宽度：利用css3新增属性transform: translateX(-50%)。

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

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

垂直居中

单行的行内元素

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

多行的行内元素

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

块级元素（与高度有关）

方案一：使用定位

首先设置父元素为相对定位(position:relative)

再设置子元素为绝对定位(position:absolute)，设置子元素的top: 50%(即让子元素的左上角垂直居中)。

定高度：设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%)
不定高度：利用css3新增属性transform: translateY(-50%)

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

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

水平垂直居中

已知高度和宽度的元素

方案一：设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;
方案二：设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: -元素宽度的一半px; margin-top: -元素高度的一半px;

未知高度和宽度的元素

方案一：使用定位属性

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

使用flex布局实现

设置父元素为flex定位，display:flex;justify-content: center; align-items: center

场景应用

解决1PX 问题？

CSS中的1px不能和移动设备上的1px不等，通过：如下，可以知道设备的物理像素

window.devicePixelRatio = 设备的物理像素/CSS像素

`直接写0.5px(兼容性不好)`

可以通过JS拿到window.devicePixelRatio的值，在给到CSS的data里

<div id="container" data-device={{window.devicePixelRatio}}></div>

#container[data-device="2"]{
 border:0.5px solid #333
}

`伪元素先放大后缩小`

思路：在目标元素的后面追加一个 ::after 伪元素，让这个元素布局为 absolute 之后、整个伸展开铺在目标元素上，然后把它的宽和高都设置为目标元素的两倍，border值设为 1px。接着借助 CSS 动画特效中的放缩能力，把整个伪元素缩小为原来的 50%。此时，伪元素的宽高刚好可以和原有的目标元素对齐，而 border 也缩小为了 1px 的二分之一，间接地实现了 0.5px 的效果。

#container[data-device="2"] {
    position: relative;
}
#container[data-device="2"]::after{
      position:absolute;
      top: 0;
      left: 0;
      width: 200%;
      height: 200%;
      content:"";
      transform: scale(0.5);
      transform-origin: left top;
      box-sizing: border-box;
      border: 1px solid #333;
    }
}

`viewport缩放解决`

meta标签：

// 针对像素比为2的页面，整夜页面缩放为原来的1/2大小
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

根据像素比的不同，缩放比例计算为不同的值：

const scale = 1 / window.devicePixelRatio;
// 这里 metaEl 指的是 meta 标签对应的 Dom
metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);

CSS面试总结