HTML学习笔记二

来源:互联网 发布:固定循环编程注意? 编辑:程序博客网 时间:2024/05/22 07:00
  1. padding与margin的区别
    padding:盒子内部的填充,使用padding的时候一定要注意可能会被撑大,所以在布局的时候一定要注意
    margin:盒子外部的边距,对盒子的大小没有影响
  2. <a></a>标签的属性
    a标签是行内元素,不能设置width,height。可以设置margin,padding,但是margin,padding属性只对左右有效。如果要设置上下属性,则需要先将a标签变成块级元素利用 display:block;
    如果不想这样设置也可以采用相对定位的方式:positon:relative; top:10px;bottom:12px;

  3. display:inline-block/display:block;/display:inline;的区别

displayinline-block-->将对象呈递为内联对象,而里面的元素呈递为块级元素,可以设置上下的属性。旁边的内联对象被呈递在同一行。 
display:block;-->将对象设置为块级元素,比如可以对<a><p><span><label><input>设置为块级元素之后,然后就可以进行上下左右的属性以及高度和行高的属性设置。  
display:inline;-->将对象设置为行内元素,和其他元素在同一行,比如可以对<div><p><h1><form><ul><li>设置成行内元素,让所有的元素都在同一行,但是这个时候不能设置高度、行高、顶部边距和底部边距。 

4.对于导航栏的设置我们可以利用无序列表进行显示,对于ul元素,先去掉li元素前面的点,text-decoration:none;然后将每个li元素设置 float:left;然后分别设置上下和左右边距。
当然我们还可以利用span元素进行设计,将每个标题用span框起来,然后将span元素设置为块元素:display:block;然后进行每个span的宽度和高度,以及margin的设置。
5. 善于使用P标签,利用p标签来插入图片,可以保证让所有的图片都在同一行,然后设置居中就可以了,这样就不用为每张图片设置一个div然后再在div里面添加图片。