css相关面试知识点

最新推荐文章于 2024-05-27 00:00:00 发布

邱先生~

最新推荐文章于 2024-05-27 00:00:00 发布

阅读量364

点赞数 1

分类专栏：常见问题文章标签： css 盒模型 BFC rem

本文链接：https://blog.csdn.net/weixin_43932245/article/details/106780901

版权

常见问题专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、盒子水平垂直居中的方案
 2、盒模型
 3、经典布局-圣杯布局
 4、经典布局-双飞翼布局
 5、使用css，让元素div消失在视野中
 6、z-index的工作原理及适用范围
 7、css 移动端自适应一个正方形
 8、如何做到rem自适应
 9、positon都有哪些属性？
10、如何清除浮动
 11、什么是BFC 、哪些地方用到了BFC

1、盒子水平垂直居中的方案

答题方式：这种需求在我项目中是非常常见的，刚开始的话我只用的xxxx，然后后期随着新技术xx的兴起，参考了一些资料，我开始用xxxx，虽然兼容性一般但确实也是一种很好的处理方式。

先写下基本的样式和页面

<style>
html,body{
 height: 100%;
 overflow: hidden;
}
.box{
 box-sizing: border-box;
 width: 100px;
 height: 50px;
 line-height: 48px;
 text-align: center;
 font-size: 16px;
 border: 1px solid lightblue;
 background: lightcyan;
}
</style>

<body>
  <div class="box">
    查看
  </div>
</body>

1、定位

<style>
body{
 position: relative;
}  
.box{
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -25px;
 margin-left: -50px;
}
</style>

top left 为50% 是box左上角相对父元素所以要往上和左移动盒子一半的位置才是相对居中，也就是为什么要写margin处理

缺点：这种方式的限制是必须知道元素的具体宽高才行

2、定位

<style>
body{
  position: relative;
}  
.box{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
</style>

这种方式只是不需要考虑宽高，不需要用margin来取中计算，但是一定要有宽高才行，没有任意一方定位后盒子相对父元素都是100%

3、定位

<style>
body{
  position: relative;
}  
.box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
</style>

css3的transform实现 ,这种方式不需要考虑元素的宽高，缺点就是兼容性问题

4、flex

<style>
body{
   display: flex;
   justify-content: center;
   align-items: center;
 }
</style>

css3 flex 让子元素水平轴和垂直轴方面居中，无需考虑子元素的宽高缺点就是兼容性问题

5、display:table-cell 不常用

<style>
body{
 display: table-cell;
 vertical-align: middle;
 text-align: center;
 background: lightcoral;
 width:500px;
 height: 500px;
}
.box{
 display: inline-block;
}
</style>

本身是控制文本的居中要是盒子的话可以设置为inline / inline-block

缺点很明显需要父元素有固定宽高需要子元素为行内/行内块但子元素可以不设置宽高

2、盒模型

标准盒模型

box-sizing:content-box 这就是标准盒模型
盒子大小：content+padding+border
我们设置的width、height是content，要是添加了padding和border的话需要重新定义content的值，保证盒子的大小是始终不变的，这种方式较为麻烦。

在这里插入图片描述

ie（怪异）盒模型

后来css3中给我们提供了一个新的值 box-sizing:border-box 这也是我们所谓的ie(怪异)盒模型

盒子大小：content（包括 content+padding+border）

这种盒模型有种好处就是我们写的width和height 是盒子的大小并不单纯是content的大小，

content=content+padding+border ,所以说不管怎么调padding和border 它会自己通过缩放内容来使盒子的大小始终是不变的

现在包括各大ui组件 boostrap element-ui的源码里面公共样式大部分都是默认采用border-box的
在这里插入图片描述

3、经典布局-圣杯布局

圣杯布局、双飞翼布局 ===》左右固定，中间自适应也都是通过浮动+负margin

<style>
html,body{
  height: 100%;
  overflow: hidden;
}
.container{
  height: 100%;
  padding: 0 200px; 给左右留出空间
}
.left,.right{
  width: 200px;
  min-height: 200px;
  background: lightblue;
}
.center{
  width: 100%;
  min-height: 400px;
  background: lightcoral;
}
.left,.right,.center{
  float: left;
}
.left{
  margin-left: -100%; 
  position: relative;
  left: -200px;
}
.right{
  margin-right: -200px;
}

</style>
<div class="container clearfix">
  <div class="center"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

4、经典布局–双飞翼布局

圣杯布局、双飞翼布局 ===》左右固定，中间自适应也都是通过浮动+负margin

<style>
html,body{
  height: 100%;
  overflow: hidden;
}
.left,.right,.container{
  float: left;
}
.container{
  width: 100%;
}
.left,.right{
  width: 200px;
  min-height: 200px;
  background: lightblue;
}
.container .center{
  margin: 0 200px;
  min-height: 400px;
  background: lightgreen
}
.left{
  margin-left:-100%; 
}
.right{
  margin-left:-200px;
}
</style>
<body class="clearfix">
   <div class="container">
     <div class="center"></div>
   </div>
   <div class="left"></div>
   <div class="right"></div>
</body>

5、使用css，让元素div消失在视野中

position:absolute/relative/fixed + 方位 top/bottom/left/right: -9999px
display:none
visibility:hidden
width:0 + overflow:hidden
height:0 + overflow:hidden
margin-top/bottom/left/right:-9999px;
background-color:transparent
opacity:0
transform: translateX(-9999px)/translateY(-9999px)/translate(-9999px,-9999px)
transform: scale(0)

6、z-index的工作原理及适用范围

z-index这个属性控制着元素在z轴上的表现形式。
适用范围:仅适用于定位元素，即拥有relative,absolute,fixed属性的position元素。
堆叠顺序是当前元素位于z轴上的值，数值越大说明元素的堆叠1顺序越高，越靠近屏幕。
未定义时，后来居上，未定义z-index的属性，元素的堆叠顺序基于它所在的文档树。默认情况下，后来的元素的z-index的值越大。

7、css 移动端自适应一个正方形

1、padding

在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding 的百分比数值计算。按照规定，margin, padding 的百分比数值是相对父元素的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了

.reat {
  background-color: lightgreen;
  width: 20%;
  height: 0; 高度等于0 即使有内容也不会撑开
  padding-bottom: 20%;
}
<div class="reat"></div>

但要注意，仅仅设置padding-bottom是不够的，若向容器添加内容，内容会占据一定高度，为了解决这个问题，需要设置height: 0。

优点：简洁明了，且兼容性好。

缺点：会导致在元素上设置的max-width属性失效（max-height不收缩）。

2、vw

vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。

.reat{
   width: 20vw;
   height: 20vw;
   background-color: lightgreen;
}

height不能设置成vh，移动端是长方形的 20vw != 20vh，宽高都设置成vw就好了

优点：简洁方便。

缺点：浏览器兼容不好。

3、利用伪元素的 margin(padding)-top 撑开容器

伪类都是相对父元素的宽高的本身margin/padding的百分比就是相对父元素的宽度计算的，所以设置100% 就是跟父元素的宽度是一样的都是相对于页面50% 就是一个正方形了

<style>
#squarre{
 width:500px;    
 background:lightblue;  
}
#squarre:after{
 content:'';
 display: block;
 padding-top: 100%;
}
</style>
<div id="squarre"></div>

