收集于平时常用但易忘的CSS实现方法，如有遗漏或补充，还请指正！解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移.wrap{display:inline-block;overflow:hiddenvertical-align:bottom}复制代码超出部分显示省略号//单行文本.wrap{overflow:hidden;/超出部分隐藏/text-ove
分类：
Web程序 时间：
2019-10-15 22:43:07
阅读次数：
98
在我们平时工作中，经常会遇到把一些块状元素在一行排列显示，这时候我们通常会用到flaot,或许会用inline-block等等，那么他们有什么共性和区别？适用在什么场景？ 共性： ①inline-block: 是把一个元素的display设置为块状内联元素，意思就是说，让一个元素的容器inline展 ...
分类：
其他好文 时间：
2019-10-13 11:10:06
阅读次数：
66
经验之谈: inline\inline-block\block元素 inline\inline-block文本类元素 凡是带有inline的元素都有文本类特点 诸如:->->->文本类元素有回车,空格 再如:-> -> 再如: 淘宝顶栏布局: inline-block 文本类元素,和里面的元素进行低 ...
分类：
Web程序 时间：
2019-10-08 14:03:47
阅读次数：
136
使用font-size:0解决设置inline-block引起的空白间隙问题 一、空白间隙问题 在进行页面布局的时候为了页面代码所谓整洁刻度，往往会设置缩进或是换行，但是元素display为inline-block或是inline时，行内元素虽然没有设置 margin值，这些换行或是缩进。还是会出现 ...
分类：
其他好文 时间：
2019-10-06 16:45:23
阅读次数：
110
一、问题产生 由于html代码格式化后，标签会缩进或者换行。由于浏览器默认处理导致元素在页面显示中出现单个空格问题，尤其在行内或者行内块元素布局时影响比较明显 例如： 代码 页面显示 二、解决方案 这种问题出现让人很头疼，寻访答案却都差强人意：不是兼容性问题就是需要对布局进行特殊处理，总之都不是很完 ...
分类：
其他好文 时间：
2019-09-30 23:34:51
阅读次数：
215
1.div{ display:table-cell; text-align:center; vertical-align:middle;}.div1{ display:inline-block;}/*子div不能设置浮动*/ 2..div{ display:flex; align-items:cen ...
分类：
其他好文 时间：
2019-09-30 14:34:00
阅读次数：
102
目前有这样的需求，一行标题中，前面为图标，后面是文字，文字要实现一行省略的效果 首先把文字设为：display: inline-block; 然后设置省略： overflow: hidden; word-wrap: normal; white-space: nowrap; text-overflow ...
分类：
其他好文 时间：
2019-09-26 14:54:41
阅读次数：
123
img1是默认显示图片 .listing-img{ width: 100%; min-height: 270px; max-height: 320px; } .listing-img>img{ display: inline-block; height: auto; max-width: 100%;... ...
分类：
Web程序 时间：
2019-09-26 11:26:56
阅读次数：
112
display属性共有4个值： blcok：块级元素 inline block：行内块级元素 inline：行内元素 none：隐藏元素，不占据空间 1.块级元素 常见的块级元素有div,p,ul,ol,li,h1~h6等 块级元素会默认占满父元素的宽度且独占一行 2.行内元素 常见的行内元素有sp ...
分类：
Web程序 时间：
2019-09-22 01:22:27
阅读次数：
2339
1. 水平居中(margin: auto;)子父元素宽度固定，子元素上设置 margin: auto; 子元素不能设置浮动，否则居中失效。 2. 水平居中，子父元素宽度固定，父元素设置 text-align: center; 子元素设置 display: inline-block; 子元素不能设置浮 ...
分类：
Web程序 时间：
2019-09-18 12:50:03
阅读次数：
126
