发表于: 2018-05-29 22:06:14

1 499


今天完成的事情:

今天上午的时候就是弄了一下小课堂,下午的时候也弄了一点小课堂,晚上就写了一点代码
明天计划的事情:
  讲小课堂,争取把第一个页面完成。
遇到的问题:

 就是我今天想给字带颜色的时候就是不会带入,就是搜了几种但是我带入的都报错了,
收获:去除inline-block元素间间距的N种方法

1. 移除空格

元素间留白间距的出现原因即标签段间的空格,去掉空格间距自然没有了

2、 在父元素中设置font-size: 0,然后在子元素上重置正确的font-size。

缺点:inline-block元素必须设定字体,不然行内元素中的字体不不显示。

3、使用margin-right负值

缺点:元素之间间距的大小与上下文字体大小相关;并且同一大小的字体,元素之间的间距在不同浏览器下是不一样的,如:font-size:16px时,Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以不同浏览器下margin-right的负值是不一样的,因此这个方法不通用。

注意:当marigin-right使用相对单位em来表示时,Chrome下可以正常去除间距,而Firefox下元素之间有重叠。

4 使用letter-spacing

5. 使用word-spacing

然后总结了一下inline元素、block元素、inline-block元素的终结了一下


还有常见的inline元素、block元素、inline-block元素

    知识点1:常见的inline、inline-block、block元素

  常见元素:

inline:a,span,br,i,em,strong,label,q,var,cite,code

inline-block:img,input

block:p,div,p,h1...h6,ol,ul,dl,table,address,blockquote,form

          知识点2:inline、inline-block、block的特性

inline特点:

(1)和其他元素都在一行上,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。

(2)元素的高度、宽度及顶部和底部边距不可设置.

(3)元素的宽度就是它包含的文字或图片的宽度,不可改变。

block特点:

(1)每个块级元素都从新的一行开始,并且其后的元素也另起一行。

(2)元素的高度、宽度、行高以及顶和底边距都可设置。

(3)元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

inline-block特点:

内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。

和其他元素都在一行上;元素的高度、宽度、行高以及顶和底边距都可设置。


返回列表 返回列表
评论

    分享到