如果使用margin来实现的话需要出发父元素的BFC:设置overflow:hidden。，因为会出现垂直方向上方的边距合并问题

<style>
#squarre{
 width:500px;    
 background:lightblue;  
 overflow:hidden;
}
#squarre:after{
 content:'';
 display: block;
 margin-top: 100%;
}
</style>
<div id="squarre"></div>

4、利用rem布局

动态设置根元素的font-size，然后利用rem对元素的width、height进行布局

总结:

vw和vh相对于视口的单位，1vw就相当于1%视口的宽度
margin、padding的百分比计算是相对于父元素的宽度、宽度、宽度！
伪类继承于实现伪类的本身元素，就相当于伪类的父元素

8、如何做到rem自适应

em相对与父元素 1em就是父元素的fontsize大小

rem 相对于根元素的大小 1rem = 16px ，动态设置根元素fontsize就可以达到rem动态自适应

如果想要不管屏幕大小始终保持 1rem = 100px，那么就是让根元素fontsize始终是100px，如果设计图是750px，手机调试是375px，那么我们需要保持在750px下为100px，在375px的时候就应该是一半50px

得出：font-size:（页面宽度/设计图宽度）* 100 ==> (375/750)*100 = 50px

如果手机是750px，那么 (750/750)*100 = 100px;

initSize();
function initSize(setwidth){
  var win = document.body.offsetWidth;
  var rem = (win * 100) / 750;
  document.documentElement.style.fontSize  = rem+'px';
}
window.onresize = initSize

9、positon都有哪些属性？

在这里插入图片描述

static 默认值 - - - 不脱离文档流，top，right，bottom，left等属性不生效。（可以快速取消定位让top，right，bottom，left等无效）
relative 相对定位- - - 不脱离文档流，左右 margin为auto仍然有效，元素偏移前位置
absolute 绝对定位 - - - 脱离文档流,左右margin为auto将会失效
fixed 固定定位 - - - 脱离文档流
sticky 粘性定位 - - - 相当于relative和fixed的结合，它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
- 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
- 父元素的高度不能低于sticky元素的高度
- sticky元素仅在其父元素内生效，滚动超过父元素就会变成relative
inherit - - - 规定应该从父元素继承 position 属性的值。
initial - - - 设置positon的值为默认值(static) ,有了static为什么还会存在此属性，不是多此一举？,initial 关键字可用于任何 HTML 元素上的任何 CSS 属性，不是postion特有的
unset设置positon的值为不设置
- 如果该属性的默认属性是继承属性(例如字体相关的默认属性基本都是继承)，该值等同于 inherit
- 如果该属性的默认属性不是继承属性(例如pisition的默认属性为static)，该值等同于 initial

