前端面试-CSS

进击的小喵
192 阅读9分钟

1、说一下css盒模型

CSS3 中的盒模型有以下两种：标准盒模型、IE（替代）盒模型。
css盒模型是由 content + padding + border + margin 构成
其大小是由 content + padding + border 决定的

区别：with/height的计算方式不同
标准盒模型：只包含 content 。IE（替代）盒模型：content + padding + border 。

标准盒模型

image.png

IE盒模型

image.png

2、实现下面的布局（浮动、flex、display:inlie-block、grid、table）

假设子元素宽高均为100px
1. 父盒子：overflow:hiden;
   子盒子：float:left;margin-right:10px;
   
2. 父盒子：display:flex;
   子盒子：margin-right:10px
   
3. 父：display:inlie-block
   子：margin-right:10px
   or
   父：display:flex;justify-content:speace-between；（不指定间距两端对齐）

4. 父：dispaly:grid;
      grid-template-columns: repeat(3, 33.33%);(指定列宽，3为子项目数量，33.33%为子项目宽度)
      grid-template-rows: repeat(3, 33.33%);（指定行高，33.33%可写成像素值）
      grid-column-gap: 10px;（指定列间距）
      grid-row-gap: 10px;（指定行间距）
      
   grid布局缺点：使用起来不够灵活，代码量也相对较多；
 
5. 父：display:table;
   子：display:table-cell;(子元素自动按照表格形式从左向右平铺)
      padding-right:10px;(table布局中margin不生效，间距需用padding代替)

ps：从性能角度，尽量避免使用函数式css
ps：table布局少用，
1：table在页面完全加载后才显示；
2：容易引起重排和重绘；
3：非表格内容用table来装，不符合标签语义化要求，不利于SEO

3、实现一个2侧宽度固定，中间自适应的布局（双飞翼布局、圣杯布局）

双飞翼布局、圣杯布局考点(经典3栏布局)： 1、实现2侧宽度固定，中间宽度自适应。 2、中间的div写在第一个，页面渲染按照html的书写顺序，可以保证中间的div先渲染出来 3、负margin的应用,百分比margin参考父元素的宽度计算

圣杯布局css

<div class="wrap">
    <div id="header">header</div> 
    <div id="content">
        <div id="middle"> middle </div> 
        <div id="left">left</div> 
        <div id="right">right</div> 
    </div> 
    <div id="footer">footer</div> 
</div>

#header,#footer{
    height: 50px;
    width: 100%;
    background: grey; 
} 

#middle,#left,#right{ 
    float: left;
} 

#content{
    overflow: hidden;
    padding: 0 200px;
} 

#left,#right{ 
    width: 200px; 
    height: 200px;
    background: pink; 
    position:relative;//为两侧元素定位到父元素的头部和尾部
} 

#left{
    margin-left:-100% ;
    left: -200px;
}
#right{ 
    margin-left: -200px;
    right: -200px;
}

#middle{
    width: 100%;
    height: 200px;
    background: yellowgreen; 
}

双飞翼布局css

<div class="wrap"> 
    <div id="header">header</div> 
    <div id="content"> 
        <div id="middle"> 
            <div class="middle-inner"> middle </div>  //html代码区别
        </div> 
        <div id="left">left</div> 
        <div id="right">right</div> 
    </div> 
    <div id="footer">footer</div> 
</div>

#middle,#left,#right{ 
    float: left;
} 

#content{
    overflow: hidden;
} 

#middle{
    background: pink;
    width: 100%; 
    height:200px; 
} 

#left,#right{
    width: 200px;
    height: 200px;
    background: green;
} 

#left{
    margin-left: -100%; 
}

#right{ 
    margin-left: -200px;
} 

.middle-inner{ 
    margin: 0 200px; 
}

4、css优先级

