在這里我所介紹的方法盡量做到了出現(xiàn)的bug最少、自適應(yīng)強豹悬，而且高效葵陵、實用、簡捷地實現(xiàn)常見網(wǎng)頁布局
從上到下屿衅，詳細描述內(nèi)容我就不一 一 解釋啦埃难，如字體、顏色涤久、大小涡尘、項目符號、下劃線等等响迂，請自己體會哦考抄！
CSS左右布局典型方法：
第一、網(wǎng)頁中實現(xiàn) logo 和導(dǎo)航欄的左右多列布局
logo 和 nav 都是寬度不確定蔗彤，根據(jù)內(nèi)容而定的川梅，div疯兼、a、Ul 等標簽均不用width/height 來確定寬高，目的有利于改動內(nèi)容；
?一部服、html結(jié)構(gòu)如下：
二擅耽、CSS具體步驟：（html從內(nèi)到外的寫法）
1、將a標簽里的兩個span的內(nèi)容通過margin、padding……屬性放到合適位置；
2、重要一步：將垂直分布的導(dǎo)航欄排列到水平線上 ：
? ? ? ? 1傀缩、.topNavBar nav > ul > li{ float: left; }? ? ? ?//水平線上排列
? ? ? ? 2、給 Li 的父級元素 Ul 添加.clearfix::after{ content: "";? ? display: block;? clear: both农猬；}? ? ? ?// 消除float 帶來的bug
? ? ? ? 3赡艰、載通過margin 、padding? ?屬性將導(dǎo)航條和 logo? 至于同一個高度斤葱；
? ? ? ? 4慷垮、這一步也是在導(dǎo)航條中常見的樣式： 給最外面的 div 添加 .topNavBar{ position:fixed;}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? /*相對屏幕固定，? 將logo 及導(dǎo)航條始終位于可視頁面的頂部 */
三苦掘、網(wǎng)頁效果如圖：
第二换帜、頁面中間實現(xiàn)左右兩列布局
一、html結(jié)構(gòu)如下：
二鹤啡、CSS具體步驟：
1惯驼、.userCard .picture{? float: left; }? ;
.userCard .text{? float: left; }? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//將picture 和 text 浮動起來，分為左右兩部分
2递瑰、<div class="pictureAndText clearfix">? ? ? ? ? // 給父級元素添加clearfix,消除float 帶來的bug
3祟牲、.userCard dl dd,.userCard dl dt{ float: left; }? ? // 將text里面的 dt、dd 內(nèi)容 浮動起來
4抖部、.userCard dl dt{width: 30%;}? ? ? ? ? ? /* 根據(jù)內(nèi)容,將 dt说贝、dd 占有合適的寬度，只要兩者之和
? ? ? .userCard dl dt{width: 30%;}? ? ? ? ? ? ? 等于100% 即可慎颗，若有paading則寬度適可而止*/
三乡恕、網(wǎng)頁效果如圖：
在此，外面兩列左右布局俯萎，內(nèi)部text 內(nèi)容再次左右兩列布局傲宜；
在這里，hello是以圖片形式顯示的夫啊，具體做法就不介紹了函卒，有興趣可以點擊下面鏈接了解具體做法：https://htmlpreview.github.io/?https://raw.githubusercontent.com/cnqinglin/The-Shapes-Of-Css.github.io/master/index_shape.html? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?復(fù)制藍色部分可以查看源代碼哦
第三、頁面中間實現(xiàn)左右多列布局
一撇眯、html結(jié)構(gòu)如下：
二报嵌、CSS具體步驟：
1虱咧、.userCard > footer.media > a{ display: inline-block; }? ? ? // 以內(nèi)聯(lián)元素形式顯示、塊級元 素? ? ? ? ? ? ????????????????????????????????????????????????????????????????????????????????????????形式排列
2锚国、.userCard > footer.media{ text-align: center;}? ? ?????/*通過給父級元素text-align：cernter;使a? ????????????????????????????????????????????????????????????????????????????????元素居中腕巡，inline-block 的好處是不管 有多? ? ? ? ? ? ? ? ? ? ????????????????????????????????????????????????????????????????少a 標簽都會居中，以內(nèi)容來決定寬度*/
3跷叉、.media > a >svg{ vertical-align:center;}? ? //消除dispaly:inline-block逸雹；的bug;使圖片上下間隙 ????????????????????????????????????????????????????????????????????????????一樣
三、網(wǎng)頁效果如圖：
CSS左右布局簡單的其它方法：
1云挟、簡單的塊級元素里頭內(nèi)容居中時外面塊級元素添加 margin:auto;? 里面內(nèi)聯(lián)元素添加 tex-align: center;即可；
2转质、想把圖片放到任意位置：最好用絕對定位：給父級元素position：relative;給自己元素position:absolute;再用 top/left/right/bottom布局园欣；
CSS水平居中方法：
1、內(nèi)聯(lián)元素內(nèi)文字水平居中：
直接加text-align:center;
2休蟹、塊級元素內(nèi)部文字或圖片居中：
先將內(nèi)容浮動沸枯，把他父級元素居中就行；比如：ol/ul 的li 里面有內(nèi)容居中時赂弓，給ol/ul 外面加div绑榴，再給div添加text-align:center;
舉例：
html:? ??
????<div>
? ? ???????? <ol>
? ? ? ????????????? <li>內(nèi)容一</li>
? ? ? ? ????????????<li>內(nèi)容二</li>
? ? ? ? ????????????<li>內(nèi)容三</li>
? ? ? ? ????????????<li>內(nèi)容四</li>
? ? ? ? ????????????<li>內(nèi)容五</li>
? ? ? ? ????????????<li>內(nèi)容六</li>
? ? ? ? ????????????<li>內(nèi)容七</li>
? ? ? ? ????????????<li>內(nèi)容八</li>
? ? ? ? ????????????<li>內(nèi)容九</li>
? ? ? ? ????????????<li>內(nèi)容十</li>
? ? ???? </ol>
? </div>
css
? ??????????div{
????????????????? border:1px solid red;
????????????????? text-align:center;
????????????????}
? ? ? ? ? ? ol{
? ????????????????list-style:none;
? ????????????????display:inline-block;
????????????}
? ? ? ? ? li{
? ????????????????float:left;
? ????????????????padding-right:30px;
????????????}
結(jié)果：
CSS垂直居中方法：
1、塊級元素里內(nèi)容垂直居中：
????(1)? ?想要一個把 div 高度最終設(shè)為為 30px盈魁，div 里有內(nèi)聯(lián)元素（一行字)垂直居中翔怎，字的大小為 14px :?
????????方法一:給 div 的樣式為 font-size: 14px; line-height: 20px; padding: 5px 0;?
????????方法二：給 div 的樣式為 font-size: 14px; line-height: 24px; padding: 3px 0;?
????????方法三：給 div 的樣式為 font-size: 14px; line-height: 30px;
????(2)? div里面有個div，想把里面的div垂直水平都居中：
? ? ? ? 第一種情況：
? ? ? ? 需要外部div設(shè)為屏幕一樣寬高（外部div高確定）里面的居中杨耙，（定寬定高）則做法：
? ??????html:? ?<div class='dad'><div class='son'></div></div>
????????css:? ? .dad{ box-sizing:border-box;height:100vh;}
? ? ? ? ? ? ? ? ? ?.son{ width:? ?px; height:? ? px; padding:? ?px; margin:auto; position:absolute; right：0px; left:0px; top:0px;bottom:0px;}
????????第二種情況：
? ? ? ? ?外部div的高度寬度都不確定赤套，里面的div居中的做法：
? ??????html:? ? <div class='dad'><div class='son'></div></div>
????????css:? ? .dad{ display:flex;justify-content:center;align-items:center;}
? ? ? ? ? ? ? ? ? ?.son{ width:? ?px; height:auto; padding:? ?px;}
2、內(nèi)聯(lián)元素里內(nèi)容垂直居中：
方法一：給文字添加font-size.再給它設(shè)置一樣的上下padding珊膜；
方法二：
? ??????????????????????????????<html>
? ? ? ????????????????????????????????<span>
? ????????????????????????????????????????hahhashshdd哈哈哈fkslj 發(fā)的水庫和第三方庫河水庫防洪看 鳳凰? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? u'k'f'sh'f'd'k'dasjkdkbsdfbfsdkhbshdbfhsdbhfb房貸首付fksdbfsdsf? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ????bhhahhhahhah是哈韓圣誕卡社比菸眨卡不哭哈不是靠好吧點回? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ????????????復(fù)BASF吧
????????????????????????????????????</span>
????????????????????????????</html>
??????????????????????????????span{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?border:1px solid red;（這個可忽略）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?display:inline-block;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?padding-top:20px;
? ????????????????????????????????????padding-bottom:20px;
? ????????????????????????????????????line-height:20px;
????????????????????????????????????}
一般不使用vertical-align:center;display:inline-block;時出bug時才用到；
若在div中只有文字建議用第一個方法车柠，div中有其他塊級元素或結(jié)構(gòu)較復(fù)雜剔氏，建議使用方法二：好處是不局限于內(nèi)容多少
以上全部內(nèi)容概括：布局問題都涉及到水平垂直居中，垂直居中較簡單竹祷，而水平居中無非以下兩種方法：
? ?????????1谈跛、父元素：text-align:center;? ? ? ?
? ??????????????子元素：display:inline-block;? ?通常這個方法有bug,比如ul>li水平居中時中間會出來空隙。
? ? ? ? ? ?2溶褪、父父元素：text-align:center;? ?
? ??????????????父元素 ：?.clearfix{content:"";display:block;clear:both;}? ;? ? ? ? ?在這里有時需要讓父元素緊緊包圍時不要寫clearfix币旧，不然會把整個寬度包含進來。? ? ? ??
? ??????????????子元素：float：left/right;
定位問題：
1猿妈、絕對定位：脫離文檔流
? ?方法1： position:fixed;? ?相對于屏幕固定吹菱；一般用于背景圖巍虫；
2、相對定位：沒有脫離文檔流鳍刷，相對父級元素定位占遥，就是相對于之前的位置而按要求移動
? ? 方法：????????????父元素：position:relative;? ? ?//但是添加了這個屬性后就不脫離文檔流了
? ? ? ? ? ? ? ? ? ? ? ? ? 子元素：position:absolute;? ? //這一步脫離文檔流了
3、脫離文檔流方法：
? ??????方法1： position:fixed;? ?相對于屏幕固定输瓜；一般用于背景圖瓦胎；
????????方法2： position:absolute;? ?相對于父級元素定位；
? ??????方法3： float:left;? ?浮動起來尤揣；
元素高度：
1搔啊、內(nèi)聯(lián)元素：
? ? ????????內(nèi)聯(lián)元素是不接受高度的，由內(nèi)容來決定（行高）高度北戏，非要給它設(shè)置寬高负芋，添加display:inline-block;屬性，display:inline-block;屬性使元素以內(nèi)聯(lián)元素形式排列嗜愈，塊級元素樣式顯示旧蛾；
? ? ? ? ? ? （內(nèi)聯(lián)元素的左右會受margin\padding的影響，但高度不受影響蠕嫁；）
2锨天、塊級元素：
? ? ? ? ? ? 塊級元素是由其內(nèi)部文檔流總和決定；
文檔流Normal? Flow：內(nèi)聯(lián)元素從左往右流動剃毒，遇到阻礙就會換行病袄；塊級元素從上往下、每一個元素占一行迟赃、（分別另起一行流動）陪拘、依次流動；
?
……………………………………div的高度有誰來決定：…………………………………………
1纤壁、在div中只有多個內(nèi)聯(lián)元素（span里文字）時：div的高度是有行高決定
? ??????文字省略溢出：
?????????1左刽、一行文本：給父級元素添加：white-space:nowrap;? //多出的隱藏掉? ?overflow:hidden;? ?text-overflow: ellispsis;
?? ??????2、多行文本：直接在谷歌上搜：css moulti line text ellipsis 即可酌媒；
?2欠痴、在div中有只塊級元素時:? ?分情況：看看margin合不合并決定高度問題
? ??????margin合并問題：
????????????<div class='dad'>? ? ? ? ? ? ? ? ? ? ? 這種情況下阻止margin合并方法：(就是讓子元素全部放在父元素里面)
? ??????????<div class='son'></div>? ? ? ? ?方法1、.dad{? padding-top:xxx;padding-bottom:xxx;}? ?建議使用
????????????</div>????????????????????????????????????方法2秒咨、.dad{? overllow:hidden;}? ?不是很建議這個方法喇辽，當需要做到懸浮層時就不能這樣做；
3雨席、在div中既有內(nèi)聯(lián)元素又有塊級元素時：高度有div中內(nèi)部文檔中流元素總和決定菩咨；
總結(jié)：div的高度是由它內(nèi)部文檔流的元素總和決定；如果是里面元素脫離了文檔流，則在計算高度時不算進來抽米；
常用的兩個頁面效果：
1特占、實現(xiàn)一個一比一的div的方法：
<div></div>
div{ border:? px solid red; padding-top:100%;}
2、寫出「姓名」與「聯(lián)系方式」兩端對齊的方法：
css:
? ? span {
? ? ? display: inline-block;
? ? ? width: 5em;
? ? ? text-align: justify;
? ? ? line-height: 20px;
? ? ? overflow: hidden;
? ? ? height: 20px;
? ? }
? ? span:after{
? ? ? content: '';
? ? ? display: inline-block;
? ? ? width: 100%;
? ? ? border: 1px solid blue;
? ? }
html:
<div>
? <span>姓名</span><br>
? <span>聯(lián)系方式</span>
</div>
????????????????????????????????????????????????????????????????????????????????以后會不定期更新內(nèi)容
