今天完成的事：task7-2 看了一下慕课网的bootstrap

明天完成的事：task8

遇到的问题：如何让边框产生阴影的效果 查了一下是 css3 shadow{ box-shadow: 0 0 3px #000;}

收货：行内元素和块级元素

1：常用块级元素 <div><p><h1><ul><table><form>

2:  常用行内元素<a><span><br><label>

3：常用内联块级元素 <img><input>

块级元素的特点：1一块一行（块状换行）2 行高宽可设置3默认与父元素宽度一致  

行内元素的特点： 1所有元素一行（连续多行） 2元素宽高不可设置！！！！！(这就是我一直纠结的地方)

元素相互转换  a{display:block}（行内—>块级） div{display:inline}(块级->行内)

需要注意的问题：

1.对行内元素，需要注意如下：

• 设置宽度width   无效。
  
• 设置高度height  无效，可以通过line-height来设置。
  
• 设置margin 只有左右margin有效，上下无效。
  
• 设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
• 
  

解决方法：为所有需要相对父容器居中对齐的块级元素设置“margin：0 auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持，所以还要设置父容器的 “text-align:center;”。若居中对齐的子元素内的行内内容不需要居中对齐，则还需要为其设置“text-align:left”：

2  在对div应用float:left/right;以后，即使我们不对div应用display:inline;其多个div仍然会排列在一行，那么float是否也可以改变了其块级元素的性质，将其变为行内元素了呢？

其原理是display的另外一个值inline-block，即行内的块级元素，它拥有块级元素的特点，可以设置宽高，padding，margin，但是它却又符合行内元素的特征：不独占一行，宽度不会沾满父元素，在不设置宽高 的情况下，宽高随内容变换；而且和行内元素一样可以排列于一行。

3我遇到过的问题

让文字与左边的图片/div垂直居中

解决办法

由于div 是块级元素，在css中并没有可以使块级元素内的元素垂直居中的属性。所以只能使用其他的方法。

1. 设置文字的padding，使其达到居中的效果。、

2. 在文字外层，div内包裹一个<p>标签，<div><p>只是一段文字</p></div>并将p标签的大小设置的与div标签同样大小。再对p标签应用vertical-align ：middle属性。

   具体如下：

   p{
   width:100%;
    height:100%;
   vertical-align:middle;}/*注意当p标签的height为百分比写法时，div标签的height不要使用百分比的写法*/

   
   

感觉自己整理的有点乱。。。。。以后再补充吧