第六章 盒子模型
阿新 • • 發佈:2018-11-02
idt padding 模型 pre 外邊距 true light borde 陰影
一.邊框 1.邊框顏色 border-color 邊框顏色(可以設置上邊框,如:border-top-color,也可以整體設置,但是要註意順序) 2.邊框粗細 border-width 邊框粗細(可以設置上邊框,如:border-top-width,也可以整體設置,但是要註意順序) 2.邊框樣式 border-style 邊框樣式(可以設置上邊框,如:border-top-style,也可以整體設置,但是要註意順序) 二.外邊距 1.margin 盒子距離瀏覽器的距離 (可以設置上外邊距,如:margin-top,也可以整體設置,但是要註意順序) 2.居中 margin: 0px auto 三.內邊距 1.padding 內容到盒子的距離 (可以設置上內邊距,如:padding-top,也可以整體設置,但是要註意順序) 四.盒子模型的尺寸 尺寸默認:padding+margin+wigth+border box-sizing 方便計算盒子模型尺寸(默認為content-box,border-box代表隨著內容的寬度高度變化而變化) 五.圓角 border-radius 圓角(左上,右上,右下,左下) /*如果想要一個圓,那麽必須滿足寬和高一致,圓角取寬度或者高度的二分之一*/ /*如果想要半圓,那麽必須滿足寬是高的2倍,圓角取寬度的二分之一*/ /*如果想要四分之一圓,那麽必須滿足寬和高相等,圓角取寬度相等值*/ 六.盒子陰影 box-shadow 默認為外陰影,內陰影為inset box-shadow: 5px -5px 20px black;
第六章 盒子模型