前端常用css样式及常见问题总结（持续更新中...）
2019-01-14 本文已影响0人
火烧冰山
一、前端学习工具
对于前端的学习工具，我个人还是对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）：
<style>
.father{background:#F9F;width:400px; height:400px}
.sun{background:#FF9; width:200px; height:200px;margin:100px}
</style>
<body>
<div class="father" >
<div class="sun">
</div>
</div>
</body>
影响父级示例图片.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
例子：
<style>
.sun{background:#FF9;padding:100px }
</style>
<body>
<p class="sun">padding</p>
</body>
padding效果图.png
