HTML常用代码总结

HTML常用代码总结

一、图标

• 下载网站图标： 网站名（带www.）/favicon.ico

• 引入图标：<link rel = "icon" href = "图标所在路径”>

• 在线制作图标： 网址——bitbug.net

写代码时注意事项

• 同一个父盒子要么设置浮动，要么都不设置
• 给html文档相邻的同级盒子设置浮动，会顶对齐
• 行高line-height也可撑开盒子，使文字上下居中
• 设置了定位position，若不给left（right）或top（bottom）值，会出现bug
• a标签之间有3像素的距离
• 文字不参与浮动，标准流中的文字不会被浮动的盒子遮挡
• 盒子的撑开和诚达区别：没设置高度的盒子是撑开，即盒子变成所设置的那么大；有高度的盒子会被撑破，即盒子还本身没那么高。
• 有层级z-index之前必要有定位，层级才起作用
• 层级的值为数字，范围在0~99之间

插入精灵图和直接插入html中的图片的注意事项

1. 插入精灵图
   
   • 以背景图片的形式加入在css的样子中 要设置精灵图的宽、高 必要时，给精灵图设置定位使之更精确
2. 插入背景图片：采用定位和浮动

对行内元素设置宽、高使之起作用的前提

• 使行内元素变为行内块display:block; 然后再设置宽高
• 使用浮动float:left/right; 然后再设置宽高
• 使用定位position 然后再设置宽高

什么时候使用margin和padding

• 需要使用背景图的时候必须使用padding
• 会出现外边距合并或margin塌陷时用padding
• 看border，若为a链接，看能否让字体变色或显小手
• 行内元素上下只能设置padding，不能设置margin
• 看具体项目实现的需求