发表于： 2019-06-16 23:18:15
1 942
今天完成的事：
完成了第一个页面，使用CSS样式画三角形
width: 0;
height: 0;
border: 14px solid transparent;
border-width: 14px 14px;
border-bottom-color: #fbb435;
transform: rotate(90deg);
对第二个页面 ，完成了整体布局
查询了去除inline-block间距有哪几种方法，
明天计划的事：
完成第二、三个页面，
遇到的问题：
tanle制作单元格边框的时候，由于产生重叠效果，使单元格框不美观，后来查看了资料去除上边的边框，得到好的了改善。单元格不能完全撑开现象，在父元素上面加了百分比效果到了转变，固定了行高。
收获：
查询了去除inline-block间距有哪几种方法
.背景介绍
display:inline; 内联元素，简单来说就是在同一行显示。
display:block; 块级元素，简单来说就是就是有换行，会换到第二行。
display:inline-block; 即内联块状元素，可以水平排版。
2.知识解剖
inline-block 内联块状元素，可以水平排版。但在换行显示或空格分隔时会有空白间隙。
3.解决方案
1.改变书写方式
元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就消失了。
可以把inline-block元素写在同一行，这种方案是最直接的解决方案，但也是最不靠谱的方案，存在很多不可控因素。 很多场景会让你崩溃：前后端协同；版本更迭；他人接手；自己忘了...，太多一不小心都可能让这个方案失效。
考虑到可读性，连成一行写不好。可以改进：
<div>
<span>
cw</span><span>
bh</span><span>
dk</span><span>
am</span><span>
dr</span>
</div>
<div>
<span>ok</span
><span>tp</span
><span>ko</span
><span>uw</span
><span>om</span>
</div>
<div>
<span>bm</span><!--
--><span>ds</span><!--
--><span>tw</span><!--
--><span>ss</span><!--
--><span>bb</span>
</div>
有些元素可以将中间的结束标签去掉
<div>
<a>sw
<a>ns
<a>sk
<a>na
<a>sg</a>
</div>
方法2：font-size
这个方法，可以解决大部分浏览器下inline-block元素之间的间距（IE7等浏览器有时候会有1像素的间距）
font-size:0;
方法3:使用margin负值
margin负值的大小与上下文的字体和文字大小相关，Arial字体的
margin负值为-3像素，Tahoma和Verdana就是-4像素，而Geneva为-6像素。由于外部环境的不确定性，以及最后一个元素多出的父margin值等问题，这个方法不适合大规模使用
方法4：使用word-spacing或letter-spacing
一个是字符间距(letter-spacing)一个是单词间距(word-spacing)，大同小异。 父元素letter-spacing负值只要大到一定程度，其兼容性上的差异就可以被忽略。因为，即使父元素letter-spacing负值很大，也不会发生重叠。但是子元素要设置letter-spacing为0，不然会继承父元素的值；使用word-spacing时，只需设置父元素word-spacing为合适值即可。
返回列表
评论