一：border

知識(shí)點(diǎn)：border-width的寬度是不支持百分比的：像margin，padding設(shè)置百分比是會(huì)隨著屏幕的大小而變化的 但是border的大小無論屏幕多大他的寬度基本上是固定的 所以只能設(shè)置px而不能設(shè)置%

應(yīng)用：1.菜單的三條杠

.menu{width:120px;height:20px;border-top:60px double;border-bottom:20px solid;padding-top:20px;color:#999 }

2.三角形&梯形 (去掉寬高 就是正方形，修改border-color的四個(gè)角的顏色為transparent就是三角形）

{ width:40px; height:40px; border-width:10px; border-style:solid; border-color:pink red blue green; } {/* width: 40px; *//* height: 40px; */border-width: 10px;border-style: solid;border-color: red transparent; }

?二：margin

1.margin會(huì)修改可視區(qū)域的尺寸

適用場(chǎng)景：適用于沒用設(shè)定width/height的普通的block水平元素；只適用于水平方向的尺寸

2.百分比margin的計(jì)算規(guī)則

①：普通元素的百分比margin都是相對(duì)于容器的寬度計(jì)算的

②：絕對(duì)定位元素的百分比margin值是相對(duì)于第一個(gè)定位祖先元素(relative/absolute/fixed)的寬度計(jì)算的

3.margin:auto

原本應(yīng)該填充的尺寸被width/height強(qiáng)制變更，而margin:auto就是為了填充這個(gè)變更的尺寸設(shè)計(jì)的；如果一側(cè)定值，一側(cè)auto，auto為剩余空間的大小，如果兩側(cè)均是auto，則平分剩余空間，左右均是auto，則居中顯示

//圖片居中問題 img{width:200px;margin:0 auto} //不可以居中 因?yàn)榇藭r(shí)圖片是inline水平，就算沒有width，它也不會(huì)占據(jù)整個(gè)容器，就不能均分img{display:block;width:200px;margin:0 auto} //可以居中 因?yàn)榇藭r(shí)圖片是block，就算沒有width，也會(huì)占據(jù)整個(gè)容器，這樣就可以均分

實(shí)現(xiàn)水平垂直功能

.father{height:200px;position:relative} .son{position:absolute;top:0;right:0;bottom:0;left:0;width:500px;height:100px;margin:auto}//width/height限制了absolute元素自動(dòng)填滿容器 而margin:auto自動(dòng)平分被變更的尺寸空間，可以實(shí)現(xiàn)水平垂直居中

?4.margin 失效情況

(1). inline水平元素的垂直margin無效

有兩個(gè)前提.①.非替換元素，例如，不是<img>元素 ②.正常書寫模式 <span style="margin:200px"> margin無效</span>

(2). display:table-cell / display:table-row 等聲明的margin無效

(3).絕對(duì)定位元素非定位方向的margin值 “無效”

//看似無效，實(shí)則微妙 給容器添加position：relative 再加margin值就有效了// 非定位方向 position：absolute; top:10px; margin-top:10px; //有效 margin-left:20px; //無效

轉(zhuǎn)載于:https://www.cnblogs.com/alhh/p/10287203.html

總結(jié)

以上是生活随笔為你收集整理的深入剖析 css的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。