今天完成的事情：

       最近都卡在一个地方上，对于行内元素和块级元素的如何使用不是很熟练，之前做任务三感觉好像自己知道了，但是在网页上要达到某种效果就需要用到很多标签的合理嵌套，什么标签该在什么位置，块级元素和行内元素的特性，还有display属性的运用这些基础还不是很理解，所以实际操作代码的效果是不一样的，所有导致浏览器读不出来没有效果。

       例如：在任务四中最近卡的位置，对于怎么把文字并列在一起，这个就需要用到“行内元素”的特性了，用行内元素标签嵌套就可以实现文字并列同一行，行内元素因为不能设置宽高，默认浏览器的字体大小，行内元素例如：<span>/<a>标签，因为它们没有独立空间只能在同一行横向并列，所以不能像块级元素中例如：<div>/<header>标签一样设置宽高，内外边距的属性对于行内元素是无效的，但是像<div>是块级元素就像字面上的意思，它能在周围形成一个独立的矩形空间，所以在不同的代码中使用，可以通过设置它的宽高内外边距或者加上float属性就可以来控制它在浏览器中显示效果。

                昨天我都还不能理解什么是在一个行内并列达到显示文本同行并列，所以用div嵌套class来写，通过设置宽高内外边距来达到我想要的效果，后来发现显示的效果如下：，我以为可以通过设置内外边距可以让它们并列在一起，后来我怎么用margin和padding属性怎么调试都不行，后来师兄提点，我才反应过来，块级元素永远都是独占新的一行，因为不在一个行内，所以不管怎么调试都不可能会并列，这个时候应该使用“行内元素”的特性，例如：，用行内元素包含class和文字，这样字体的效果就能同行并列。如图效果：。行内元素和块级元素的属性类型稍稍有点理解了。

         还有对于如何把行内元素转换为块级元素的属性也查资料看了下，在css中每一个网页元素都有一个display属性，要理解display属性才能理解怎么完成转换。display属性决定元素的类型，每一个元素都有一个默认属性，像<div>的默认属性是“block”代表着属于块级元素，<span>的默认属性就是“inline”，代表着行内元素，“inline-block”属性是“行内块元素”就包含了两种属性的类型。这个需要用display改变属性来布局，这个是我现在需要理解的一个重点。

        任务四中我需要让同一列的三个文字居左居中居右，因为我使用了行内元素<span>，使它有了inline属性，我尝试加了width和height，但是浏览器没有显示效果，证明在inline里设置宽高无效。但是添加margin只有左右是可以设置的，如：左右都是有效果的，上下不能设置，也可以添加padding上下都有用，但是会撑大文字周围的空间，如：，两者使用的效果都不一样。

       然后任务四中需要让其文字垂直居中显示，然后查资料有好几种方法都可以实现，但是根据自己写的代码来看，就添加line-height代码比较简单，也能显示出垂直居中的效果。因为有三组文字，要让其都能垂直居中，这里我用<p>标签嵌套了line-height行高，然后增加了背景颜色和字体颜色。其实一直都不太理解怎么嵌套，我想要在header头部内容中让其背景颜色和字体颜色改变，然后刚刚就尝试用了块级元素中的<p>元素包裹我前面用的<span>行内元素实现了在这一行的效果；之前一直老纠结<div>元素，后知后觉才发现块级元素又不是只有<div>，也不知道怎么就一根筋，代码如下：

，写出来的效果：，不能理解为什么不能填满这一块，还有白边，和任务示范中还是有差距，这个不会。

         原来边框会有白色边距，是因为浏览器有一套自己默认的样式表，如果没有指定设置margin：0，浏览器就会按照自己的样式来显示，所以设置好margin，就能清除浏览器默认body的内外边距。效果如下：。

        接下来了解html表单。

表单是一个包含表单元素的区域。

表单元素是允许用户在表单上输入内容。

表单使用表单标签<form>来设置。

明天的计划：

争取完成任务4，理解并且吃透。

总结：

基础一定要打好基础！