一：border

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

應用：1.菜單的三條杠

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

2.三角形&梯形 (去掉寬高 就是正方形，修改border-color的四個角的顏色為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會修改可視區域的尺寸

適用場景：適用于沒用設定width/height的普通的block水平元素；只適用于水平方向的尺寸

2.百分比margin的計算規則

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

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

3.margin:auto

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

//圖片居中問題 img{width:200px;margin:0 auto} //不可以居中 因為此時圖片是inline水平，就算沒有width，它也不會占據整個容器，就不能均分img{display:block;width:200px;margin:0 auto} //可以居中 因為此時圖片是block，就算沒有width，也會占據整個容器，這樣就可以均分

實現水平垂直功能

.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元素自動填滿容器 而margin:auto自動平分被變更的尺寸空間，可以實現水平垂直居中

?4.margin 失效情況

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

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

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

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

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

轉載于:https://www.cnblogs.com/alhh/p/10287203.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。