1. 当图片下有段落，设置图片浮动后，段落文字会包裹图片，如果想要图片浮动但文字不包裹图片，可为段落设置：overflow:hidden;
2. 因为图片是inline对象，和文字一样是基于父元素的baseline对齐的，而baseline对齐时距离底部有间距，如果想让垂直的两张图之间没有间隙，设置vertical-align不为baseline就可以
方法一：设置父容器字体大小为0 。如：div{font-size:0}
方法二：为图片定义垂直对齐方式
img{vertical-align:bottom;}
方法三：把img设置为block
3. 为div设置100%的高度时，还需为html、body设置100%的高度，后代元素才能继承高度
4. 如果文字较多，想设置文字不换行，文字只占一行，溢出的文字用省略号代替，可添加以下样式实现：
white-space:nowrap; //设置文本不换行
overflow:hidden; //隐藏溢出
text-overflow:ellipsis; //文字溢出，用省略号代替
5. 当容器的宽度不固定时。可设置为表格显示实现居中
div{
display:table;
width:auto;
margin:auto;}
6. 隐藏
display:none; //隐藏对象，不隐藏内容，包括在网页上的占位也隐藏
visibility:hidden; //只隐藏内容，占位还保留在网页上
7. 设置div内的img居中
div{
display:table-cell;
text-align:center;
vertical-align:middle;
}
原文：https://www.cnblogs.com/lizideblog/p/12391775.html