发表于: 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就是将元素设置为内联块状元素。
和其他元素都在一行上;元素的高度、宽度、行高以及顶和底边距都可设置。
评论