2023.11.21与2023.11.23笔记

                                     2023.11.21

<!-- 轮廓线 -->

    <style>

        input{

            outline-style: none;        /* 轮廓线样式（此处为无）*/

            outline-color:rgb(1,1,1); /* 轮廓线颜色 */

            outline-width: 0;           /*轮廓线宽度  */

            outline:none;               /*去除轮廓线 */

        }

    </style>

                             <!-- 浮动 -->

    <style>

        img{

            float:left;/*左浮*/

            float:right;/*右浮*/

            /*仅有左右浮动*/

           

        }

    </style>

    <!-- 一个元素浮动起来，会不再占有原来位置（脱离文档流）（下方元素会占据原本元素的位置） -->

    <!-- 同时发生浮动的元素会在同一行进行排列（排列方式具体看元素的浮动方式） -->

    <!-- 例：若多个元素同时给予左浮动，元素就会从左到右排列 -->

                       

                                 <!-- 浮动造成的高度塌陷 -->

                         <!--浮动元素不占位子，容易出现问题  -->

            <style>

                p{

                    overflow:hidden;/*  */

                    clear:right;/*清除右浮动 */

                    clear:both;/*全部清除  */

                    /* 注：clear可解决元素堆积到一行的问题，使用clear可以使元素在贴近左右时不会堆积到一行 */

                     }

             </style>

     

                   <!-- 盒子模型 -->

                   <!-- 一个盒子（div）的构成为“content + border + padding + 内容区域（从外到里，内容区域为最中间） -->

 

                 

                   <!-- 外边距 -->

                   <style>

                .box{

                    margin-top: 20px;/*上外边距  */

                    margin-bottom: 20px;/* 下外边距 */

                    margin:20px;/*上下左右外边距  */

                    margin:20px 30px;/*上下外边距为20px 左右边距为30px  */

                    margin:10px 20px 30px;/*上外边距为10px 左右边距为20px 下边距为30px  */

                    margin:10px 20px 30px 40px;/*上10px 右20px 下30px 左40px  */

                    margin:0px auto;/*div盒子水平居中（auto为块元素）  */

                    /* 添加了浮动的盒子无法做水平居中 */

                }

                   </style>

                    <!-- 内边距 -->

                    <style>

                        div{

                        padding: top 20px;/*上内边距（内容与盒子边框的距离）  */

                        /* padding会影响盒子大小 */

                        box-sizing: border-box;/*可避免影响盒子大小（压缩内容区域）  */

                        padding:10px;/* 上下左右10px */

                        padding:20px 40px;/*上下20px  左右40px  */

                        padding:10px 20px 30px ;/*上10px  左右20px  下20px  */

                        padding:10px 20px 30px 40px;/*上10px  右20px  下30px  左40px  */

                        }

                    </style>

 

                    <!-- 外边距塌陷 -->

                        <style>

                            div{

                                border:1px solid black; /*外边距塌陷解决方式1  */

                                overflow:hidden;/*外边距塌陷解决方式  */

                                }

                                </style>

                        <!-- 元素默认的内外边距 -->

                            <style>

                                /* 方案 */

                                *{

                                    margin:0;/*  */

                                    padding: 0;/*直接清除所有盒子的内外边距  */

                                    }

                            </style>

                                   2023.11.23

 <!-- 弹性盒子 -->

     <style>

        li{

            /* flex布局 */

            display: flex;/*  */

            /* 对于flex布局没有左右的说法，只有主轴前和主轴后 */

            /*更改主轴方向 */

            flex-direction: row;/*flex 容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。  */

            flex-direction: row-reverse;/*表现和 row 相同，但是置换了主轴起点和主轴终点  */

            flex-direction: column;/*flex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同  */

            flex-direction: column-reverse;/*表现和column相同，但是置换了主轴起点和主轴终点  */

            /* 主轴排列方式 */

            justify-content: center;/*居中排列*/

            justify-content: start;/*从行首开始排列。每行第一个元素与行首对齐，同时所有后续的元素与前一个对齐。  */

            justify-content: end;/*从行尾开始排列。每行最后一个元素与行尾对齐，同时所有前面的元素与后一个对齐。  */

            justify-content: flex-start;/*元素紧密地排列在弹性容器的主轴起始侧。仅应用于弹性布局的项目。对于不是弹性容器里的元素，此值将被视为 start。  */

            justify-content: flex-end;/*元素紧密地排列在弹性容器的主轴起始侧。仅应用于弹性布局的项目。对于不是弹性容器里的元素，此值将被视为 start。(平分剩余空间)  */

            justify-content: left;/*伸缩元素一个挨一个在对齐容器得左边缘，如果属性的轴与内联轴不平行，则 left 的行为类似于 start。 */

            justify-content: right;/*元素以容器右边缘为基准，一个挨着一个对齐，如果属性轴与内联轴不平行，则 right 的行为类似于 end。  */

            justify-content: space-around;/*在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。  */

            justify-content: space-between;/*在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。  */

            justify-content: space-evenly;/*flex 项都沿着主轴均匀分布在指定的对齐容器中。相邻 flex 项之间的间距，主轴起始位置到第一个 flex 项的间距，主轴结束位置到最后一个 flex 项的间距，都完全一样。  */

            /* 交叉轴的对齐方式 */

            align-items: center; /* flex 元素的外边距框在交叉轴上居中对齐。如果元素的交叉轴尺寸大于 flex 容器，它将在两个方向上等距溢出。 */

            flex-wrap: wrap;/*此值的默认值为"nowrap"  */

        }

        .one{

            /*order值越小，格子越靠前  */

            order:-2; /*order默认值为0  */

            flex-shrink: 0; /*flex-shrink 属性指定了 flex 元素的收缩规则 */

            flex:1;/* 即为flex-shrink的缩写 */

        }

        /* grid布局 */

    .one{

        grid-template-columns: repeat(4,100px);/*grid-template-columns: repeat表示网格轨道的重复部分，以一种更简洁的方式去表示大量而且重复列的表达式。  */

        grid-template-rows: 1fr 2fr 1fr;/*grid-template-rows 该属性是基于 网格行 的维度，去定义网格线的名称和网格轨道的尺寸大小  */

        grid-row-start: 2;/*  */

        grid-template-columns: repeat(auto-fill,minmax(100px,1fr));/*  */

        row-gap: 20px;/*  */

        column-gap:30px;/*  */

        }  

        /* grid模板布局 */

        .one{

            grid-auto-rows: /*自适应  */

            grid-template-areas: ;

        }

       </style>