本文主要记录CSS布局属性，涉及display、float、position、flex、Grid布局API的使用及解决方案其中遇到的问题。CSS布局display这里只介绍inline、inline-block、block的display属性值的区别，其他不再介绍。1.显示定义display：CSS属性指定元素的显示类型。2.显示的属性值和特性1)块：元素类型定义为块级元素。特点：a。块级元素将占据一行，默认宽度为100%b。可以设置width、height、padding、margin、border2)inline-block：元素类型定义为内联块级元素。特点：a。在同一行显示b。可以设置width、height、padding、margin、border3）inline：元素类型定义为内联块级元素。特点：a。同一行显示b。不能设置width,height,marginupanddown，可以设置margin-left,margin-right,padding,border参考链接：MDN---display3.如何消除display:inline-block元素之间的间距？间距的原因：当元素排版为内联元素时，浏览器会按照white-space的处理方式（thedefault是normal，多余的空格合并)，将原HTML代码中的回车换行转换为空白字符。当font不为0时，空白字符占据了一定的宽度，所以inline-block元素之间会有空隙。消除间距的方法：1)元素之间出现空格的原因是标签之间的空格，所以去掉HTML中的空格或者用HTML注释连接子元素来消除间距。2）父元素的font-size设置为0，基本可以解决大部分浏览器中inline-block元素之间的间距（IE7等浏览器有时间距为1px）clear-space{font-size:0;}3）设置子元素的边距为负值，但是每个浏览器内联块级元素之间的间隙大小不一样，所以这样是行不通的4）设置父元素的样式。包装{显示：表格；宽度：100%；/*兼容IE、opear、firefox浏览器（safari未测试），否则不会出现高度*/word-spacing:-1em;/*兼容IE、opear、firefox浏览器（safari未测试），否则会有空隙*/}参考来源：display:inline-blockelementsCSSlayoutfloating之间空隙的原因及解决方法1.定义float：浮动CSS属性指定元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素已从网页的正常移动（文档流）中移除，但仍保留部分流动性。二、float属性的值1）none：表示元素不浮动的关键字。2）inherit：从父元素继承float属性的值。IE8支持。3)left:表示元素必须浮动在其所在块容器左侧的关键字。4)right:表示元素必须浮动在其所在块容器右侧的关键字。5)inline-start：关键字，表示元素必须浮动在所在块容器的起始侧，在ltr脚本中为左侧，在rtl脚本中为右侧。默认向左浮动（只有Firefox有用）6）inline-end:关键字，表示元素必须浮动在其所在块容器的末侧，在ltr脚本中位于右侧，在rtl脚本的左侧。默认向右浮动（只对Firefox有用）来源：MDN---float3.浮动特性：1）当float不为none时，会创建一个BFC，不合并margin2）浮动元素会脱离文档流，导致父元素的高度塌陷，所以需要清除浮动元素元素会调整到下一行，整个过程会一直持续到某一行有足够的空间.4.清除浮动1）为父元素设置合适的高度。height:0;}原理：使用CSSclear:both清除浮动，让parent自动获取高度便于维护建议：不推荐，但这个方法是以前主要使用的清除浮动的方法3）父元素通过伪元素和zomm.clearfix来清除浮动{zoom:1;*/.clearfix:after{显示：块；高度：0；内容：””;可见性：隐藏；clear:both;}原理：只有IE8及以上和非IE浏览器支持:after，原理也是用clear：两者清除浮动，利用zoom（IE专有属性）解决IE6和IE7的浮动问题优点：浏览器支持好缺点：代码代码较多父元素设置样式voerflow:hidden原理：使用overflow:hidden触发BFC，BFC属于文档流，浏览器在布局时会计算它的高度优点：简单，代码少，浏览器支持好缺点：不能和position一起使用，因为多余的size会被隐藏发个BFC优点：没有优点缺点：会产生新的浮动问题建议：理解就好6）理解方法：a．blockc.display:table/table-cell/table-row/table-caption参考文章：使用CSS一目了然CSS定位的七种方法优缺点1.Positioningposition：CSS的position属性，用于指定一个元素在文档中的定位方法的top、right、bottom、left属性决定了元素最终的位置。2.position属性的取值1)static：默认值，该关键字指定元素使用正常的布局行为，即元素在文档的正常流中的当前布局位置。此时top、right、bottom、left和z-index属性没有作用。2)inherit：指定position属性的值应该从父元素继承。W3school表示任何版本的InternetExplorer（包括IE8）都不支持属性值“inherit”。我测试了一下，IE8及以上支持。3）relative：在该关键字下，先将元素放置在没有添加定位时的位置，然后在不改变页面布局的情况下调整元素位置（所以会在没有定位元素的位置留下空白).position:relative对table-*-group、table-row、table-column、table-cell、table-caption元素没有影响。在IE5上支持。4）absolute：不为元素保留空间（文档流外），通过指定元素相对于最近的非静态定位祖先元素的偏移量来确定元素位置。绝对定位的元素可以在不与其他边距(BFC)合并的情况下设置边距。在IE5上支持。5）fixed：不为元素预留空间（文档流外），而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。滚动屏幕时元素的位置不会改变。fixed属性创建一个新的堆叠上下文。**当一个元素的祖先的transform属性不为none时，容器从视口变为祖先**。IE7支持。6)sticky：根据正常流计算框位置（这在正常流中称为position），然后在流中相对于元素的流根（BFC）和包含块（最近的块级祖先元素）进行定位。在所有情况下（即使定位的元素是表格），元素定位对后续元素没有影响。当元素B被粘性定位时，后续元素的位置仍然根据B未定位时的位置来确定。position:sticky对表格元素的影响与position:relative相同。Edge16支持。注意：1）在大多数情况下，绝对定位元素的高和宽设置为auto，根据内容大小调整元素的大小。然而，绝对定位的元素可以通过指定顶部和底部来填充可用的垂直空间，而不指定高度（即自动）。他们还可以通过指定left和right以及auto宽度来填充可用的水平空间。在IE7及以上版本中，可以通过top/bottom,left/right来获取想要的大小。2）如果同时指定了top和bottom（严格来说，这里指定的值不能是auto），则top优先。3）如果指定了left和right，当方向设置为ltr（横写中文、英文）时，left优先，当方向设置为rtl（阿拉伯文、希伯来文、波斯文从右向左书写）right优先。参考来源：MDN--positionCSSlayout灵活布局（flex）1.定义flex：是FlexibleBox的缩写，意为“弹性布局”，用于为盒模型提供最大的灵活性。IE10使用前缀的地方，可以使用flex。IE10需要加-ms-前缀才能支持。采用Flex布局的元素称为Flex容器（flexcontainer），简称“容器”。它的所有子元素自动成为容器的成员，称为弹性项目（flexitem），简称“项目”。2、指定弹性容器flex：将对象显示为弹性盒，类似于块级元素，占一行，宽度默认为100%。inline-flex：将对象显示为内联块级弹性框，类似于inline-block-level元素，不占用单行。3、容器属性flex-direction：决定了主轴的方向（即item的排列方向）。可选值有：row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴水平，起点在右端。column：主轴垂直，起点为上边缘。column-reverse：主轴垂直，起点在底部。可选值有：nowrap（默认）：不换行。wrap：换行符，第一行在上面。wrap-reverse：换行符，第一行在下面。flex-flow：是flex-direction和flex-wrap的简写，默认值为rownowrap。justify-content：定义项目在主轴上的对齐方式。可选值有：flex-start（默认值）：左对齐flex-end：右对齐center：居中space-between：两端对齐，items之间的间距相等。space-around：每个项目两边的间距相等。因此，项目之间的间距是项目与边框之间的间距的两倍。align-items：定义项目如何在交叉轴上对齐。可选值有：flex-start：交叉轴起点对齐。flex-end：横轴末端对齐。center：对齐横轴的中点。baseline：项目中第一行文本的基线对齐方式。stretch（默认）：如果项目没有设置高度或设置为自动，它将占据容器的整个高度。align-content：定义多个轴的对齐方式。如果项目只有一个轴，则此属性无效。可选值：flex-start：对齐横轴的起点。flex-end：与交叉轴的末端对齐。center：对齐到横轴的中点。space-between：与横轴两端对齐，轴与轴之间的间隔均匀分布。space-around：每个轴两边的间距相等。因此，轴之间的距离是轴与框架之间的距离的两倍。stretch（默认）：轴填充整个交叉轴。四、item属性order：这个属性定义了item的顺序。值越小，排名越高，默认为0。可以为负数。值为<整数>。flex-grow：该属性定义item的放大比例，默认为0，即如果还有剩余空间，则不放大。值为<数字>。flex-shrink：该属性定义item的缩小比例，默认为1，即空间不足时，item会收缩。值为<数字>。flex-basis：这个属性定义了item在分配多余空间之前占据的主轴空间（mainsize）。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto，即项目的原始大小。该值可以设置为与width或height属性相同的值，item占据固定的空间。flex：该属性是flex-grow、flex-shrink和flex-basis的简写，默认值为01auto。最后两个属性是可选的。该属性有两个快捷键值：auto(11auto)和none(00auto)。建议优先使用该属性，而不是单独写三个单独的属性，因为浏览器会计算相关值物品属性。默认值为auto，表示继承父元素的align-items属性。如果没有父元素，相当于stretch。可能的值有：auto、flex-start、flex-end、center、baseline、stretch。注意：设置为Flex布局后，子元素的flex、clear、vertical-align属性将失效。来源：RuanYifengflexlayout:语法flexlayout教程:例子flex布局是轴布局，只能指定“item”相对于轴的位置，可视为一维布局。Grid布局将容器分为“行”和“列”，生成单元格，然后指定“项所在的单元格”，可以看成是二维布局。网格布局远比Flex布局强大。IE不支持，Edge16支持。这个API有点多，就不整理了。直接看阮一峰老师的教程比较好。学习资料：CSSGrid网格布局教程CSS布局多栏布局1.定义多栏布局：一种以多栏组织内容的方式。2.相关属性column-count：CSS属性，描述元素的列数。值为auto或
