今天完成的事情：今天学习了盒模型，盒模型由内至外分别是content、padding、border、margin，其中可以使用百分比的有content,padding,margin，边框border则不可以用%单位，盒子水平居中可以设置margin：0 auto；垂直居中比较实用的可以设置绝对定位加负边距：

绝对定位加0：

然后我理解的padding和margin的一些知识：pdding能增加元素的容器的可视区域，margin则会减少默认块级元素的可视区域，margin有负值，padding不能使用负值。inline元素padding和margin可以设置left，right值，padding的bottom值可以显示但是会覆盖相邻元素，所以也相当于无效，

margin的top和bottom值不会显示。

block和inlineblock的padding和margin值都有效。

然后书写上小属性要去层叠大属性，就是写在下面

border-style常用的几种 solid实线，dashed虚线，dotted点状线。

border的书写方式分两种 按三要素拆开：width，style，color。按方向拆开：top right bottom left。

还可以画出三角形，

关于定位，relative是相对于其默认位置，定位基准点在它的左上角。

absolute是相对于其有定位属性的父系，如果没有则相对于html，其定位基准点在padding的左上角。

fixed是相对于html也就是窗口定位的，基准点也是窗口左上角。

脱离文档流分三种：浮动float，绝对定位absolute，固定定位fixed。

其中虽然脱离了文档流，但是浮动只会在其父元素里活动，

absolute和fixed则会无视margin

static是默认文档流，无定位属性。

关于浮动，一个盒子浮动，其他盒子会无视这个元素，但盒子里的文本依然会为这个元素让出位置，环绕该元素周围。

如果它的上一个元素不浮动，那么会今天该元素底部。任何元素都可浮动，并且浮动后如果不设置，宽度将是内容宽度，还可以设置padding和margin。

明天计划的事情：查看学习资料——《input——创造最新式表单》，布局表单内容，至少包含input和button ，为input旁边的小图标切图 ，为表单内容添加样式。

遇到的问题：编辑任务四时 设置两边盒子左右浮动，正常父级高度应该为零而且没有背景颜色，但是父级元素header的背景颜色还会显示，而且高度为盒子高度：

经师兄讲解，原来是触发了BFC。

还在在上图里中间加一个盒子，设置绝对定位，左右距离为零，里面文字竟然会水平居中：

经师兄讲解，原来是中间盒子左右拉长，而文字只是因为父元素header设置了水平居中。

收获：更加细致的了解了盒模型，浮动，还有定位。