码迷,mamicode.com
首页 > Web开发 > 详细

HTML&CSS面试高频考点(二)

时间:2020-06-27 17:28:19      阅读:87      评论:0      收藏:0      [点我收藏+]

标签:计算   必须   设置   tran   ext   level   tps   子项目   方式   

HTML&CSS面试高频考点(一)    

6. W3C盒模型与怪异盒模型

怪异盒模型下盒子的大小=width(content + border + padding) + margin,即真实大小

*参考标准模式与兼容模式的区别,兼容模式下为怪异盒模型。

*注意box-sizing可以改变盒模型(box-sizing:border-box即为怪异盒模型)。

7. 水平垂直居中的方法

(1)定宽居中

1. absolute + 负margin

//父元素
position: relative;
//子元素
position: absolute;
top: 50%;
left: 50%;
//margin设置自身一半的距离
margin-top: -50px;
margin-left: -50px;

2. absolute + margin: auto

//父元素
position: relative;
//子元素
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

 3. absolute + calc

//父元素
position: relative;
//子元素
position: absolute;
//减去自身一半的宽高
top: calc(50% - 50px);
left: calc(50% - 50px);

 *calc() 函数用于动态计算长度值。

 4. min-height: 100vh + flex + margin:auto

main{
  min-height: 100vh;
   /* vh相对于视窗的高度,视窗高度是100vh */
  /* “视区”所指为浏览器内部的可视区域大小,
  不包含任务栏标题栏以及底部工具栏的浏览器区域大小。 */
  display: flex;
}
div{
  margin: auto;
}

(2)不定宽居中

1. absolute + transform

//父元素
position: relative;
//子元素
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

2. line-height

//父元素
.wp {
    text-align: center;
    line-height: 300px;
}
//子元素
.box { display: inline-block; vertical-align: middle; line-height: inherit; text-align: left; }

3. flex布局

display: flex;//flex布局
justify-content: center;//使子项目水平居中
align-items: center;//使子项目垂直居中

4. table-cell布局

因为table-cell相当与表格的td,无法设置宽和高,所以嵌套一层,嵌套一层必须设置display: inline-block

<div class="box">
    <div class="content">
        <div class="inner">
        </div>
    </div>
</div>

.box {
    //只有这里可以设置宽高
    display: table;  //这是嵌套的一层,会被table-cell覆盖
}
.content {
    display: table-cell;
    vertical-align: middle;//使子元素垂直居中
    text-align: center;//使子元素水平居中
}
.inner {
    display: inline-block;  //子元素
}

8. BFC

 前文链接:点击这里

BFC:Block formatting context(块级格式化上下文),是一个独立的渲染区域,只有Block-level box参与,与外部区域毫不相干。

  • block-level box:display属性为block, list-item, table的元素。
  • inline-level box:display属性为inline, inline-box, inline-table的元素。

(1)BFC的布局规则

  • 内部box在垂直方向一个个放置;
  • 同一个BFC的两个相邻box的margin会发生重叠;
  • 每个盒子的margin左边与包含块的border左边相接触,即使存在浮动也是如此;
  • BFC区域不会和float box重叠;
  • 计算BFC高度时,浮动元素也参与计算。

(2)开启BFC的方法

  • float的值不是none
  • position的值不是static或relative
  • display的值是inline-block, table-cell, flex, table-caption或inline-flex
  • overflow的值不是visible

(3)BFC的作用

1. 避免margin塌陷

根据BFC的布局规则2,我们可以通过设置两个不同的BFC的方式解决margin塌陷的问题。

2. 自适应两栏布局

根据BFC的布局规则3和4,我们将右侧div开启BFC就可以形成自适应两栏布局。

.left {
        float: left;  //左侧浮动
}

技术图片

.left {
        float: left;
}
    .right {
        overflow: hidden;  //开启BFC
    }

技术图片

3. 清除浮动

当不给父节点设置高度的时候,如果子节点设置浮动,父节点会发生高度塌陷。这个时候就要清除浮动。

根据规则5,只需给父元素激活BFC就可以达到目的。

.par {
        overflow: hidden;  //父元素开启BFC
    }

    .child {
        float: left;  //子元素浮动
    }

9. 清除浮动

 这篇有写:点这里

10. position属性

 这篇有写:点这里

HTML&CSS面试高频考点(二)

标签:计算   必须   设置   tran   ext   level   tps   子项目   方式   

原文地址:https://www.cnblogs.com/hermionepeng/p/13198516.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!