[郑州|结业弟子]JS-田迪生|2018年04月29日的日报-技能树.IT修真院

发表于： 2018-04-29 21:05:21

1 347

今天完成的事情：学习input的一些属性，边框样式的设置,，完成任务四
明天计划的事情：了解flex布局，学习内容居中和文字居中，查看学习资料——《CSS代码规范》，
遇到的问题：刚开始使用的使三个div垂直居中方法为设置line-height为父元素的行高，效果可以实现，但是删除中间的div会影响居中效果。根据任务要求去掉header的三块文字的任意一两个，剩下的一两个都还在原位置上不会受到影响，所以选用绝对定位。

发现做出的界面与窗口有间距,通过调试观察发现是body的外边距的原因，设置margin=0.
收获：

一、日常收获

1、input文本框与图标对齐

在默认情况下，input文本框和图片无法自然对齐，总会有所偏差，文本框往往会比图片要往下边一点，

两者底部水平对齐：只要给元素添加vertical-align:bottom

2、边框样式的设置

如果希望显示某种边框，就必须设置边框样式，比如 solid 或 outset。

利用padding可以设置元素与边框的距离

二、任务总结

1.position定位有哪几种？各有什么特点？

relative：生成相对定位的元素，相对于其正常位置进行定位。

生成相对定位的元素，相对于其正常位置进行定位。元素的位置通过left、right、top、button属性进行规定，可以通过z-index进行层次分级。元素仍保持其未定位前的形状，原本所占的空间仍将保留。（如果没有定位偏移量，对元素本身没有任何影响。所以可以设置父元素的position属性为relative，使其成为子元素的包含块）

absolute：生成绝对定位元素。使元素脱离文档流，并相对于其包含块进行定位，包含块可能是文档中的另一个元素或者是初始包含块，元素原先在正常文档流中所占的空间会会被后面元素占据；

元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框；绝对定位元素的包含块由离它最近的 'position' 属性为 'absolute'、'relative' 或者 'fixed' 的祖先元素创建。只要父级元素设置了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的）。如果都没有定义，那么就相对于整个文档body定位（注意不是相对于浏览器窗口定位）

fixed：生成绝对定位元素，相对于浏览器窗口的定位。

通常配合z-index一起来使用。比如说网页上悬挂的聊天图标或者广告就是用了fixed

2.哪些css属性可以设置百分比，其计算原则是什么？

（1）可以使用百分比的样式属性

定位属性：top, right, bottom, left;

盒模型属性：height, width, margin, padding;

背景属性：background-position;

文本属性：text-indent, line-height, vertical-align;

字体属性：font-size;

（2）计算原则

height：基于包含它的块级对象的百分比高度。

width：基于包含它的块级对象的百分比宽度。