css-面试题

Posted 2021-03-26 jcxfighting

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css-面试题相关的知识，希望对你有一定的参考价值。

参考：https://www.cnblogs.com/chenwenhao/p/11217590.html

盒模型

/* 红色区域的大小是多少？200 - 20*2 - 20*2 = 120 */
.box {
    width: 200px;
    height: 200px;
    padding: 20px;
    margin: 20px;
    background: red;
    border: 20px solid black;
    box-sizing: border-box;
}

/* 标准模型 */
box-sizing:content-box;    内容+padding  ===》红色区域   =200px
 /*IE模型*/
box-sizing:border-box;

如何实现一个最大的正方形

用 padding-bottom 撑开边距

 section {
    width:100%;
    padding-bottom: 100%;
    background: #333;
}

一行水平居中，多行居左

<div><span>我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。</span></div>
<div><span>我是一行文字</span></div>

<style>
div{text-align: center;}
div span{display: inline-block;text-align: left;}
</style>

水平垂直居中

16种方法实现水平居中垂直居中（http://louiszhai.github.io/2016/03/12/css-center/）

两栏布局，左边固定，右边自适应，左右不重叠

flex做自适应布局很容易，但兼容性不好，这里统一不用flex布局

.left{
    float:left;
    width:300px;
    margin-right: 10px;
    background: red;
}
.right{
    overflow: hidden; /* 创建BFC */
    background: yellow;
}

如何实现左右等高布局

table布局兼容性最好，当然flex布局的align-items: stretch;也行

<div class="layout">
  <div class="layout left">left</div>
  <div class="layout right">center</div>
</div>

<style>
.layout{
  display: table;
  width: 100%;
}
.layout div{
  display: table-cell;
}
.layout .left{
  width: 50%;
  height: 200px;
  background: red;
}
.layout .right{
  width: 50%;
  background: yellow;
}
</style>

画三角形 border+transparent

.shape {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid transparent;
    border-bottom: 50px solid blue;
    background: white;
}