一般情况下权重依次为：

  • ！important
  • 行内样式
  • id选择器
  • 类选择器 (class 如.example，属性选择器 如[type="radio"]、伪类 如:hover）
  • 类型选择器（标签 如div，伪元素 如::before）
  • * 通配符

计算权重：

优先级是由 `A` 、`B`、`C`、`D` 的值来决定的，其中它们的值计算规则如下：
1.  如果存在内联样式，那么 `A = 1`, 否则 `A = 0`;
2.  `B` 的值等于 `ID选择器` 出现的次数;
3.  `C` 的值等于 `类选择器` 和 `属性选择器` 和 `伪类` 出现的总次数;
4.  `D` 的值等于 `标签选择器` 和 `伪元素` 出现的总次数 。

5、伪类和伪元素有什么区别？

伪类伪元素都是css选择器，以1个冒号连接。

伪类：
为选中的dom元素添加样式,元素与关键词以1个冒号连接；
1个选择器中同时一起写多个伪类。
'https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes'

a:hover{

    background: red;
}
li:first-child{
    margin-top: 0;
}

伪元素：
为选中的dom元素的子元素（虚拟子元素、或文本元素），添加样式；
元素与关键词以2个冒号连接（用以区分伪类与伪元素，但写1个冒号，浏览器也兼容）；
一个选择器中只能使用一个伪元素；
（实际写2个也可以正常运作，比如一个div写一个before伪类写一个after伪类）。
'https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements'

div::before{
    content:"";
    display:block;
    
}
p::first-line {
    color：#f00;
}

6、css如何实现隔行变色（nth-child）

li:nth-child(2n+1){
    background: #f00;
}

css选择器：
'https://www.w3school.com.cn/cssref/css_selectors.ASP'

7、什么是BFC

BFC 即块级格式上下文。

👉🏻了解视觉格式化模型

根据盒模型可知，每个元素都被定义为一个矩形盒子，然而盒子的布局会受到尺寸，定位，盒子的子元素或兄弟元素，视口的尺寸等因素决定，所以这里有一个浏览器计算的过程，计算的规则就是由一个叫做视觉格式化模型的东西所定义的，BFC 就是来自这个概念，它是 CSS 视觉渲染的一部分，用于决定块级盒的布局及浮动相互影响范围的一个区域。

BFC 的特性：

  • BFC 内部的块级盒会在垂直方向上一个接一个排列。 ①

  • 同一个 BFC 下的相邻块级元素可能发生margin外边距折叠，创建新的 BFC 可以避免的外边距折叠 ②

  • 每个元素的外边距盒（margin box）的左边与包含块边框盒（border box）的左边相接触（从右向左的格式化，则相反），即使存在浮动也是如此 ③

  • 浮动盒的区域不会和 BFC 重叠，即：每一个BFC区域都是独立隔绝的,互不影响。 ④

  • 计算 BFC 的高度时，BFC中浮动元素也会参与计算，即：创建BFC可以清除浮动对相邻元素的影响 ⑤

利用BFC特性可以解决以下问题：

  • 可以解决margin重叠
  • 可以解决浮动高度塌陷及对相邻元素的影响。

常见的创建 BFC 的方式：

  • 根元素（<html>）
  • 浮动元素（元素的 float 不是 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • 行内块元素（元素的 display 为 inline-block）
  • 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
  • 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
  • 匿名表格单元格元素（元素的 display 为 table、``table-row、 table-row-group、``table-header-group、``table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
  • overflow 计算值(Computed)不为 visible 的块元素，即：overflow:hidden/auto/scroll
  • 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
  • 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）

8 水平垂直居中多种实现方式

  1. 利用绝对定位，设置 left: 50%  和 top: 50%  现将子元素左上角移到父元素中心位置，然后再通过 translate  来调整子元素的中心点到父元素的中心。该方法可以不定宽高。
.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
复制代码
  1. 利用绝对定位，子元素所有方向都为 0 ，将 margin  设置为 auto ，由于宽高固定，对应方向实现平分，该方法必须盒子有宽高。
.father {
  position: relative;
}
.son {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  height: 100px;
  width: 100px;
}
复制代码
  1. 利用绝对定位，设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置，然后再通过 margin-left  和 margin-top  以子元素自己的一半宽高进行负值赋值。该方法必须定宽高。
.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
}
复制代码
  1. 利用 flex ，最经典最方便的一种了，不用解释，定不定宽高无所谓的。
.father {
  display: flex;
  justify-content: center;
  align-items: center;
}
复制代码

其实还有很多方法，比如 display: grid  或 display: table-cell  来做，有兴趣点击下面这篇文章可以了解下：
面试官：你能实现多少种水平垂直居中的布局（定宽高和不定宽高）。

4、如何实现移动设备1px边线（2种方案以上）

8、display、float、postion的关系

9、购物车在页面右上角的位置，如何实现点击加入购物车，从商品位置有个点移动到购物车的特效？

10、实现一个垂直居中的布局

11、如何实现响应式布局，rem、em的关系和区别，flex.js的原理

13、清除浮动的方法有哪些

14、列出CSS代码的7个优化准则。

15、CSS3如何实现圆角、阴影效果？

16、boxsizing属性值有哪些，各代表什么含义？

17、.box{float: left;margin: 10px;}前面样式有何兼容性问题？如何解决？双倍maring，解决办法display:inline;

18、写出中英文强制换行的代码，以及文字超长显示的代码。

19、写出文字超出一行末尾以省略号显示

20、请简述如何通过CSS实现不同分辨率的手机适配，要求不可通过width=100%和留白的方式实现。

21、实现布局 header,content,footer，上中下布局；当content 超出窗口可视区，不显示footer；当content 没超出可视区时，固定footer 在最下面

22、css 如何实现元素a距离屏幕10px，高度无论宽度怎么改变都是其.5

23、 box-sizing的应用场景

24、display:none和visibility：hidden的区别

display:none;
隐藏元素及其子元素;
且被隐藏的元素占据的空间也会消失;
子元素单独设置disply:block，无效；
使用display隐藏的定时器，被隐藏后，计时中断。

visibility：hidden;
隐藏元素及其子元素；
被隐藏的元素在页面上仍占据空间，仅内容不显示；
子元素单独设置visibility：visible;可使子元素正常显示；
使用visibility隐藏计时器，计时器仍继续计时，不会被隐藏中断计时；

CSS3的transition支持visibility属性，但是并不支持display；
由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

25、实现一个花括号

    <div class="t"></div>    
    <div class="d"></div>
    
    .t,.d {
        width: 20px;
        height: 100px;
        border-left: 1px solid #333;
        position: relative;            
        margin-left: 50px;       
    }       
    .t {           
        border-bottom-left-radius: 10px;   
    }        
    .d {         
        border-top-left-radius: 10px;     
    }        
    .t::before,.d::before {      
        content:"";           
        position: absolute;   
        left: -21px;          
        width: 100%;           
        height: 20px;          
        border-right: 1px solid #333;      
    }       
    .t::before  {        
        border-top-right-radius: 10px;      
        top: -20px;       
    }       
    .d::before  {     
        border-bottom-right-radius: 10px;       
        bottom: -20px;     
    }
avatar
文章
阅读
粉丝