前端初学学习进程III

这次主要是继续深入了解CSS以及开始了JS的学习

css深入了解篇

一、padding的深入了解

1.padding对元素尺寸的影响

对于block水平元素

• padding值太大，一定会影响元素尺寸。
• width非auto，padding会影响。
• width为auto或box-sizing为border-box，同时padding值没有过大，不影响尺寸。

水平padding影响尺寸，垂直padding不影响尺寸，但会影响背景色（占据空间）

2.padding百分比值

padding百分比值相对于宽度特性，可以利用其实现一个正方形

{padding：50px;}

inline元素的padding百分比值（内联）

• 同样相对于宽度计算
• 默认的高度宽度细节有差异
• padding会断行

3.标签元素内置padding

表单元素的内置padding

• 所有浏览器的input/textarea输入框内置padding
• 所有浏览器button按钮内置padding
• 部分浏览器select下拉内置padding
  firefox IE8+可以设置padding
• 所有浏览器radio/checkbox无内置padding
  button按钮最难控制
• chorme浏览器 兼容 非常好
• firefox 设置padding:0左右仍有padding
  解决办法：button：：-moz-focus-inner{padding:0;}
• IE浏览器
  文字越多pdding越大
  解决办法： .button{overflow:visiable;}

4.padding与高度计算不兼容

平时最好采用a标签模拟按钮或者lable标签

<button id="btn"></button>
<lable for="btn"></lable>
lable{
display:inline-block;
}

二、margin的深入理解

1.margin的计算规则

• 普通元素的百分比margin都是相对于容器宽度计算的
• 绝对定位元素的百分比margin都是相对于第一个定位祖先元素的宽度计算的（relative/absolute/fixed）

2.css的margin重叠

3种情境重叠

• 相邻的兄弟元素
• 父级的第一个和子级的最后一个
• 空的block元素

代码解析

父级与子级
<div class="father" style="width:100px;height:100px;background-color:blue;">
<div class="son" style="margin-top:15px;">CSDN</div>
</div>
此时CSDN不是距离蓝色顶部15px,而是蓝色框距离页面顶部15px。
相邻的兄弟元素
<div class="a" style="margin-bottom:100px;background-color:blue;"> </div>
<div class="b" style="margin-top:50px;background-color:red">CSDN</div>
此时两个CSDN之间的距离不是150px，而是100px；

margin-top重叠条件

• 父元素非块状格式化上下文元素
• 父元素没有border-top设置
• 父元素没有padding-top值
• 父元素与子元素之间没有inline元素分隔
• 父元素没有height,min-height,max-height的限制

空block元素的margin重叠

• 元素没有border
• 元素没有padding
• 没有inline
• 没有height或min-height

margin重叠计算规则

• 正正取大
• 正负相加
• 负负最负

其他了解

网页布局中
字体大小为12-14px最好
padding-left值为22-25px最好