“小白的我”第九天日报

今天完成的事情：

1.做完并提交了任务4，等待审核通过；

明天计划的事情：

2.像今天一样努力地去做任务5，希望明天能做完；

遇到的问题：

1.以前都是用float去调整元素位置，第一次用position，不清楚relative，absolute和fixed的区别；

2.不清楚如何调整<input>里button的样式；

3.不清楚块级元素，行内元素和行块级元素的区别；

4.定位后两块级元素的优先级不知道设置；

解答方案

1.查询资料理解了一部分，师兄讲解了一部分，基本弄清楚了：

relative：

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

元素的位置通过left、right、top、button属性进行规定，

可以通过z-index进行层次分级。

元素元素仍保持其未定位前的形状，原本所占的空间仍将保留。

如果没有定位偏移量，对元素本身没有任何影响

absolute：

生成绝对定位元素。使元素脱离文档流，并相对于其包含块进行定位，包含块可能是文档中的另一个元素或者是初始包含块，

元素原先在正常文档流中所占的空间会会被后面元素占据；

元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框；

绝对定位元素的包含块由离它最近的 ‘position‘ 属性为 ‘absolute‘、‘relative‘ 或者 ‘fixed‘ 的祖先元素创建。只要父级元素设置了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的）。如果都没有定义，那么就相对于整个文档body定位（注意不是相对于浏览器窗口定位）

相对定位一般都是配合绝对定位元素使用

 fixed：生成绝对定位元素，相对于浏览器窗口的定位。通常配合z-index一起来使用。比如说网页上悬挂的聊天图标或者广告就是用了fixed

2.一开始纠结于<input type="button" name="enter"/>中的"button"和"enter"，实际上是input，应该设置input的样式。

3.由师兄提问，自己查询资料思考后得到答案：

1. 

行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。

    块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。

3.行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

二、行内元素和块级元素转换

        display:block; (字面意思表现形式设为块级元素)

       display:inline; (字面意思表现形式设为行内元素)

三、inline-block

inline-block 的元素（如input、img)既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效） 属性。
HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生元素间的空隙。

4.查询资料后理解了：

重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序：

收获：

1.师兄说任务四做完CSS算入门了，那我现在算是个入门CSS的小白了；

2.今天又是一个充实的一天，希望这样一天一个任务，每天知识满满的日子越长越好。