前端常用css样式及常见问题总结（持续更新中...）

一、前端学习工具

  对于前端的学习工具，我个人还是对Adobe Dreamweaver情有独钟。
  网上也可以找到其他的学习工具，这里就不做介绍了。
  工作以来深深体会到前端和UI的关系有多么的密切，所以，ps也是必不可少的技能之一。
  Adobe Dreamweaver
  Adobe Photoshop

Adobe Dreamweaver

Adobe Photoshop

---

二、常用的css前端样式

   前端样式有很多，这里就不一一列举啦。开发中比较常用的前端样式在这里简单总结一下（持续更新中）。

1.关于margin(外边距)

      margin：

      1）margin属性定义元素周围的空间。

      2）margin属性接受任何长度单位、百分数值甚至负值。

      3）margin清除周围的元素（外边框）的区域。

      4 ) margin没有背景颜色，是完全透明的

      5 ) margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。

问题示例（div子模块的margin-top属性，影响了父级div）：

影响父级示例图片.png

问题出现原因：
css在盒模型中规定

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。

问题解决方法：

• 让父级具有“包裹性”
• 将父级over-flow设为hidden
  .father{background:#F9F;width:400px; height:400px; overflow:hidden}
• 将父级display设为inline-block
  .father{background:#F9F;width:400px; height:400px; display:inline-block}
• 将父级float或absolute
• 改变父级的结构
• 给父元素设置padding
• 给父元素设置透明border

正常效果图.png

2.关于padding（内边距）

   padding:

   1) padding属性定义元素边框与元素内容之间的空间。

   2）当元素的 padding（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。

   3）单独使用填充属性可以改变上下左右的填充。

   4）缩写填充属性也可以使用，一旦改变一切都改变。

   5）padding 属性可以使用长度值或百分比值，但与 margin 属性不同，它不允许使用负值。

   6）padding 属性的百分比数值是相对于其父元素的 width 计算的，如果改变了父元素的 width，则它们也会改变。

   7）padding 上下内边距与左右内边距一致，即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

   8）padding属性，可以有一到四个值。

   padding:25px 50px 75px 100px;

     上填充为25px

     右填充为50px

     下填充为75px

     左填充为100px

   padding:25px 50px 75px;

    上填充为25px

    左右填充为50px

    下填充为75px

   padding:25px 50px;

     上下填充为25px

     左右填充为50px

   padding:25px;

    所有的填充都是25px

例子：

padding

padding效果图.png