11.30笔记

轮廓线：input{         
 outline-style：none  
            outline-width
                     outline-height
                     outline-color

outline：none

浮动之文字环绕：float：left
                
一个元素浮动起来会不在占有原来位置（脱离文档流），同时发生浮动的元素会在同一行排列。如果说多个元素同时给左浮动，元素就会从左往右排一行

浮动造成的高度塌陷：outflow：hidden

文字：clear：right/both

盒子明模型：border+padding+content
 
外边距margin-top：距上面多少
margin：20px（上下左右为20）
margin:20px 30px(上下为20左右为30
margin：10px20px30px（上10左右20下30
margin：10px20px 30px 40px (上右下左）

outflow：auto
内边距：padding-

外边距塌陷   border：1px solid black
padding：10px
overflow：hidden

元素默认的内外边距：*{
                                     padding：0
                                     margin：0
 

11.23。

弹性盒子：display：flex
         flex-direction：row/row-reverse
         flex-direction:column(主轴从上往下）加reverse变成从下往上
主轴排列方式：
               justify-content:center
         justify-content:space-between(两边贴边 中间平分）
               /space-around（平分空间）
            
交叉轴的对齐方式：
align-items：center（控制一行)
align-content:space-between(多行）

<ul>
    flex-wrap:wrap(自动换行）

order：-12（值越小越靠前）
flex-shrink：0（不被压缩）
align-self：（自身动）

flex-end（到下面）

grid布局：diaplay:grid
                grid-template-columns：100px 200px 300px（列）
                grid-template-rows：（行） 

row-gap：20px
column-gap

grid-row-start：2
grid-row-end:4(跨行）/grid-row：2/4
————————————————
版权声明：本文为CSDN博主「h-feng」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/2302_80439231/article/details/134714012