inline-block、float、flex、溢出隐藏（两种）

dispaly:inline-block和float:left的区别

dispaly:inline-block

采用行内块元素进行排版，两个行内块元素会留下间隙。
块级元素：独占一行，对宽高的属性值生效。如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。例如div元素
行内元素：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高。例如span元素
行内块元素(inline-block)：结合的行内和块级的优点，既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。例如img和input元素

float:left

采用浮动float:left排版，两个元素之间则不会留下间隙，符合当前排版需求。但是float设计的初衷不是布局，而是文字环绕效果

flex

1、在最外层div设置style=“display: flex;”
2、在该div包裹下的元素设置flex的比例，例如style=“flex:1”

要点

1、行内元素也可以使用 Flex 布局

.name{
  display: inline-flex;
}

2、设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
3、flex-direction：确定项目的排列方向（向右、向左、向下、向上）

.name {
  flex-direction: row | row-reverse | column | column-reverse;
}

3、flex-wrap属性：设置换行（不换行、第二行在下方，第二行在上方）

.name{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

4、flex-flow属性：flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.name {
  flex-flow: <flex-direction> || <flex-wrap>;
}

5、justify-content：定义对齐方式（向左、向右、居中、两端对齐、两侧间隔相等）

.name {
  justify-content: flex-start | flex-end | center | space-between |
                    space-around;
}

这是我写的flex布局：

			<div class="container">
				<div style="display: flex;text-align: center;">
					<div style="flex:1">
						<i class="iconfont icon-dizhi-01 dt"></i>
						<div style="font-weight: bold;font-size: 18px;">联系地址</div>
						<div style="font-size: 14px;">浙江省嘉兴市越秀南路56号</div>
					</div>
					<div style="flex:1">
						<i class="iconfont icon-dianhua dt"></i>
						<div style="font-weight: bold;font-size: 18px;">电话/传真</div>
						<div style="font-size: 14px;">153****9128</div>
					</div>
					<div style="flex:1">
						<i class="iconfont icon-youxiang dt"></i>
						<div style="font-weight: bold;font-size: 18px;">联系邮箱</div>
						<div style="font-size: 14px;">63214****@qq.com</div>
					</div>
					<div style="flex:1">
						<i class="iconfont icon-meiti dt"></i>
						<div style="font-weight: bold;font-size: 18px;">姓名</div>
						<div style="font-size: 14px;">fanmi</div>
					</div>
				</div>
			</div>

附上两个参考链接：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

溢出隐藏（两种）

第一种

.anli-tit {
    //溢出隐藏
    overflow: hidden;
    //文本不进行换行
    white-space: nowrap;
    //以省略号展现超出部分
    text-overflow: ellipsis;
}

第二种

Flexible Box Model(灵活盒子模型)

在平常的web横排布局中，会经常用到float或display:inline-block，但是在多种不同宽度的移动设备的自适应布局中用的话，还得设置百分比宽度和考虑清除浮动。而Flexible Box Model可以自动计算宽度和自适应。

box-origent: horizional（水平）和vertical（垂直）

.anli-content {
    //溢出隐藏
    overflow: hidden;
    //自适应布局
    display: -webkit-box;
    //显示的行数为5行
    -webkit-line-clamp: 5;
    //Safari, Opera, and Chrome
    -webkit-box-orient: vertical;
    //Firefox
    -moz-box-orient:vertical;
    //英文换行
    word-wrap: break-word;
}

这是我写的溢出隐藏

<div class="layui-col-sm4 p15 dw">
            <div class="p15">
                <h3 class="anli-tit">踩踩踩</h3>
                <p class="anli-content">
                   吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃吃
                </p>
                <div class="unfin">
                    <span>未完成</span>
                </div>
            </div>
        </div>