发表于： 2019-06-21 21:32:16
1 789
今天完成的事：学习边框颜色渐变，改变下拉框样式。任务六完成。
明天的计划：看任务七的相关资料，列出任务的布局大纲。
遇到的问题：暂无
收获：去除inline-block间距有哪几种方法
inline-block是一个块状行盒，表现为一个行内元素，它既拥有了块状元素可以设置width和height的特性，又保留了行内元素不换行的特点。
应用了display:line-block属性的元素会生成一个块状盒，该块状盒随着周围内容流动，如同它是一个单独的行内盒子，其表现更像是一个被替换的元素。
真正意义上inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，上代码：
<input />
<input type="submit" />
使用CSS更改非inline-block水平元素为inline-block水平也会有该问题：
<style>
a { background: pink; display: inline-block; padding: .5em 1em;
}</style><div>
<a href="">链接1</a>
<a href="">链接2</a>
<a href="">链接3</a>
<a href="">链接4</a></div>
以上情况是符合规范的应有表现，但这类间距有时会对我们的布局或兼容性产生影响，所以要想办法去掉它，以下示例几种方法～
1. 移除空格
元素间留白间距的出现原因即标签段间的空格，去掉空格间距自然没有了。
以下是几种写法：
<div>
<a href="">
链接1</a><a href="">
链接2</a><a href="">
链接3</a><a href="">
链接4</a>
</div> <div>
<a href="">链接1</a
><a href="">链接2</a
><a href="">链接3</a
><a href="">链接4</a>
</div> <div> <a href="">链接1</a><!--
--><a href="">链接2</a><!--
--><a href="">链接3</a><!--
--><a href="">链接4</a>
</div>三种写法都能达到去除缝隙的效果：
2. 使用margin负值
margin负值的大小与上下文字体和文字大小有关，由于外部环境的不确定性及最后一个元素多出的父margin值等问题，此方法不适合大规模使用。
<style>
a { background: pink; display: inline-block;
padding: .5em 1em; margin: -3px;
}</style><body>
<div>
<a href="">链接1</a>
<a href="">链接2</a>
<a href="">链接3</a>
<a href="">链接4</a>
</div></body>
3. 删掉闭合标签
HTML5中可以很任性：虽然这样很怪但确实有效。
<div>
<a href="">链接1 <a href="">链接2 <a href="">链接3 <a href="">链接4
</div>
4. 使用font-size:0
<style>
div{ font-size: 0;
} a{ font-size: 16px; background: pink;
}</style><div>
<a href="">链接1</a>
<a href="">链接2</a>
<a href="">链接3</a>
<a href="">链接4</a></div>
5. 使用letter-spacing
<style>
div{ letter-spacing: -6px;
} a{ letter-spacing: 0; background: pink;
}</style><div>
<a href="">链接1</a>
<a href="">链接2</a>
<a href="">链接3</a>
<a href="">链接4</a></div>
6. 使用word-spacing
<style>
div{ word-spacing: -6px;
} a{ word-spacing: 0; background: pink;
}</style><div>
<a href="">链接1</a>
<a href="">链接2</a>
<a href="">链接3</a>
<a href="">链接4</a></div>任务耗时：3
任务链接：
日报链接：
个人脑图：
官方脑图：
任务总结之任务6：
static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。z-index是可以完全覆盖下面的元素，不让它显示出来，屏幕滚动时加上这个
如果是上面就用top0 下面就用bottom0 实现上面导航栏固定并且，元素翻动使上面覆盖。
2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。 如果这个元素作用到父元素上，子元素在使用绝对定位，就可以相对于父元素绝对的定位，如果不给父元素加上的话，加上的话就是相对于整个html绝对定位，子元素加上绝对定位就可以实现
3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。绝对定位可以实现在任何地方定位，并且flex影响不了绝对定位。
4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。这个定位之后就不好改变位置，就是你定到你页面的什么位置，它就不会变，无论你怎么翻动改变页面。
雪碧图
雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更好。
使用雪碧图的优点有以下几点：
将多张图片合并到一张图片中，可以减小图片的总大小。
将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。
提一下雪碧图非常方便，减少了bug。
去除inline-block间距有哪几种方法？
1元素间留白间距的出现原因即标签段间的空格，去掉空格间距自然没有了。
2用负值的外边距来解决这个问题。
3还可以删掉闭合标签。
4使用font-size:0 用0值大小解决间距的问题。
5用letter-spacing，加到css上letter-spacing 属性增加或减少字符间的空白。
6使用word-spacing和上面一样。
css有哪些属性可以继承？
1字体系列属性
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格。
2、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
3、内联元素可以继承的属性
字体系列属性
除text-indent、text-align之外的文本系列属性
4、块级元素可以继承的属性
text-indent、text-align
返回列表
评论