发表于： 2020-03-19 22:37:38
0 1194
一.今日完成的内容和收获：
（一）底部使用fixed会导致下端会遮挡网页部分内容
1.遮挡部分内容
2.给最后一个盒子添加一个margin-bottom值，让其外边距扩张盒子，让其遮挡的内容显示出来，之后的效果图为这样
margin-bottom: 6rem;
（二）去除inline-block间距有哪几种方法？ （之前有深度思考过如何消除inline-block底部间隙的问题）
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
background-color: burlywood;
display: inline-block;
padding: 1rem;
}
</style>
</head>
<body>
<div>
<span>项目一</span>
<span>项目二</span>
<span>项目三</span>
</div>
</body>
当我设置display属性为 inline-block值时，会发现每个元素之间会有自动产生的一个留白间距。
1.移除空格：这个留白间距出现的原因是标签段间的空格，去掉空格就可以完成
（1）<div>
<span>项目一
</span><span>项目二
</span><span>项目三</span>
</div>
（2）<div>
<span>项目一</span
><span>项目二</span
><span>项目三</span>
</div>
（3）<div>
<span>项目一</span><!--
--><span>项目二</span><!--
--><span>项目三</span>
</div>
2.使用margin负值：负值的大小与上下文的字体和文字大小有关，由于外部环境的不确定性及最后一个元素多出的父margin值等问题，此方法不适合大规模使用。
3.删除闭合标签
</div>
4.在父元素中使用font-size：0；
（1）html部分
<div>
<span>项目一</span>
<span>项目二</span>
<span>项目三</span>
</div>
（2）css部分
div {
font-size: 0;
}
span {
background-color: burlywood;
display: inline-block;
padding: 1rem;
font-size: 16px;
}
5.使用letter-spacing（字符间距）或word-spacing（单词间距）：
（1）父元素letter-spacing设置为负值，子元素设置为0（因为子元素会继承父元素的letter-spacing值）
div {
letter-spacing: -6px;
}
span {
background-color: burlywood;
display: inline-block;
padding: 1rem;
font-size: 16px;
letter-spacing: 0;
}
（2）父元素的word-spacing设置为合适的负值，子元素的word-spacing可以不用设置
div {
word-spacing: -6px;
}
span {
background-color: burlywood;
display: inline-block;
padding: 1rem;
font-size: 16px;
}
（三）css有哪些属性可以继承？
1.字体系列属性
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
2.文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
color：文本颜色
3.元素可见性：
visibility：控制元素显示隐藏
4.列表布局属性：
list-style：列表风格，包括list-style-type、list-style-image等
5.光标属性：
cursor：光标显示为何种形态
二.遇到的问题
1.遇到的问题都通过百度解决
三.明天的计划
1.学习了解一下bootstrap
2.学习任务7
返回列表
评论