今天是彻底下决心要进入程序员的世界了，所以拿出了高三的学习劲头，学了一天才发现比我想象中的难度大好多啊

今天完成的事

1.仔细学习HTML的常用标签并做了笔记

Html常用标签，属性和属性值包括<div> <p> <img> <span>等各种标签

2.仔细研究了盒子模型

了解了盒子模型最重要的5个属性：width height padding border margin 如下

·         width和height：内容的宽度、高度（不是盒子的宽度、高度）。

·         padding：内边距。

·         border：边框。

·         margin：外边距。

·         知道了盒子属性的一些写法比如

·         可以这么写padding是4个方向的，所以我们能够分别描述4个方向的padding。

·         padding-top: 30px; padding-right: 20px; padding-bottom: 40px; padding-left: 100px;

·         也可以这么写综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）

padding:30px 20px 40px 100px;

还可以这么写 只写了两个值，比如说：

padding: 30px 40px;

则顺序等价于：30px 40px 30px 40px;

还可以用小属性层叠大属性。比如：

padding: 20px; padding-left: 30px;

3.仔细研究了下浮动

·         浮动的元素互相贴靠

我们给三个div均设置了float: left;属性之后，然后设置宽高。当改变浏览器窗口大小时，可以看到div的贴靠效果

3号如果有足够空间，那么就会靠着2号。如果没有足够的空间，那么会靠着1号大哥。 如果没有足够的空间靠着1号大哥，3号自己去贴左墙。

浮动的元素有“字围”效果

来看一张图就明白了。我们让div浮动，p不浮动。

我们发现：div挡住了p，但不会挡住p中的文字，形成“字围”效果。

总结：标准流中的文字不会被浮动的盒子遮挡住。（文字就像水一样）

清除浮动的方法

1给父亲增加高度和宽度使其大于儿子的高度和宽度

2用clear:both;属性

给其中一个浮动元素的父元素加clear:both;属性可以清除浮动，缺点是没有margin属性了

3隔墙法

在两个浮动元素的父元素之间加一个带有clear:both;属性的div，用这个div的height来代替margin4，内墙法

在浮动元素的父亲内在加一个有clear:both;属性的div，这样可以给父元素撑出高度5 overflow:hidden;法

给浮动元素的父元素加一个overflow:hidden;属性，这样父元素就可以被浮动的儿子元素撑出高度了

清除浮动的总结

 如果一个元素要浮动，那么它的祖先元素一定要有高度。有高度的盒子，才能关住浮动，儿子设置浮动，但是父亲的高度必须大于等于儿子的高度。一个父亲是不能被浮动的儿子撑出高度的。

外墙法两个父亲之间加堵墙，内墙法在父亲里面加堵墙，hidden法在父亲的属性里面加入hidden属性，标准文档流中，竖直方向的margin不叠加，取较大的值，如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的。

盒子居中的简写为：

margin:0 auto;

注意：

·         （1）只有标准流的盒子，才能使用margin:0 auto;居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;

·         （2）使用margin:0 auto;的盒子，必须有width，有明确的width。（可以这样理解，如果没有明确的witdh，那么它的witdh就是霸占整行，没有意义）

·         （3）margin:0 auto;是让盒子居中，不是让盒子里的文本居中。文本的居中，要使用text-align:center;

明天计划的是

明天计划开始制作任务一，复习巩固html的知识，学习CSS的知识

遇到的问题

今天一共遇到3个问题

第一个问题是在研究盒子模型时候发现我设置了一个宽高各500px的div盒子输入汉字文本时会自动转换到下一行，但是输入字母就会撑破盒子

这个问题在群里询问后已经获得了解答，没有空格的字母和数字算一个整体，所以把盒子撑破了

第二个问题是我在盒子里套了2张图片发现两张图片中间有一条小间隙，研究了半天发现只能靠浮动解决，有没有不浮动就可以把两张图片合上的方法

第三个问题在一个盒子里要想要水平居中有text-align: center元素，但是垂直居中的vertical-align元素一直用不明白

收获

今天了解了什么是HTML什么是CSS并且仔细研究了盒子模型和浮动这两个概念，但是html的元素和属性太多了除了<div> <p> <img> <span>.....等比较重要的标签其他标签一个都没记住，盒子模型和浮动倒是重点看了看但是时间太短理解也不深，总的来说收获挺大的，但是困难也不小，希望以后师兄多多提点帮助。