网页布局中的小总结

今天一天都是自己动手敲代码的一天，跟着网上的网页布局设计图，把它分为一块一块的部分，然后每块每块的自己手动来敲，这个过程和这个设计图包括了我前面所学的CSS和HTML中的基本全部内容，布局，样式，都用上了，也算是对自己的一种巩固吧。这是我的网页布局demo网页布局作业.在这个过程中也遇到很多难题，一个一个都解决了，但是最让我印象深刻的就是下面这三个问题。

如何把块放在父元素的底部

要想达到这个效果只需要把该块的父元素设置为相对定位，把该块设置为绝对定位，然后在该块css中添加bottom：0；就可以达到我们想要的效果。例如：

HTML中代码：

<div class="parent">
      <div class="child">
      位于底部
            </div>
</div>

css中代码如下：

.parent{
	position:relative;
}

.child{
	position:absolute;
	bottom:0;
}

通过这两个样式设定就可以达到我们想要的结果。

绝对定位块如何水平居中

当我在做我自己的第一份网页设计demo的时候，用到了绝对定位，但是我想的是把绝对定位的块放在底部并且能够水平居中，放在底部的代码上面已经实现了，但是整个绝对定位的块是靠近父元素最左边的，没有达到水平居中，并且margin：0 auto；代码已经不管用了，所以接下来就是怎么让绝对定位的子元素能够在父元素中能够水平居中。
HTML代码如下：

<div class="parent">
      <div class="child">
            </div>
</div>

css代码如下：

.parent{
	position:relative;
}

.child{
	width:100px;/*定义宽度*/
	position:absolute;
	bottom:0;
	left:50%;/*绝对定位距离左侧50%处也就是到页面中间处*/
	margin-left:-50px;/*左移动本身宽度的1/2以保证绝对水平居中*/
}

这个方法的基本思路就是先用left：50%；来让左对齐的绝对定位块先中间对齐，此时的绝对定位块的头部在正中间，然后在已知该块宽度的情况下，再利用margin-left的负边距特性，将该块往左移动半个该块长度的距离。从而就实现了绝对定位水平居中并且放在底部的效果。

如何使文字在div中水平和垂直居中

这个其实很早以前就已经学过，但是可能是由于当时并没有相关的实践练习，所以对其中的一些概念理解得也不是很深入，到了在应用的时候，就会有点不知所措。
我用的方法就是使用text-align和line-height属性来设置的。
HTML代码如下：

1
2
3

<div class="a">
      水平垂直居中
</div>

CSS代码如下：

.a{
	width:100px;
	height:50px;
	text-align:center;
	line-height:50px;
}

这样的话就实现了在div块中的文字能够水平居中。line-height是指行高，如果文本的行高跟它的父容器一样高的话，那么该文字就会垂直居中。

心得体会

今天自己看着网页设计稿，然后跟着它的分块解析把一块一块写出来，最后拼接在一起。网页设计稿是很简单的一个布局，，但是实现起来却还是会有很多意想不到的难点，这些难点一点一点的去解决，去查阅资料。去上网搜寻，最后想出解决办法，并且通过解决办法让自己能更加理解其中的理论知识，这种知识的获得与巩固是来源于自己的亲手实验操作的。得到的和学会的知识点也是更加记忆深刻的，所以这应该就是“实践出真知”吧。而我自己也希望在以后的许多动手实践过程中能够从实践原理中去更为深刻的理解其工作原理。以后也要多多练练手，多多积累实战经验和实战中遇到的难点，让自己能够从实战中学到更多。