10、如何清除浮动

clear:both

<style>
.clearfix:after{
    /*START 真正起到清除浮动的代码*/
    content: '';
    display: block;
    clear: both;
    /*END 真正起到清除浮动的代码*/
    height:0;
}
.clearfix{display: inline-block;} /* for IE/Mac */
</style>
<div class="clearfix">
    <div style="float: left;">clear:both ;son div</div>
</div>

父元素 overflow:hidden

必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。

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

父元素固定height

只适合高度固定的布局，要给出精确的高度，其实没有清除浮动，只是让浮动不影响到其他元素。

11、什么是BFC 、哪些地方用到了BFC

BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响

可以通过一些条件触发BFC，从而实现布局上的需求或解决一些问题

BFC的触发条件

1、根元素（<html>）
2、float值非none
3、overflow值非visible
4、display值为inline-block、table-cell、table-caption、flex、inline-flex
5、position值为absolute、fixed

BFC的特性

1、属于同一个BFC的两个相邻容器的上下margin会重叠（重点）
2、计算BFC高度时浮动元素也参于计算（重点）
3、BFC的区域不会与浮动容器发生重叠（重点）
4、BFC内的容器在垂直方向依次排列
5、元素的margin-left与其包含块的border-left相接触
6、BFC是独立容器，容器内部元素不会影响容器外部元素

属于同一个BFC的两个相邻容器的上下margin会重叠

<style type="text/css">
.top {
  width: 200px;
  height: 200px;
  background: red;
  margin-bottom: 40px;
}

.bottom {
  width: 200px;
  height: 200px;
  background: blue;
  margin-top: 60px;
}
</style>
<div class="top"></div>
<div class="bottom"></div>

上面的情况，top、bottom元素的间隔不是100px，而是60px，两个元素的外边距重叠并且取了较大的值。

原因：
此时红色块和蓝色块属于同一个BFC，即根元素（）。BFC的特性1规定 “属于同一个BFC的两个相邻容器的上下margin会重叠”，故两者上下边距发生重叠。

解决：
可以设置任意一方为 display: inline-block;，让任意一方触发BFC，那么彼此就不处于同一个BFC了，彼此之前布局相互不影响。

计算BFC高度时浮动元素也参于计算

<style>
.outside {
  border: 10px solid blue;
}

.inside {
  width: 200px;
  height: 200px;
  background: yellowgreen;
  float: left;
}
</style>
<div class="outside">
	<div class="inside"></div>
</div>

在这里插入图片描述

当父元素.outside没有设置高度且子元素.inside都浮动时，父元素.outside会出现高度塌陷。
原因：
子元素.inside设置浮动后脱离文档流，而父元素.outside又没有设置高度，故父元素.outside会出现高度塌陷。

解决:
父元素设置 overflow: hidden;,使得父元素.outside触发了BFC（见BFC触发条件3），而BFC特性规定“计算BFC高度时浮动元素也参于计算”，此时子元素.inside虽然设置了浮动，但其高度仍计算至父元素内，从而解决了高度塌陷问题。

BFC的区域不会与浮动容器发生重叠

<style type="text/css">
    .left{
        width: 100px;
        height: 200px;
        background: yellowgreen;
        float: left;
    }
    .right{
        height: 300px;
        background: blue;
    }
</style>
<div class="left"></div>
<div class="right"></div>

在这里插入图片描述

正常情况下，左侧元素.left浮动时，会与右侧元素.right发生重叠，不能实现自适应两栏效果。

原因：
左侧元素浮动，脱离文档流。

.right{
    height: 300px;
    background: blue;
    overflow: hidden;
}

解决
给右侧元素.right添加声明overflow: hidden;，左右侧元素重叠消失，实现自适应两栏效果。使得右侧元素触发了BFC（见BFC触发条件3），而BFC特性规定“BFC的区域不会与浮动容器发生重叠”，从而解决了重叠问题，实现自适应两栏效果。

BFC功能总结

1、可以利用BFC解决两个相邻元素的上下margin重叠问题；
2、可以利用BFC解决高度塌陷问题；
3、可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）。

邱先生~

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css相关面试知识点

1、盒子水平垂直居中的方案2、盒模型3、经典布局-圣杯布局4、经典布局-双飞翼布局5、使用css，让元素div消失在视野中6、z-index的工作原理及适用范围7、css 移动端自适应一个正方形8、如何做到rem自适应9、positon都有哪些属性？10、如何清除浮动11、什么是BFC 、哪些地方用到了BFC1、盒子水平垂直居中的方案这种需求在我项目中是非常常见的，刚开始的话我只用的xxxx，然后后期随着新技术xx的兴起，参考了一些资料，我开始用xxxx，虽然兼容性一般但确实也.
复制链接

扫一扫

专栏目录