在这20多天的学习，虽说刚刚开始，但是也学到了不少的东西，我也有自己的一些学习心得，下面我就简单说说。

首先是页面布局，了解标准流、浮动、定位的元素的层次，每个人有每个人的想法，布局不是死的，可以做出各种布局，不一样的代码最后能展现出同样的效果，只是繁琐的程度不同，最常使用的就是div盒子模型，然后就是配合ul li来完成，清楚每个标签的类型，块级、行内块、行内元素各有各的特点，经常需要互相转换，display: block; display: inline; display: inline-block;辅助进行布局，这里要注意行内元素尽量用左右内边距撑开，根据其中的内容确定大小，如果块级元素有宽高并且加上了内边距，会撑大自身，此时需要减去4个边的padding值。还有个最重要的就是浮动，因为将元素排到同一行如果使用display: inline-block;在两个元素之间形成难以除去的间隔，这是由于换行导致的，所以这时用浮动会更好的解决，而浮动之后，元素脱离了标准层，大部分情况不给父盒子设置高度，都是由内部的子元素撑开，这就导致后面的标准流会上来占据位置，所以要用到清除浮动，给父盒子清除浮动之后，父盒子就有了高度，才能布局，而方法又有许多，我们常用after伪类来解决，还有一个万能的代码overflow：hidden;，它还能解决嵌套盒子外边距塌陷和内容溢出的问题，但是它有缺点，要慎用。在进行页面之前，要写一下通用的代码，可以压缩代码，更简洁。一般都要用到的例如a标签取消下划线，所有默认内外边距清除，li标签的初始样式之类。还有嵌套的盒子，给子盒子一个上边距会发生外边距塌陷问题，这里有多种方法解决：给父盒子加一个透明的上边框、给父盒子一个上内边距、父盒子使用万能的overflow：hidden;、给子一个绝对定位、给子盒子加浮动。所以一个问题有太多的解决方法，就看你去怎么理解和运用了，最后就是最近学的定位，定位有四种，常用三种，各有各的用法和特点，相对定位保留原位置，不影响页面布局，绝对定位脱离标准层，不保留位置，可以任意移动，固定定位是绝对定位的一种特殊方式，最为常用的就是相对定位与绝对定位的配合使用，“子绝父相”，父元素添加相对定位保留位置且添加了定位，作为了决定定位的移动标准，绝对定位这时可以更好的控制位置，定位元素的居中也有特殊的算法，先先left: 50%；然后margin-left: （自身宽度的一半负值），还可以top: 0; bottom: 0; left: 0; right: 0; margin: auto;，最后就是一些小的方法，margin负值配合浮动消去重叠的边框，但是后一个盒子会压住前一个的边框，再加上相对定位就可以让边框显示出来，

还有垂直居中vertical-aline:middle;，不过它只对行内元素或者行内块元素有用，对块级元素不管用，注意使用的场合。写代码的时候往往会出现一些你想不到的错误，有时候很难查出来，像权重不够，类名打错，括号丢失等等常见问题，为防止这些问题要养成良好的写代码习惯。

各种标签都有各自的优点与缺点，它们是相辅相成的，灵活去运用才能写出稳定的好页面。

在这20多天的学习，虽说刚刚开始，但是也学到了不少的东西，我也有自己的一些学习心得，下面我就简单说说。

首先是页面布局，了解标准流、浮动、定位的元素的层次，每个人有每个人的想法，布局不是死的，可以做出各种布局，不一样的代码最后能展现出同样的效果，只是繁琐的程度不同，最常使用的就是div盒子模型，然后就是配合ul li来完成，清楚每个标签的类型，块级、行内块、行内元素各有各的特点，经常需要互相转换，display: block; display: inline; display: inline-block;辅助进行布局，这里要注意行内元素尽量用左右内边距撑开，根据其中的内容确定大小，如果块级元素有宽高并且加上了内边距，会撑大自身，此时需要减去4个边的padding值。还有个最重要的就是浮动，因为将元素排到同一行如果使用display: inline-block;在两个元素之间形成难以除去的间隔，这是由于换行导致的，所以这时用浮动会更好的解决，而浮动之后，元素脱离了标准层，大部分情况不给父盒子设置高度，都是由内部的子元素撑开，这就导致后面的标准流会上来占据位置，所以要用到清除浮动，给父盒子清除浮动之后，父盒子就有了高度，才能布局，而方法又有许多，我们常用after伪类来解决，还有一个万能的代码overflow：hidden;，它还能解决嵌套盒子外边距塌陷和内容溢出的问题，但是它有缺点，要慎用。在进行页面之前，要写一下通用的代码，可以压缩代码，更简洁。一般都要用到的例如a标签取消下划线，所有默认内外边距清除，li标签的初始样式之类。还有嵌套的盒子，给子盒子一个上边距会发生外边距塌陷问题，这里有多种方法解决：给父盒子加一个透明的上边框、给父盒子一个上内边距、父盒子使用万能的overflow：hidden;、给子一个绝对定位、给子盒子加浮动。所以一个问题有太多的解决方法，就看你去怎么理解和运用了，最后就是最近学的定位，定位有四种，常用三种，各有各的用法和特点，相对定位保留原位置，不影响页面布局，绝对定位脱离标准层，不保留位置，可以任意移动，固定定位是绝对定位的一种特殊方式，最为常用的就是相对定位与绝对定位的配合使用，“子绝父相”，父元素添加相对定位保留位置且添加了定位，作为了决定定位的移动标准，绝对定位这时可以更好的控制位置，定位元素的居中也有特殊的算法，先先left: 50%；然后margin-left: （自身宽度的一半负值），还可以top: 0; bottom: 0; left: 0; right: 0; margin: auto;，最后就是一些小的方法，margin负值配合浮动消去重叠的边框，但是后一个盒子会压住前一个的边框，再加上相对定位就可以让边框显示出来，

还有垂直居中vertical-aline:middle;，不过它只对行内元素或者行内块元素有用，对块级元素不管用，注意使用的场合。写代码的时候往往会出现一些你想不到的错误，有时候很难查出来，像权重不够，类名打错，括号丢失等等常见问题，为防止这些问题要养成良好的写代码习惯。

各种标签都有各自的优点与缺点，它们是相辅相成的，灵活去运用才能写出稳定的好页面。