CSS记录 - 技术栈

1.标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

标准盒子模型box-sizing: border-box; 宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

通过属性box-sizing进行区分，标准盒模型box-sizing为默认值：content-box; 低版本IE盒子模型box-sizing:border-box

2.IE盒模型------实际运用场景

如以下整个区域分为外面的边框和绿色框的商品展示区。外面的边框区域宽高固定 。如果想要让绿色框的商品展示区随着外面的边框的宽高自适应，就可以设置父级容器box-sizing: border-box；子级设置width和height为100%即可。这个是外部宽高固定的情况下

如果宽高不固定就可以使用标准盒模型

3.flex布局

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

3.1思考？有三个div，在不适用flex布局的前提下，想让其横向布局怎么实现？

使用浮动float; ------float:left 全部向左浮动
display改为行内块级元素; ------ 三个子元素中使用display: inline-block
定位

3.2 flex-wrap指定 flex 元素单行显示还是多行显示。

nowrap（默认）：不换行（如果子元素宽度超过父容器宽度会压缩子元素宽度）
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方

3.3不使用display:flex情况下，怎么让几个div横向居中？

横向：子元素中display:inline-block或者float浮动，或者定位

横向居中：父级元素中使用text-align:center

注意定位一般能不用就不用，因为定位布局会脱离文档流

4.重点：如何让一个盒子水平垂直居中

行内块级水平垂直居中方案（子元素使用display: inline-block；vertical-align: middle; 父元素使用text-align: center; line-height: 元素高度）
通过定位实现水平垂直居中：分为知道子元素宽高和不知道子元素宽高两种情况（父相子绝定位+margin/transform）
使用flex布局

4.1 块级行内水平居中

子元素使用display: inline-block；vertical-align: middle; 父元素使用text-align: center; line-height: 元素高度

注意：ertical-align: middle必须设置在子元素中

html 复制代码

<style>
        .parent {
            width: 400px;
            height: 400px;
            background-color: gray;
            margin: 0 auto;
            line-height: 400px;
            text-align: center;
        }

        .child {
            width: 200px;
            height: 200px;
            background-color: aqua;
            display: inline-block;
          /* 注意垂直居中设置在子元素中 */   
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

4.2通过定位实现水平垂直居中：分为知道子元素宽高和不知道子元素宽高两种情况

知道宽高情况下：父元素相对定位，子元素绝对定位；left:50%和top:50%; margin-top:负子元素高度一半；margin-top:负子元素宽度一半；

不知道宽高时：使用transform。父元素相对定位，子元素绝对定位；left:50%和top:50%; transform: translate(-50%,-50%)

html 复制代码

<style>
        .parent {
            width: 400px;
            height: 400px;
            background-color: gray;
            margin: 0 auto;
            position: relative;
        }

        .child {
            width: 200px;
            height: 200px;
            background-color: aqua;
            position: absolute;
            top:50%;
            left: 50%;
            /* transform: translate(-50%,-50%); */
            margin-top: -100px;
            margin-left: -100px;
        }
    </style>
</head>

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

4.3使用flex布局

5.用纯CSS创建一个三角形的原理是什么？宽高设置为0，其中边框宽度设置为宽度宽，边框任意三边颜色设置为透明transparent

css 复制代码

/*加一个四色的正方形*/
width: 100px;
height: 100px;
border-top: 1px solid purple;
border-left: 1px solid orange;
border-right: 1px solid blue;
border-bottom: 1px solid #ff0000;
/*四个三角形*/
            width: 0;
            height: 0;
            border-top: 100px solid purple;
            border-left: 100px solid orange;
            border-right: 100px solid blue;
            border-bottom: 100px solid #ff0000;

/*元素宽度和高度设置为0，设置一个边框为元素宽度一样，给其他三边边框颜色设置为透明属性transparent，就能形成三角形*/
            width: 0;
            height: 0;
            border-top: 100px solid transparent;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 100px solid #ff0000;