前端面试题《CSS》

爱被打了一巴掌 2023-01-13 09:48 80阅读 0赞

### 盒子模型，弹性盒子，两栏布局，三栏布局、flex布局 ###

> 盒子模型：由内外边距、边框、内容组成
> 
> 弹性盒子：当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式
> 
> 两栏、三栏布局，给父元素设置display:flex，子元素要自由伸缩部分flex:1即可
> 
> **flex布局:**
> 
> 以下6个属性设置在容器上:
> 
>  *  flex-direction（决定主轴的方向（即项目的排列方向））
>  *  flex-wrap（定义，如果一条轴线排不下，如何换行）
>  *  flex-flow（是`flex-direction`属性和`flex-wrap`属性的简写形式，默认值为`row nowrap`）
>  *  justify-content（定义了项目在主轴上的对齐方式）可以使盒子均匀分布，效果 [https://www.runoob.com/try/playit.php?f=playcss\_justify-content&preval=space-around][https_www.runoob.com_try_playit.php_f_playcss_justify-content_preval_space-around]
>  *  align-items（定义项目在交叉轴上如何对齐）
>  *  align-content（定义了多根轴线的对齐方式）
> 
> 以下6个属性设置在项目上：
> 
>  *  `order（`定义项目的排列顺序。数值越小，排列越靠前`）`
>  *  `flex-grow（`定义项目的放大比例`）`
>  *  `flex-shrink（`定义了项目的缩小比例`）`
>  *  `flex-basis（`定义了在分配多余空间之前，项目占据的主轴空间`）`
>  *  `flex（flex-grow`, `flex-shrink` 和 `flex-basis`的简写，默认值为`0 1 auto`。后两个属性可选。`）`
>  *  `align-self（`允许单个项目有与其他项目不一样的对齐方式`）`
> 
> [https://www.runoob.com/w3cnote/flex-grammar.html][https_www.runoob.com_w3cnote_flex-grammar.html]

### 未知宽高元素居中 ###

> ** 1、绝对定位 2、margin 3、flex**
> 
> **详见[https://blog.csdn.net/Web\_J/article/details/84592827][https_blog.csdn.net_Web_J_article_details_84592827]**

### flex:1，由什么组成 ###

> flex实际上是flex-grow、flex-shrink和flex-basis三个属性的缩写。
> 
> flex:1 ==> flex:1 1 auto
> 
> **flex-grow**属性指定了flex容器中剩余空间的多少应该被分配给项目。flex-grow设置的值为扩张因子，默认为0，剩余空间将会按照这个权重分别分配给子元素项目
> 
> **flex-shrink**属性指定了flex元素的收缩规则。flex元素仅在默认宽度之和大于容器的时候才会发生收缩。默认属性值为1，所以在空间不够的时候，子项目将会自动缩小。
> 
> **flex-basis**属性指定了flex元素在主轴方向上的初始大小。

### rem、vw/vh、em ###

> **em**
> 
> 继承父节点字体的大小进行计算，**1em等于父元素的字体大小**
> 
> 如果本身有设置字体大小，**1em就等于当前元素的字体大小**
> 
> [https://blog.csdn.net/weixin\_33920401/article/details/88728589][https_blog.csdn.net_weixin_33920401_article_details_88728589]
> 
> **rem**
> 
> rem单位不管如何嵌套，都只相对于浏览器的根元素（html）的font-size，默认font-size:12px，1rem = 12px
> 
> 为了方便计算将 html\{ font-size: 67.5% \}，此时 1 rem = 10px
> 
> 如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可
> 
> 1） webpack loader的形式：px2rem-loader
> 
> npm install px2rem-loader
> 
> 2）webpack中使用postcss plugin
> 
> npm install postcss-loader
> 
> **rem 布局的缺点**
> 
> 在响应式布局中，必须通过js来动态控制根元素font-size的大小
> 
> **vw/vh**
> 
> css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度
> 
> 比如对于iphone6/7 375\*667的分辨率，那么px可以通过如下方式换算成vw：
> 
> 1px = （1/375）\*100 vw
> 
> [postcss-px-to-viewport][]可以自动将px转化成vw
> 
> 百分比布局的缺点是无法精确地计算元素的尺寸

### css动画属性参数 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dlYl9K_size_16_color_FFFFFF_t_70][]

/* 动画代码 */
    @keyframes example {
      from {
       background-color: red;
       transform: scale(1);  /*开始为原始大小*/
      }
      to {
       background-color: yellow;
       transform: scale(1.1); /*放大1.1倍*/
      }
    }
    
    /* 向此元素应用动画效果 */
    div {
      animation-name: example;
      animation-duration: 4s;
    }

### box-sizing中content-box和border-box区别 ###

> content-box：padding和border不被包含在定义的width和height之内。
> 
> 盒子的实际宽度=设置的width+padding+border
> 
> border-box：padding和border被包含在定义的width和height之内。
> 
> 盒子的实际宽度=设置的width（padding和border不会影响实际宽度）

content-box：100\*100![SouthEast][]

border-box：100\*100![6cd6b03f6346703edc72cfb9d310140c.png][]

### 实现三角形 ###

![e0222e5e04f6be594ebf12f0f13922e6.png][]

#triangle-up {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
    }

### Transform,Transition,Animation的区别 ###

> 1、transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行 旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
> 
> 2、transition样式过渡，从一种效果逐渐改变为另一种效果，**只能设置头尾**
> 
> 3、animation动画 由@keyframes来描述每一帧的样式
> 
> vue中的动画过度，定义元素过度开始和离开的状态，[https://cn.vuejs.org/v2/guide/transitions.html][https_cn.vuejs.org_v2_guide_transitions.html]
> 
> [https://www.cnblogs.com/ypppt/p/13363747.html][https_www.cnblogs.com_ypppt_p_13363747.html]

### vue的scoped原理 ###

> vue在编译的时候通过在DOM元素以及css样式上加上唯一标记，实现样式私有化，不污染全局样式。
> 
> vue中的scoped属性的效果主要通过PostCSS转译实现

### position定位 ###

>  *  static（静态定位的元素不受 top、bottom、left 和 right 属性的影响，不会以任何特殊方式定位，而是正常显示在文档流中）
>  *  relative，相对定位，相对于元素在文档中的**初始位置（第一次出现的位置），**元素仍然**占据原来的空间**
>  *  fixed，固定定位，相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。
>  *  absolute，绝对定位，相对于元素**最近的已定位的祖先元素定位，（**即设置了绝对定位或者相对定位的祖先元素。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。脱离文档流**，因此不占空间。**
>  *  sticky，粘性定位，元素根据滚动位置在相对和固定之间切换。起先它会被相对定位，偏移位置到达阈值（特定阈值指的是 top, right, bottom 或 left 之一）后固定定位。
> 
> **sticky注意点：**
> 
> 1.  须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。并且 `top` 和 `bottom` 同时设置时，`top` 生效的优先级高，`left` 和 `right` 同时设置时，`left` 的优先级高。
> 2.  设定为 `position:sticky` 元素的任意父节点的 overflow 属性必须是 visible可见，否则 `position:sticky` 不会生效。这里需要解释一下：
> 
>  *  如果 `position:sticky` 元素的任意父节点定位设置为 `overflow:hidden`，则父容器无法进行滚动，所以 `position:sticky` 元素也不会有滚动然后固定的情况。
>  *  如果 `position:sticky` 元素的任意父节点定位设置为 `position:relative | absolute | fixed`，则元素相对父元素进行定位，而不会相对 viewprot 定位。

### display有哪些值？ ###

>  *  block 转换成块状元素。
>  *  inline 转换成行内元素。
>  *  none 设置元素不可见。
>  *  inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
>  *  list-item 象块类型元素一样显示，并添加样式列表标记。
>  *  table 此元素会作为块级表格来显示
>  *  inherit 规定应该从父元素继承 display 属性的值

### 虚拟像素和物理像素 ###

>  *  **CSS 像素** (虚拟像素)：指的是 CSS 样式代码中使用的逻辑像素，在 CSS 规范中，长度单位可以分为两类，绝对单位以及相对单位。px 是一个相对单位，相对的是设备像素。
>  *  **设备像素** (物理像素)：指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，和屏幕尺寸大小有关。
>  *  **设备独立像素** (逻辑像素)：可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: CSS 像素)，这个点是没有固定大小的，越小越清晰，然后由相关系统转换为物理像素。
> 
> 设备像素比（DPR）: 设备像素比 = 设备像素 / 设备独立像素。
> 
> **当逻辑像素是 1pt 时，在 DPR 为 2 的 设备上显示为 2px 的物理像素**

### 移动端1px 解决方案 ###

> **利用 css 的 伪元素`::after` + `transfrom` 进行缩放**
> 
> **为什么用伪元素？** 因为伪元素`::after`或`::before`是独立于当前元素，可以单独对其缩放而不影响元素本身的缩放

.border-1px-top:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        border-top: 1px solid red;
        transform: scaleY(.5);
        transform-origin: left top;
    }

### mata viewport  ###

> 概念：
> 
> 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
> 
> 移动版viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放
> 
> 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
> 
> <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
> 
>  *  width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
>  *  height：和 width 相对应，指定高度。
>  *  initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
>  *  maximum-scale：允许用户缩放到的最大比例。
>  *  minimum-scale：允许用户缩放到的最小比例。
>  *  user-scalable：用户是否可以手动缩放

### 伪类和伪元素区别 ###

**伪类种类**

![请输入图片描述][9cb95535424f0ca125292ff4bfa1f3f2.png]

**伪元素种类**

![请输入图片描述][5486e17a31e7d6bba201e95959de1dd0.png]

> 1.  伪类本质上是为了**弥补**常规CSS**选择器的不足**，以便获取到更多信息；
> 2.  伪元素本质上是创建了一个**有内容的虚拟容器**；
> 3.  CSS3中伪类和伪元素的语法不同；   伪类  :link  :hover         伪元素  ::before    ::after
> 4.  可以同时使用多个伪类，而只能同时使用一个伪元素；
> 
>      5. 其中伪类和伪元素的根本区别在于：它们是否创造了**新**的元素,,   这个新创造的元素就叫  "伪无素" 。
> 
>          伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。 这个新元素(伪元素)  是某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中.
> 
> 　　  伪类：存在DOM文档中，(无标签,找不到,  只有符合触发条件时才能看到 ),  逻辑上存在但在文档树中却无须标识的“幽灵”分类。
> 
> 　  6.  因为伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾

### link和@import的区别 ###

> **1.从属关系区别**  
> `@import`是CSS提供的语法规则，只有导入样式表的作用，`link`是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS，相对连接属性等。
> 
> **2.加载顺序区别**  
> 加载页面时，`link`标签引入的CSS被同时加载; `@import`引入的CSS将在页面加载完毕后被加载。
> 
> **3.兼容性区别**  
> `@import`是CSS2.1才有的语法，故只可在IE5 +才能识别; `link`标签作为HTML元素，不存在兼容性问题。
> 
> **4.DOM性可控性，区别**  
> 可以通过JS操作DOM，插入`link`标签来改变样式;由于DOM方法是基于文档的，无法使用`@import`的方式插入样式。
> 
> **5.权重区别（该项有争议）**  
> `link`引入的样式权重大于`@import`引入的样式。

### 清除浮动的方式，优缺点 ###

常用的有两种：

**一、父级div定义overflow:hidden（原理是利用BFC）**

**优点：**简单，代码少，浏览器支持好

**缺点：**不能和position配合使用，因为超出的尺寸的会被隐藏

**二、父级div定义伪类:after和zoom(用于非IE浏览器)（原理是通过清除伪元素的浮动，达到撑起父元素高度的目的）**

.clearfix {*zoom: 1;}
    .clearfix:before,.clearfix:after {display: table;line-height: 0;content: "";}
    .clearfix:after {clear: both;}

**优点：**浏览器支持好

**缺点：**无明显缺点

### BFC，哪些样式会引起格式化上下文？ ###

> ** 那些元素会具有BFC的条件**  
> display 属性为 block, list-item, table 的元素，会产生BFC.  
> 大家有么有发现这个三个都是用来布局最为合理的元素，因为他们就是用来可视化布局。  
> 注意其他的，display属性，比如 line 等等，他们创建的是 IFC ，我们暂且不研究。  
> 这个BFC 有着具体的布局特性：   
> 有宽度和高度 ， 有 外边距margin  有内边距padding 有边框 border。  
> **什么情况下可以让元素产生BFC**  
> 以上盒子具有BFC条件了，就是说有资质了，但是怎样触发才会产生BFC，从而创造这个封闭的环境呢？   
> 同样，要给这些元素添加如下属性就可以触发BFC。
> 
> 1.  \-float属性不为none
> 2.  \-position为absolute或fixed
> 3.  \-display为inline-block, table-cell, table-caption, flex, inline-flex
> 4.  \-overflow不为visible。
> 
> [https://blog.csdn.net/weixin\_44722346/article/details/102637266][https_blog.csdn.net_weixin_44722346_article_details_102637266]

### $（“＃ID”）和document.getElementById（“ID”）有什么区别？ ###

> document.getElementById（）返回的是DOM对象，而$（）返回的是jQuery的的的对象（通过jQuery的的的包装DOM对象后产生的对象和jQuery的的对象是jQuery的的的独有的，其可以使用的的jQuery的里的方法）虽然jQuery的的的对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用的的jQuery的里的方法。

> **1，DOM对象转的jQuery的对象**   
> 普通的dom对象一般可以通过$（）转换成的jQuery的对象。   
>   
> 如：$（的的document.getElementById（“味精”））   
> 返回的就是jQuery的的对象，可以使用的jQuery的的方法   
>   
> **2，jQuery的的对象转DOM对象**   
> 由于jQuery的的对象本身是一个集合所以如果jQuery的的对象要转换为DOM的对象则必须取出其中的某一项，一般可通过索引取出。 
> 
> var v = $("\#v"); //jQuery 对象  
> var v1 = v\[0\]; //DOM 对象

### 块级元素和行内元素有什么区别？ ###

> 1.  块级元素会独占一行，其宽度自动填满其父元素宽度，行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容 而变化
> 2.  块级元素可以设置 width, height属性，行内元素设置width,  height无效。【注意：块级元素即使设置了宽度，仍然是独占一行的】
> 3.  块级元素可以设置margin 和 padding.  行内元素的水平方向的padding和margin 都产生边距效果，但是竖直方向的padding和margin 都不会产生边距效果。 **（水平方向有效，竖直方向无效）**

### vertical-align 理解 ###

> 用来设置垂直对齐方式，所有垂直对齐的元素都会影响行高
> 
> 应用于: 行内元素、替换元素、表单元格
> 
>  *  vertical-align:baseline(元素的基线与父元素的基线对齐)
>  *  vertical-align:sub(降低元素的基线到父元素合适的下标位置)
>  *  vertical-align:super(升高元素的基线到父元素合适的上标位置)
>  *  vertical-align:bottom(把对齐的子元素的底端与行框底端对齐)
>  *  vertical-align:text-bottom(把元素的底端与父元素内容区域的底端对齐)
>  *  vertical-align:top(把对齐的子元素的顶端与行框顶端对齐)
>  *  vertical-align:text-top(把元素的顶端与父元素内容区域的顶端对齐)
>  *  vertical-align:middle(元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐)
>  *  vertical-align:(+-n)px(元素相对于基线上下偏移npx)
>  *  vertical-align:x%(相对于元素的line-height值)
>  *  vertical-align:inherit(从父元素继承vertical-align属性的值)
> 
> 花里胡哨，懒得看了，这篇文章讲的很清楚[https://www.jianshu.com/p/71a03b8f6eb6][https_www.jianshu.com_p_71a03b8f6eb6]

###  sass和less的区别？ ###

> 1.  编译环境不一样
> 2.  变量符不一样，Less是@，而Scss是$
> 3.  输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded
> 4.  Sass支持条件语句，可以使用if\{\}else\{\},for\{\}循环等等。而Less不支持。
> 5.  引用外部CSS文件
> 6.  Sass和Less的工具库不同
> 
> [https://www.cnblogs.com/wangpenghui522/p/5467560.html][https_www.cnblogs.com_wangpenghui522_p_5467560.html]

[https_www.runoob.com_try_playit.php_f_playcss_justify-content_preval_space-around]: https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=space-around
[https_www.runoob.com_w3cnote_flex-grammar.html]: https://www.runoob.com/w3cnote/flex-grammar.html
[https_blog.csdn.net_Web_J_article_details_84592827]: https://blog.csdn.net/Web_J/article/details/84592827
[https_blog.csdn.net_weixin_33920401_article_details_88728589]: https://blog.csdn.net/weixin_33920401/article/details/88728589
[postcss-px-to-viewport]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fevrone%2Fpostcss-px-to-viewport
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dlYl9K_size_16_color_FFFFFF_t_70]: /images/20221022/e399cc6d0a294cd69d27da54c5fb7af7.png
[SouthEast]: /images/20221022/8d23f688f6e04397bba0192d43110b1b.png
[6cd6b03f6346703edc72cfb9d310140c.png]: /images/20221022/1fd31618a49643b2b7a14cdd2a30f574.png
[e0222e5e04f6be594ebf12f0f13922e6.png]: /images/20221022/7b50c7cba08f4ef8a91687db7e392eca.png
[https_cn.vuejs.org_v2_guide_transitions.html]: https://cn.vuejs.org/v2/guide/transitions.html
[https_www.cnblogs.com_ypppt_p_13363747.html]: https://www.cnblogs.com/ypppt/p/13363747.html
[9cb95535424f0ca125292ff4bfa1f3f2.png]: /images/20221022/2e2583f7779d42fb8f841fdab2ac225b.png
[5486e17a31e7d6bba201e95959de1dd0.png]: /images/20221022/c8526c70e1414a56b5400640dcd62b90.png
[https_blog.csdn.net_weixin_44722346_article_details_102637266]: https://blog.csdn.net/weixin_44722346/article/details/102637266
[https_www.jianshu.com_p_71a03b8f6eb6]: https://www.jianshu.com/p/71a03b8f6eb6
[https_www.cnblogs.com_wangpenghui522_p_5467560.html]: https://www.cnblogs.com/wangpenghui522/p/5467560.html