一、布局1）默认文档流1、元素在网页中显示的顺序与元素在代码中出现的顺序一致2、块级元素占据单行空间3、内联元素共享一行空格与其他元素2)更改默认布局float:left/right浮动布局，使用浮动布局的元素会向左或向右移动注意：1.元素使用浮动后，将脱离文档流并从左到右排列。如果当前线宽不够，会自动换行。2.Use对于浮动后的元素，宽高由内容决定。3、该元素在网页中的原有位置将被其他块级元素替换。4、使用浮动后的元素，由于失去了支撑，其父元素的高度变为0。清除浮动的方法：1.浮动元素的父元素::after{clear:both;内容：'';显示：块；}2。浮动元素的父元素{overflow:hidden;}3。浮动元素的兄弟元素{clear:both;内容：'';}2.定位布局position用途：当一个元素悬浮在另一个元素上方时，一般使用定位布局案例：模态框，二级下拉框特点：1）可以用left,right,top,bottom来描述位置元素的2)z-index存在3)是否脱离文档流4)参考点属性:staticstaticlayout[默认值]relative相对定位1)不脱离文档流2)relativeto原始位置当前元素在网页中的绝对定位Absolute定位1)脱离文档流2)相对于当前元素的父元素定位，如果父元素没有定位元素，则相对于浏览器视口Fixed固定定位1)脱离文档流2)相对于浏览器的viewportstickysticky布局1)不脱离文档流2)relativeandfixedcombinedposition:sticky;顶部：50px；当当前元素远离浏览器时当它在浏览器视口上方50px时，就会体现出固定的特性。添加浮动时，会脱离文档流。一般用于响应式布局（手机app）2）属性：display:flex;设置当前框为flex框flex-direction设置flex框的主轴columnrowlayoutrowcolumnlayoutflex-wrap当子元素的宽度或高度超过当主轴方向的宽度或高度时父元素设置，wrapwrap，超过nowrap时wrap，超过[defaultvalue]时不wrapelement收缩规则flex-basis指定flex元素在主轴方向的初始尺寸align-itemsonthecrossaxisalignmentcenterdisplaysstretchinthemiddleaxisflex-startstretchesonthecrossaxis[defaultvalue]onthecrossaxisStartdisplayflex-enddisplayattheendofcrossaxisjustify-contentalignmentonthemainaxiscenterdisplayflex-startinthemainaxis[default]显示flex-end在主轴的开始在主轴末端显示flex-end3)注意：1.父元素必须在主轴方向上具有固定的宽度/高度，以便子元素分配。2.横轴上子元素的默认宽/高会填满父元素。如果横轴是x轴，子元素的默认高度会填满父元素。如果横轴是y轴，子元素的默认宽度会填满父元素。4.如何自适应地让元素在网页中水平居中？margin:0auto;[只对块级元素有效]1)块级元素1.设置宽度2.设置margin:0auto;2)内联元素1.设置为块级元素2.设置宽度3.设置边距：0自动；3)行内块元素输入1.设置为块级元素2.不能设置宽度3.设置margin:0auto;5、子元素在父元素中水平和垂直居中方法一：父元素设置相对定位position:relative;设置绝对定位position:absolute;左：0；顶部：0；右：0；底部：0；保证金：自动；方法二：父元素设置相对定位position:relative;子元素设置绝对定位position:absolute;左：50%；顶部：50%；margin-left:-当前子元素宽度的一半；margin-top:-当前子元素高度的一半；方法三：显示：table-cell；方法四：灵活的盒子布局6、在不影响父元素的情况下，在元素上方留出10px的边距。1.设置子元素position的相对定位：relative；顶部：100px；2、设置父元素为边框框，然后设置topinnermarginbox-sizing:border-box;填充顶部：100px;3。父元素设置相对定位，子元素设置绝对定位子元素top:100px；4．子元素浮动float:left;边距顶部：100px；宽度：计算（100%-400px）；自适应宽度
