盒子模型

盒子模型

盒子模型：在html中，任意一個元素都可以被當做一個盒子來看待。

盒子就是用來裝東西的，html中的盒子，是用來裝頁面各種形式的內容。

盒子模型的基本組成：

w3c：margin border padding content（width，height）

在w3c下，在任一方向添加margin，border或padding都會使元素整體佔用的空間變大。

盒子的設置順序：

margin: 10px 20px 30px 40px;/*上  右  下 左 */

            margin:10px 20px 30px;/*上  左右  下*/

            margin:10px 20px;/*  上下     左右*/

            margin: 10px;/*上右下左*/

盒子模型的居中

margin-top: calc((height1 – height2) / 2);

calc:

css中的計算，在calc中，運算符兩邊必須添加空格

border(邊框)樣式

border-width: 20px;

border-color: silver;

border-style: inset;（定義 3D inset 邊框）

一些邊框樣式

none    無邊框

hidden 隱藏

dotted 點狀邊框。

dashed 虛線

solid   實線

double 雙線

groove 3D 凹槽邊框

ridge   3D 壟狀邊框

inset   3D inset 邊框

outset 3D outset 邊框

inherit 從父元素繼承邊框樣式

margin: 0 auto

外邊距上下爲0，左右自動適應

#list li:not(:first-child):hover

對除第一個元素外的設置

Margin（外邊距）和padding（內邊距）

/*在調整佈局之前，不要心疼默認的內外邊距，對開發而言沒有任何意義。

所以，前端開發的通用做法是取消所有元素的所有內外邊距。

        *{

            margin：0；

            padding:0;

        }

 

另外，一定要分清什麼是內邊距，什麼是外邊距。

操作的元素越是子元素，針對性就越高。

*/

/*兩種解決子元素添加上外邊距，整體下移的方案。*/

            border: 3px solid blue;

            overflow: hidden;

圓角

border-radius: 60px 0px;

背景圖

background-image: url("../../../img/cat.jpg");

box陰影

/*x軸的偏移 y軸的偏移 模糊程度 模糊範圍 陰影顏色*/

box-shadow: 3px 5px 10px 10px greenyellow;

outline（輪廓）

是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。

input:focus{

            outline: 3px solid red;

        }

變態盒子模型

/*添加完這個屬性值以後，當前的盒子模型就不在是默認

標準盒子了。而是變成非標準盒子模型（變態盒子模型）*/

            box-sizing: border-box;