CSS高階操作

box盒子

它是抽象於現實生活中的盒子，將網頁中的所有元素看做是乙個個的盒子，那麼在調整網頁中的這些元素布局時，就可以通過布局盒子資訊來進行

盒子模型的組成：盒子內容+盒子的內邊距（盒子內容到邊框的填充）+盒子邊框+盒子外邊距

2.1邊框

/*border-style: solid;*/

/*border-style: dotted;*/
/*border-style: dashed;*/
border-style: double;

/*border-color: green;*/

/*border-color: #008000;*/
border-color: rgb(255,0,0);

border-width: 1px;

/* 所有的 */

/*border-color: red;*/
/* 上下  左右 */
/*border-color: red green;*/
/* 上 左右 下 */
border-color: red green yellow;
/* 順時針：上右下左 */
/*border-color: red  green  black  pink;*/

/* 可以同時設定顏色、粗細、樣式 */

border: 1px solid red;

padding(填充)：它可以調整邊框到元素內容的距離。

/*padding: 50px;*/

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

margin：設定元素的外邊距，也就是和其他元素之間的距離

2.4 盒子尺寸

box-sizing：設定盒子模型尺寸計算規則的。

2.5 標準文件流調整-display

預設情況下，在標準文件流中，元素是分為兩大類的。

實際上之所以出現這種效果，就是因為dispaly屬性，塊元素預設為block，而內聯元素預設為inline。

如果想將塊元素和內聯元素進行轉換，可以通過此屬性。

display：

**float：**能夠實現塊元素在一行並列布局展示。

當浮動出現後，會導致：

如果都浮動了，父級元素會產生邊框塌陷

/* 表示在元素最後面設定資訊 */

.father:after

CSS高階操作

box盒子 它是抽象於現實生活中的盒子，將網頁中的所有元素看做是乙個個的盒子，那麼在調整網頁中的這些元素布局時，就可以通過調整盒子資訊來進行。盒子模型的組成 盒子內容 盒子的內邊距 盒子內容到邊框的填充 盒子邊框 盒子外邊距 2.1 邊框 例如 另外css還給提供了統一的邊框設定方式 可以同時設定顏...

CSS高階操作

css高階操作box盒子 它是抽象於現實生活中的盒子，將網頁中的所有元素看作是乙個個的盒子，那麼在調整網頁中的這些元素布局時，就可以通過調整盒子資訊來進行。盒子模型的組成 盒子內容 盒子的內邊距 盒子內容到邊框的填充 盒子邊框 盒子外邊距 2.掌握盒子模型的使用 2.1邊框 border syle邊...

CSS高階操作

box盒子 它是抽象於現實生活中的盒子，將網頁中的所有元素看做是乙個個的盒子，那麼在調整網頁中的這些元素布局時，就可以通過調整盒子資訊來進行。盒子模型的組成 盒子內容 盒子的內邊距 盒子內容到邊框的填充 盒子邊框 盒子外邊距 border style 邊框樣式 border style solid ...