border是乙個大綜合屬性，border:1px solid red;
就是把4個邊框，都設定為1px寬度、線型實線、red顏色。border屬性能夠被拆開，有兩大種拆開的方式：
1） 按3要素:border-width、border-style、border-color
2） 按方向：border-top、border-right、border-bottom、border-left按3要素拆開：
border-width:10px; → 邊框寬度
border-style:solid; → 線型
border-color:red; → 顏色。
等價於：
border:10px solid red;
現在心裡要明白，原來乙個border是由三個小屬性綜合而成：
border-width border-style border-color。
如果某乙個小要素後面是空格隔開的多個值，那麼就是上右下左的順序：
border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;
按方向來拆
border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;
等價於border:10px solid red;
按方向還能再拆一層，就是把每個方向的，每個要素拆開，一共12條語句：
border-top-width:10px;
border-top-style:solid;
border-top-color:red;
border-right-width:10px;
border-right-style:solid;
border-right-color:red;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-width:10px;
border-left-style:solid;
border-left-color:red;
等價於border:10px solid red;
Web前端篇 CSS盒模型
常用塊元素由 p,h1 h6,div,ul,ol,tr,li,form常用內聯元素由 a,span,em,i,strong,u,常見的內聯塊元素 上面三句 相當於一句 border 3px solid red 同樣,也可以分別設定邊框四個方向的粗細 線性樣式 顏色,跟padding的四個方向一樣。上...
web前端 之 CSS盒模型
盒模型包括margin border padding content 由外向裡 盒模型包括標準模型和ie模型 如下圖所示 注意他們的高寬度包含的內容 標準模型高度和寬度指的是content的高度和寬度 ie模型高度和寬度指的是content padding border加起來的高度和寬度 標準模型 ...
學習CSS盒模型和CSS3彈性盒模型
css盒模型本質是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。div300px 寬 50px 左 右填充 50px 左 右邊框 50px 左 右邊距 450px 最終元素的總寬度計算公式是這樣的 總元素的寬度 寬度...