? ? ? ? ?自己在實(shí)習(xí)的時候滨彻，因?qū)ψ约旱恼J(rèn)識不足導(dǎo)致現(xiàn)在要轉(zhuǎn)方向盖腕，本來學(xué)Android 和 Java后臺的我轉(zhuǎn)去做前端《塾颍現(xiàn)在正在公司大佬的帶領(lǐng)下，一步一步踏上前端之路妇萄。
? ? ? ? ? 從周一開始蜕企，練習(xí)骨架搭建已經(jīng)有四天了，從一開始的無從下手冠句，到現(xiàn)在稍微有了點(diǎn)想法轻掩，算是進(jìn)步了那么一點(diǎn)點(diǎn)。學(xué)習(xí)的時候引路人真的很重要懦底，不然自己不知道方向就會亂學(xué)放典、瞎學(xué)，導(dǎo)致自己越學(xué)越?jīng)]信心。
? ? ? ? 現(xiàn)在根據(jù)我四天骨架搭建的遇到的一些問題奋构，做出以下總結(jié)。本文章主要內(nèi)容大綱如圖拱层。
? ? ? ? 在一開始搭建骨架的時候弥臼，發(fā)現(xiàn)很多元素不按照自己的想法來，到處亂跑根灯，明明沒有給他這個屬性径缅，他卻自己自帶了這些屬性，后面自己檢查后發(fā)現(xiàn)烙肺，有些標(biāo)簽是帶有自己的一些屬性纳猪！
1、html一些標(biāo)簽自帶的屬性
? ? ? ? 這里給大家舉一些例子桃笙。
? ? ? ? 第一個標(biāo)簽：body氏堤。
? ? ? ? p標(biāo)簽
這里說一下星著，dispaly:blcok; 這個是申明他是塊狀元素购笆，也就是非行內(nèi)元素。什么是行內(nèi)元素虚循，什么是非行內(nèi)元素同欠，下面會做介紹。
? ? ? ? h標(biāo)簽
? ? ? ? ? ? ? ? span標(biāo)簽
a標(biāo)簽
細(xì)心的人會發(fā)現(xiàn)，span和a標(biāo)簽在同一行剪廉！ 這其實(shí)就證明了a標(biāo)簽也是行內(nèi)元素娃循，行內(nèi)元素排在一起就不會自帶換行！
? ? ? ? ul標(biāo)簽
? ? ? ? 常用的我已經(jīng)舉例完畢斗蒋，有些人可能會喜歡他們自帶的一些屬性捌斧，有些人就不喜歡。比如我泉沾，我就不喜歡他們有自己的思想捞蚂，我也記不清楚他們有哪些屬性，所以需要有一個配置的css文件去抹掉他們哪些自帶的屬性跷究。
? ? ? ?這是我從網(wǎng)上找到的重置代碼姓迅，大家可以參考一下。
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居中的方法
????????在說這個之前丁存，我們先來了解一下什么是行內(nèi)元素肩杈，什么是非行內(nèi)元素。
非行內(nèi)元素（塊級元素）
1.總是從新的一行開始 解寝。
2.高度扩然、寬度都是可控的 ?。
3.寬度沒有設(shè)置時聋伦，默認(rèn)為100% ?夫偶。
4.塊級元素中可以包含塊級元素和行內(nèi)元素。
行內(nèi)元素
1.和其他元素都在一行 觉增。
2.高度兵拢、寬度以及內(nèi)邊距都是不可控的。
3.寬高就是內(nèi)容的高度逾礁，不可以改變说铃。
4.行內(nèi)元素只能行內(nèi)元素，不能包含塊級元素
參考自：https://www.cnblogs.com/yxm440/p/7667539.html
? ? ? ? 上面是我找到概括非常經(jīng)典的描述敞斋。我再根據(jù)自己實(shí)用中的理解截汪，總結(jié)一下。
非行內(nèi)元素植捎。
1衙解、需要另起一行。
2焰枢、可以給他height蚓峦，width 屬性，沒有設(shè)置的時候济锄，width是100%暑椰。
3、非行內(nèi)元素里面可以包含非行內(nèi)元素以及非行內(nèi)元素荐绝。
行內(nèi)元素一汽。
1、不需要另起一行低滩，默認(rèn)在同一行召夹，當(dāng)寬度不夠的時候，會換行恕沫。就像我之前舉的例子监憎，span標(biāo)簽和a標(biāo)簽，就不會自己換行
2婶溯、給width鲸阔，height 都不管用偷霉！
3、行內(nèi)元素中褐筛，不能包含非行內(nèi)元素类少。
非行內(nèi)元素（我覺得常用的都加粗了）：
<div>...</div> ?!!非常常用!!
<address>...</adderss>
<center>...</center>? 地址文字?
?<h1>...</h6>? 標(biāo)題一級 到 六級 ?
?<hr>? 水平分割線??
<p>...</p>? 段落?
?<pre>...</pre>? 預(yù)格式化??
<blockquote>...</blockquote>? 段落縮進(jìn)? ?前后5個字符??
<marquee>...</marquee>? 滾動文本??
<ul>...</ul>? 無序列表??
<ol>...</ol>? 有序列表??
<dl>...</dl>? 定義列表??
<table>...</table>? 表格??
<form>...</form>? 表單?
行內(nèi)元素（常用的已標(biāo)粗）
<span>...</span>??
<a>...</a>? 鏈接??
<br>? 換行?
?<b>...</b>? 加粗?
?<strong>...</strong>? 加粗?
?<img >? 圖片??
<sup>...</sup>? 上標(biāo)?
?<sub>...</sub>? 下標(biāo)?
?<i>...</i>? 斜體??
<em>...</em>? 斜體??
<del>...</del>? 刪除線??
<u>...</u>? 下劃線?
?<input>...</input>? 文本框??
<textarea>...</textarea>? 多行文本??
<select>...</select>? 下拉列表
? ? ? ? 別看上面這么多，其實(shí)自己常用的就那么幾個渔扎，忘記或者不清楚的時候過來查一查就完事了瞒滴。
? ? ? ? 記得我老師和我說過：工具這么多，但是自己喜歡用的工具就那么幾件赞警，熟悉那幾件就好了，但是這并不代表其他的不需要了解虏两。
? ? ? ? 終于到了說居中的時候愧旦！
? ? ? ? 居中這個問題，當(dāng)時困擾我很長時間定罢，因為在做Android開發(fā)布局的時候笤虫，想要居中非常容易，所以當(dāng)時布局網(wǎng)頁的時候祖凫，完全不會啊琼蚯，并且當(dāng)時不知道哪些是行內(nèi)元素，哪些不是惠况！所以網(wǎng)上搜到的方法都會出點(diǎn)問題遭庶！所以在處理問題的時候要分類！分類稠屠！分類峦睡！這里就按照行內(nèi)元素和非行內(nèi)元素舉例。
簡單的行內(nèi)元素居中（個人覺得這個比較簡答权埠，所以先學(xué)這個）
種類一榨了、非行內(nèi)元素在行內(nèi)元素中居中。
種類二攘蔽、非行內(nèi)元素在非行內(nèi)元素中居中龙屉。（個人覺得無實(shí)用場景）種類三、行內(nèi)元素在行內(nèi)元素中居中满俗。
種類四转捕、行內(nèi)元素在非行內(nèi)元素中居中。（不可能存在漫雷，上面說了瓜富，行內(nèi)元素不能在非行內(nèi)元素中）
種類三（行內(nèi)元素在行內(nèi)元素中居中）
? ? ? ? 場景1、一個大容器想要在屏幕中居中降盹。
? ? ? ? 思路1:大容器定寬与柑，設(shè)置 margin:0 auto;
? ? ? ? 思路2:在外面套一層width:100%;設(shè)置屬性display:flex; 和?justify-content: center;
?????????場景1谤辜、一個div想要在父div中上下左右居中
????????思路：父級div設(shè)置display:flex;justify-content:center;
種類一（非行內(nèi)元素在行內(nèi)元素中居中）
????????場景1、一段文字想要左右价捧、上下居中丑念。
? ??????
? ? ? ? ?思路1:div里面套span，把span變成塊級元素结蟋，再居中脯倚。
? ??????
? ? ? ? 場景2、一張圖片想要左右嵌屎、上下居中推正。
