• 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必须设置在子元素中

    1. <style>
    2.         .parent {
    3.             width: 400px;
    4.             height: 400px;
    5.             background-color: gray;
    6.             margin: 0 auto;
    7.             line-height: 400px;
    8.             text-align: center;
    9.         }
    10.  
    11.         .child {
    12.             width: 200px;
    13.             height: 200px;
    14.             background-color: aqua;
    15.             display: inline-block;
    16.           /* 注意垂直居中设置在子元素中 */   
    17.             vertical-align: middle;
    18.         }
    19.     style>
    20. head>
    21. <body>
    22.     <div class="parent">
    23.         <div class="child">div>
    24.     div>
    25. body>

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

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

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

    1. <style>
    2.         .parent {
    3.             width: 400px;
    4.             height: 400px;
    5.             background-color: gray;
    6.             margin: 0 auto;
    7.             position: relative;
    8.         }
    9.  
    10.         .child {
    11.             width: 200px;
    12.             height: 200px;
    13.             background-color: aqua;
    14.             position: absolute;
    15.             top:50%;
    16.             left: 50%;
    17.             /* transform: translate(-50%,-50%); */
    18.             margin-top: -100px;
    19.             margin-left: -100px;
    20.         }
    21.     style>
    22. head>
    23.  
    24. <body>
    25.     <div class="parent">
    26.         <div class="child">div>
    27.     div>
    28. body>

    4.3使用flex布局

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

    1. /*加一个四色的正方形*/
    2. width: 100px;
    3. height: 100px;
    4. border-top: 1px solid purple;
    5. border-left: 1px solid orange;
    6. border-right: 1px solid blue;
    7. border-bottom: 1px solid #ff0000;
    8. /*四个三角形*/
    9.             width: 0;
    10.             height: 0;
    11.             border-top: 100px solid purple;
    12.             border-left: 100px solid orange;
    13.             border-right: 100px solid blue;
    14.             border-bottom: 100px solid #ff0000;
    15.  
    16. /*元素宽度和高度设置为0，设置一个边框为元素宽度一样，给其他三边边框颜色设置为透明属性transparent，就能形成三角形*/
    17.             width: 0;
    18.             height: 0;
    19.             border-top: 100px solid transparent;
    20.             border-left: 100px solid transparent;
    21.             border-right: 100px solid transparent;
    22.             border-bottom: 100px solid #ff0000;
  • 相关阅读:
    缺陷分级（过程质量bug分级）
    归并排序详解
    经纬恒润AUTOSAR全面适配芯驰车规芯片，联合打造全场景国产解决方案
    关于vue中某个页面在刷新的时候报only one instance of babel-polyfill is allowed错误
    Elasticsearch入门
    C++11 新增特性
    Android商城开发----点击左侧分类列表右侧更新对应列表内容
    深入理解Java CompletableFuture并发编程模型
    Node.js 入门教程 16 npm 将软件包安装到哪里
    【毕业设计】基于LSTM的文本情感分类（情感分析）
  • 原文地址：https://blog.csdn.net/qq_34569497/article/details/133927008