[散修弟子]CSS-8789|2020年07月29日的日报-技能树.IT修真院

发表于： 2020-07-29 20:40:26

2 1281

编辑日报内容...

今天完成了任务4：

整个任务我采用绝对定位来布局。之前采用浮动法，3个元素老是不在一行，后来才明白原因是中间元素块放置在中间了，而浮动法要求middle块的位置一定要放在left和right之后，因为它占据文档流位置，所以一定要放在最后。

position:absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它(不占位置)。注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding 。这样可以避免在不同的浏览器中出现可见的差异。

文字水平垂直居中靠padding和text-align: center来实现，而使用text-align: center时，必须带上width宽度。

在给表单左侧添加小图标时，遇到了不对齐问题，经上网查找，发现可以使用vertical-align，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐，把图标和表单套在一个盒子里，用vertical-align:middle;让图标对齐盒子中线。

在表单中：

<input type="text"> 定义用于文本输入的单行输入字段。

<input type="password"> 定义密码字段。

placeholder属性提供可描述输入字段预期值的提示信息，比如placeholder="请输入手机号"。

过程中还发现了个问题，就是有时会出现横向滚动条，上网搜索后，发现是把width设置100%，左右边距大于0，这样整体盒子宽度大于100%，所以出现横向滚动条。解决方法是运用box-sizing:border-box属性。

因为盒子的宽度=width+左右padding+centent+左右border+左右margin，而使用box-sizing:border-box属性后，无论padding、margin是多少，盒子的整体宽度都不受到影响。

用outline:none;去掉input边框蓝色的边框线，border-style设置边框样式。

word-spacing:; 属性增加或减少文字间的空白（即字间隔）。

text-decoration: underline;设置文本下划线。

任务总结：重新加深了对前面知识的理解，尤其是绝对定位的使用，写代码还是要细心点，几次发现字母打错、少打符号，让自己到处找问题。其实在给input表单添加图标时，还找到一种方法用background:url(图片) no-repeat right center，但是怎么都用不来。