发表于： 2019-03-03 20:50:54
1 769
今天完成的事情：
完成了css任务7，超链接简单会运用了。
明天计划的事情：
尽自己的努力完成任务八。
遇到的问题：
布局问题，因为hight高度值用的vw导致页面拉动不适应，最后换成了单位px问题解决。
收获：
超链接的运用，xw px的进一步熟练运用。
任务6总结：
首先要了解任务6需要先了解什么，第一就是flex布局，用来首先盒子文字的垂直居中，第二就是怎么实现下拉框，感觉任务六下拉框的实现还有具体布局有点难度，
还有几是如何利用盒子模型实现竖条线，加上颜色，就是利用盒子模型，左右边框border-right: 有边框，border-left左边框，另外就是了解文字的居中text-align参数值与说 left : 左对齐right : 右对齐center : ，
页面标头的固定，position: fixed; top: 0px;
尾部的固定position: fixed; bottom: 0px; position: fixed; 是固定，top是头部，bottom是尾部。
关于内部布局多了解display:flex布局，基本都能实现。
文字省略号就是固定代码；
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;多用就熟练了。
深度思考：
第一去除inline-block间距有哪几种方法？
一、现象描述
真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：
<input /> <input type="submit" />
间距就来了~~
我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题：
.space a {
display: inline-block;
padding: .5em 1em;
background-color: #cad5eb;
}<div class="space">
<a href="##">惆怅</a>
<a href="##">淡定</a>
<a href="##">热血</a>
</div>
您可以狠狠地点击这里：inline-block元素间间距demo
这种表现是符合规范的应该有的表现（如果有人认为是bug就太()ay ()oy 了）。
不过，这类间距有时会对我们布局，或是兼容性处理产生影响，需要去掉它，该怎么办呢？以下展示N种方法（欢迎补充）！
二、方法之移除空格
元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。考虑到代码可读性，显然连成一行的写法是不可取的，我们可以：
<div class="space">
<a href="##">
惆怅</a><a href="##">
淡定</a><a href="##">
热血</a>
</div>或者是：
<div class="space">
<a href="##">惆怅</a
><a href="##">淡定</a
><a href="##">热血</a>
</div>或者是借助HTML注释：
<div class="space">
<a href="##">惆怅</a><!--
--><a href="##">淡定</a><!--
--><a href="##">热血</a>
</div>等。还有好几种方案https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/
第二css有哪些属性可以继承？
1、字体系列属性
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为
大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-stretch：允许你使文字变宽或变窄。所有主流浏览器都不支持。
font-size-adjust：为某个元素规定一个 aspect 值，字体的小写字母 "x" 的高度与
"font-size" 高度之间的比率被称为一个字体的 aspect 值。这
样就可以保持首选字体的 x-height。
2、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
3、元素可见性：visibility
4、表格布局属性：caption-side、border-collapse、border-spacing、
empty-cells、table-layout
5、列表属性：list-style-type、list-style-image、list-style-position、list-style
6、生成内容属性：quotes
7、光标属性：cursor
8、页面样式属性：page、page-break-inside、windows、orphans
9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、
speech-rate、volume、voice-family、pitch、pitch-range、
stress、richness、、azimuth、elevation
第三如何还是flex布局
flex布局可以很直观的解决浮动问题，
- flex-direction 属性决定主轴的方向（即项目的排列方向）。
- flex-wrap 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
- flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
- justify-content 属性定义了项目在主轴上的对齐方式。
- align-items 属性定义项目在交叉轴上如何对齐。
- align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作
任务用时两天
返回列表
评论