前端学习跟不上？你可能需要这操作！

零基础学习前端，在初期开始学习的时候难免会遇到各种问题，这时候就要记住这操作，掌握了这操作一定能有很大的提升。总结起来一句话就是ctrls保存，走一个娄一眼！这是大家在写前端日常的操作，意思就是多做多练多实战！下面是笔记，分享给大家。

外边距margin

margin属性接受:长度值,百分比值,负值,auto

margin:50px 50px 50px; 上 左右 下

margin:50px 50px 50px 50px; 上 右 下 左

margin:50px 50px; 上下 左右

内边距padding

padding属性接受:长度值,百分比值,不允许使用负值和auto

width和height定义了内容区域尺寸，增加内边距不会影响内容区域尺寸，但是会撑大整个元素框

样式初始化

有些浏览器会自动附加默认样式属性，因此要进行样式初始化,不建议使用全局初始化，只初始化用到的元素，优化加载速度，例如：

*{margin:0;padding:0;}

body,dl,dd,p,h1,h2,h3,h4{margin:0;}

ol,ul{margin:0;padding:0;list-style:none;}

a{text-decoration:none;}

img{border:none;}

块级元素和行内元素

块级元素

1.自动换行

2.默认占据一行，后面的元素换行显示

3.支持添加宽高

4.可以嵌套任意内容

5.支持margin和padding

6.常用的块级元素: div ul li dl olli table form [h1-h6 p 不能嵌套块级元素]

行内元素

1.不自动换行

2.不支持宽高

3.支持左右margin，不支持上下

4.支持左右padding，不支持上下，只对自身有效果

5.行内元素里面不能套块级

6.内联元素也叫行级元素它只占据他内容所占的位置,其它的内容在他后面显示

7.常见行内元素:a i b em span del

元素类型转换（即使显示或转换为块级元素，但实质仍然是行内元素，因此仍然不能套块级元素）

display:none;

隐藏对象

display:block;

显示为块级元素

display:inline;

显示为行内元素

display:inline-block;

以行内元素形式排列以块级元素显示

外边距合并

垂直外边距合并

当两个垂直外边距相遇时，他们将形成一个外边距，

合并后的外边距的高度等于两个发生合并的外边距的高度中较大的那个

嵌套的外边距合并

当两个盒子之间没有没有内边距或边框分开时，

给里面的盒子加上外边距，会自动把外边距合并到外面的盒子上

字体样式

复合写法需注意以下:

font:50px '微软雅黑';

字体大小，字体风格必写

font:bold italic 50px '微软雅黑','宋体';

###### 加粗,斜体等其他属性必须写在字体大小和字体风格属性前面，

写在后面无效！

font:bold italic 50px/2em '微软雅黑','宋体';

行高必须写在字体大小属性后面的斜杠之后

小型大写字母

font-variant:small-caps;

必须输入小写英文字母才能转换为大写的小型的字母

行与行之间的高度（行高）

line-height:px/%/em;

相对单位%/em是相对字体大小而言的高度

绝对定位居中的经典方式

.img{

        width: 102rpx;

        height: 110rpx;

        position: absolute;

        left: 50%;

        margin-left: -51rpx;

}

最后还是那句话ctrls保存走一个娄一眼