自己在实习的时候，因对自己的认识不足导致现在要转方向，本来学Android 和 Java后台的我转去做前端。现在正在公司大佬的带领下，一步一步踏上前端之路。

从周一开始，练习骨架搭建已经有四天了，从一开始的无从下手，到现在稍微有了点想法，算是进步了那么一点点。学习的时候引路人真的很重要，不然自己不知道方向就会乱学、瞎学，导致自己越学越没信心。

现在根据我四天骨架搭建的遇到的一些问题，做出以下总结。本文章主要内容大纲如图。

主要大纲

在一开始搭建骨架的时候，发现很多元素不按照自己的想法来，到处乱跑，明明没有给他这个属性，他却自己自带了这些属性，后面自己检查后发现，有些标签是带有自己的一些属性！

1、html一些标签自带的属性

这里给大家举一些例子。

第一个标签：body。

body的自带属性，margin:8px

p标签

p标签自带的属性，这就比较多了。主要是margin-block-start和margin-block-end。

这里说一下，dispaly:blcok; 这个是申明他是块状元素，也就是非行内元素。什么是行内元素，什么是非行内元素，下面会做介绍。

h标签

h1

h2

h3

span标签

非常干净，啥都没有

a标签

很多属性啊，连颜色都有

细心的人会发现，span和a标签在同一行！这其实就证明了a标签也是行内元素，行内元素排在一起就不会自带换行！

ul标签

有margin： font 属性

display:list-item;

常用的我已经举例完毕，有些人可能会喜欢他们自带的一些属性，有些人就不喜欢。比如我，我就不喜欢他们有自己的思想，我也记不清楚他们有哪些属性，所以需要有一个配置的css文件去抹掉他们哪些自带的属性。

这是我从网上找到的重置代码，大家可以参考一下。

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;}

2、div居中的方法

在说这个之前，我们先来了解一下什么是行内元素，什么是非行内元素。

非行内元素（块级元素）

1.总是从新的一行开始。

2.高度、宽度都是可控的。

3.宽度没有设置时，默认为100% 。

4.块级元素中可以包含块级元素和行内元素。

行内元素

1.和其他元素都在一行。

2.高度、宽度以及内边距都是不可控的。

3.宽高就是内容的高度，不可以改变。

4.行内元素只能行内元素，不能包含块级元素

参考自：https://www.cnblogs.com/yxm440/p/7667539.html

上面是我找到概括非常经典的描述。我再根据自己实用中的理解，总结一下。

非行内元素。

1、需要另起一行。

2、可以给他height，width 属性，没有设置的时候，width是100%。

3、非行内元素里面可以包含非行内元素以及非行内元素。

行内元素。

1、不需要另起一行，默认在同一行，当宽度不够的时候，会换行。就像我之前举的例子，span标签和a标签，就不会自己换行

2、给width，height 都不管用！

3、行内元素中，不能包含非行内元素。

非行内元素（我觉得常用的都加粗了）：

<div>...</div> !!非常常用!!

<address>...</adderss>

<center>...</center> 地址文字

<h1>...</h6> 标题一级到六级

<hr> 水平分割线

<p>...</p> 段落

<pre>...</pre> 预格式化

<blockquote>...</blockquote> 段落缩进前后5个字符

<marquee>...</marquee> 滚动文本

<ul>...</ul> 无序列表

<ol>...</ol> 有序列表

<dl>...</dl> 定义列表

<table>...</table> 表格

<form>...</form> 表单

行内元素（常用的已标粗）

<span>...</span>

<a>...</a> 链接

<br> 换行

<b>...</b> 加粗

<strong>...</strong> 加粗

<img > 图片

<sup>...</sup> 上标

<sub>...</sub> 下标

<i>...</i> 斜体

<em>...</em> 斜体

<del>...</del> 删除线

<u>...</u> 下划线

<input>...</input> 文本框

<textarea>...</textarea> 多行文本

<select>...</select> 下拉列表

别看上面这么多，其实自己常用的就那么几个，忘记或者不清楚的时候过来查一查就完事了。

记得我老师和我说过：工具这么多，但是自己喜欢用的工具就那么几件，熟悉那几件就好了，但是这并不代表其他的不需要了解。

终于到了说居中的时候！

居中这个问题，当时困扰我很长时间，因为在做Android开发布局的时候，想要居中非常容易，所以当时布局网页的时候，完全不会啊，并且当时不知道哪些是行内元素，哪些不是！所以网上搜到的方法都会出点问题！所以在处理问题的时候要分类！分类！分类！这里就按照行内元素和非行内元素举例。

简单的行内元素居中（个人觉得这个比较简答，所以先学这个）

种类一、非行内元素在行内元素中居中。

~~种类二、非行内元素在非行内元素中居中。~~（个人觉得无实用场景）

种类三、行内元素在行内元素中居中。

~~种类四、行内元素在非行内元素中居中。~~ （不可能存在，上面说了，行内元素不能在非行内元素中）

种类三（行内元素在行内元素中居中）

场景1、一个大容器想要在屏幕中居中。