三个div上中下布局如何让两个div上下排列( 三 )

inline、block、inline-block三者区block块级特点：每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）元素的高度、宽度、行高以及顶和底边距都可设置。元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。inline内联特点：和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。inline-block 特点：inline-block内联块状元素同时具备内联元素、块状元素的特点。和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。使用 display:inline-block 会产生什么问题？又如何解决？（*）两个inline-block元素放到一起会产生一段空白。
产生空白的原因元素被当成行内元素放置的时候，元素之间的空白符（空格，回车换行等）都会被浏览器处理，根据CSS中空白属性的处理方式（否则是正常，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符较长一定长度，所以inline-block的元素之间就出现了空隙。
解决办法将子元素标签的结束符和下一个标签的开始符写在同一行或把所有子标签写在同一行父元素中设置字体大小：0 ，在子元素上重置正确的字体大小为子元素设置float：leftflex布局该布局提供了一种更高效的方法对容器中的项目进行布局、对齐和分配空间，他没有方向上的限制，可以由开发人员自由操作（子元素的 vertical-align、float、clear 属性会失效）。
容器属性（6个）flex-direction** 决定主轴方向（容器排列方向）**flex-direction: row | row-reverse | column | column-reverse;
flex-wrap** 如果一条轴线排不下，定义换行规则**flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow** flex-direction和flex-wrap的简写形式**flex-flow: flex-direction||flex-wrap;
justify-content** 定义容器在主轴上的对齐方式**justify-content: flex-start | flex-end | center | space-between | space-around;
align-items** 定义容器在交叉轴上的对齐方式**align-items: flex-start | flex-end | center | baseline | stretch;
align-content** 定义多根轴线的对齐方式，如果容器只有一根轴线，该属性不起作用**align-content: flex-start | flex-end | center | space-between | space-around |;
项目属性（6个）order 定义项目的排列顺序，数值越小，排列越靠前，默认为0flex-grow 定义项目的放大比例，默认为0（即如果存在剩余空间，也不放大）flex-shrink 定义项目的缩小比例，默认为1（即如果空间不足，该项目将缩小）flex-basis 定义了在分配多余空间之前，项目占据的主轴空间。默认值为auto（项目本来大小）align-self允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto（表示继承父元素align-items属性，如果没有父元素，等同于stretch）align-self: auto | flex-start | flex-end | center | baseline | stretch;
flex 是flex-grow、flex-shrink和flex-basis的简写，默认值为 0 1 autoflex: none | [ ‘flex-grow’ ‘flex-shrink’? || ‘flex-basis’]该属性有两个快捷值: auto(1 1 auto) 和 none(0 0 auto)建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：

三个div上中下布局 如何让两个div上下排列( 三 )

三个div上中下布局如何让两个div上下排列( 三 )