css面试题

最新推荐文章于 2022-05-31 00:07:09 发布

WinterWang0207

最新推荐文章于 2022-05-31 00:07:09 发布

阅读量178

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_38404899/article/details/103592318

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

BFC是什么？

BFC，块状格式化上下文，其实是一个隔离的独立盒子（容器），他有以下特性：

容器里面的子元素不会影响到外面的元素，容器外的元素也不会影响到里面
BFC容器会一个挨着一个排列
计算BFC的高度时，浮动元素也参与计算
BFC的区域不会与float box重叠

怎样触发（创建）一个BFC？

boby的根节点
浮动的元素：float除了none以外
绝对定位的元素：position（absolute、fixed）
display为inline-block、table-cells、flex、inline-flex、flow-root（没有副作用的方案，但需注意兼容性）、grid、inline-grid等
overflow除了visible之外

怎么让一个 div 水平垂直居中

<div class="parent">
  <div class="child"></div>
</div>

1

div.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

2

div.parent {
    position: relative; 
}
div.child {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
}
/* 或者 */
div.child {
    width: 50px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -5px;
}
/* 或 */
div.child {
    width: 50px;
    height: 10px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

3

div.parent {
    display: grid;
}
div.child {
    justify-self: center;
    align-self: center;
}

4

div.parent{
  display:flex;
}
div.child{
  margin:auto;
}

分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景：

若父节点元素应用了opacity:0和display:none，其子孙元素都会看不见；

而若父节点元素应用visibility:hidden，子孙元素应用visibility:visible，那么其就会毫无意外的显现出来。

display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击，

visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击

opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

已知如下代码，如何修改才能让图片宽度为 300px ？注意下面代码不可修改：

<img src="1.jpg" style="width:480px!important;”>



内联+!important

//max-width可以覆盖!important
<img src="1.jpg" style="width:480px!important; max-width: 300px">


//缩放0.625倍
<img src="1.jpg" style="width:480px!important; transform: scale(0.625, 1);" >


//覆盖
<img src="1.jpg" style="width:480px!important; width:300px!important;">


//js
document.getElementsByTagName("img")[0].setAttribute("style","width:300px!important;")


//怪异盒
box-sizing: border-box;
padding: 0 90px;