css盒子模型

、盒子模型

本章目標

理解盒子模型及其構成
會計算盒子模型尺寸
會使用盒子模型的兩種解析方式來布局網(wǎng)頁
會使用圓角屬性給網(wǎng)頁元素添加圓角效果
會使用盒子陰影屬性給網(wǎng)頁元素添加陰影效果

3.1、什么是盒子模型

講解盒子模型及屬性，并說明邊框、外邊框和內邊框都是四個邊，最后介紹盒子模型的立體結構.

在這里插入圖片描述

.文檔流

最底下的一層稱為文檔流，文檔流是網(wǎng)頁的基礎，我們所創(chuàng)建的元素默認都是在文檔流中進行排列
對于我們來元素主要有兩個狀態(tài) 在文檔流中不在文檔流中（脫離文檔流）

1.1 元素在文檔流中的特點

塊元素

塊元素會在頁面中獨占一行(自上向下垂直排列)
默認寬度是父元素的全部（會把父元素撐滿）
默認高度是被內容撐開（子元素）

<div class="box1">我是div1</div>
<div class="box2">我是div2</div>

行內元素

行內元素不會獨占頁面的一行，只占自身的大小
行內元素在頁面中左向右水平排列，如果一行之中不能容納下所有的行內元素，則元素會換到第二行繼續(xù)自左向右排列（書寫習慣一致）
行內元素的默認寬度和高度都是被內容撐開

    <span>我是span1</span>
    <span>我是span2</span>
    <span>我是span2</span>
    <span>我是span2</span>
    <span>我是span2</span>
    <span>我是span2</span>
    <span>我是span2</span>
    <span>我是span2</span>

2. 盒模型

2.1 內容

內容區(qū)（content），元素中的所有的子元素和文本內容都在內容區(qū)中排列
內容區(qū)的大小由width 和 height兩個屬性來設置width 設置內容區(qū)的寬度 height 設置內容區(qū)的高度

2.2 邊框

2.2.1 寬度

邊框的寬度 border-width
border-width可以用來指定四個方向的邊框的寬度值的情況四個值：上右下左三個值：上左右下兩個值：上下左右一個值：上下左右
border-width還有一組 border-xxx-width xxx可以是 top right bottom left 用來單獨指定某一個邊的寬度

border-width: 10px;
border-top-width: 10px;
border-left-width: 30px;

2.2.2 顏色

邊框的顏色 border-color
border-color用來指定邊框的顏色，同樣可以分別指定四個邊的邊框規(guī)則和border-width一樣
border-color也可以省略不寫，如果省略了則自動使用color的顏色值

border-color: orange red yellow green;
border-color: orange;

2.2.3 樣式

邊框的樣式 border-style
border-style 指定邊框的樣式

solid 表示實線
dotted 點狀虛線
dashed 虛線
double 雙線

border-style的默認值是none 表示沒有邊框

border-style: solid dotted dashed double;
border-style: solid;

2.2.4 補充

border簡寫屬性，通過該屬性可以同時設置邊框所有的相關樣式，并且沒有順序要求

border-top
border-right
border-bottom
border-left

border-top: 10px solid red;
             border-left: 10px solid red;
             border-bottom: 10px solid red;

2.3 內邊距

內容區(qū)和邊框之間的距離是內邊距
一共有四個方向的內邊距：

padding-top
padding-right
padding-bottom
padding-left

內邊距的設置會影響到盒子的大小
背景顏色會延伸到內邊距上

padding-top: 100px;
            padding-left: 100px;
            padding-right: 100px;
            padding-bottom: 100px;

padding 內邊距的簡寫屬性，可以同時指定四個方向的內邊距規(guī)則和border-width 一樣

padding: 10px 20px 30px 40px;
             padding: 10px 20px 30px ;
             padding: 10px 20px ;
             padding: 10px ;

2.4 外邊距

外邊距不會影響盒子可見框的大小
但是外邊距會影響盒子的位置
一共有四個方向的外邊距：

左外邊距，設置一個正值，元素會向右移動
下外邊距，設置一個正值，其下邊的元素會向下移動
默認情況下設置margin-right不會產生任何效果
上外邊距，設置一個正值，元素會向下移動

margin-top
margin-right
margin-bottom
margin-left

margin也可以設置負值，如果是負值則元素會向相反的方向移動
元素在頁面中是按照自左向右的順序排列的，所以默認情況下如果我們設置的左和上外邊距則會移動元素自身設置下和右外邊距會移動其他元素
margin的簡寫屬性margin 可以同時設置四個方向的外邊距，用法和padding一樣
margin會影響到盒子實際占用空間

/* margin-top: 100px;
            margin-left: 100px;
            margin-bottom: 100px; */

            /* margin-bottom: 100px; */
            /* margin-top: -100px; */
            /* margin-left: -100px; */
            /* margin-bottom: -100px; */

            /* margin-right: 0px; */

3. 水平布局

元素的水平方向的布局：

margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
元素在其父元素中水平方向的位置由以下幾個屬性共同決定“

一個元素在其父元素中，水平布局必須要滿足以下的等式
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素內容區(qū)的寬度
水平居中

width:xxxpx;
margin:0 auto;

4. 垂直布局

默認情況下父元素的高度被內容撐開
子元素是在父元素的內容區(qū)中排列的，

可選值：visible，默認值子元素會從父元素中溢出，在父元素外部的位置顯示hidden 溢出內容將會被裁剪不會顯示scroll 生成兩個滾動條，通過滾動條來查看完整的內容auto 根據(jù)需要生成滾動條
如果子元素的大小超過了父元素，則子元素會從父元素中溢出
使用 overflow 屬性來設置父元素如何處理溢出的子元素

overflow: auto;

5. 外邊距折疊

垂直外邊距的重疊（折疊）

父子元素間相鄰外邊距，子元素的會傳遞給父元素（上外邊距）
父子外邊距的折疊會影響到頁面的布局，必須要進行處理
兄弟元素間的相鄰垂直外邊距會取兩者之間的較大值（兩者都是正值）
特殊情況：如果相鄰的外邊距一正一負，則取兩者的和如果相鄰的外邊距都是負值，則取兩者中絕對值較大的
相鄰的垂直方向外邊距會發(fā)生重疊現(xiàn)象
兄弟元素
兄弟元素之間的外邊距的重疊，對于開發(fā)是有利的，所以我們不需要進行處理
父子元素

.box1{
           background-color: #bfa;

           /* 設置一個下外邊距 */
           margin-bottom: 100px;
      }

       .box2{
           background-color: orange;

           /* 設置一個上外邊距 */
           margin-top: 100px;
      }

       .box3{
           width: 200px;
           height: 200px;
           background-color: #bfa;
           /* padding-top: 100px; */
           /* border-top: 1px #bfa solid; */
      }

6.行內元素的盒模型

行內元素不支持設置寬度和高度
行內元素可以設置padding，但是垂直方向padding不會影響頁面的布局
行內元素可以設置border，垂直方向的border不會影響頁面的布局
行內元素可以設置margin，垂直方向的margin不會影響布局

width: 100px;
height: 100px;
padding: 100px;
border: 100px solid red;

6.1 display

設置元素顯示的類型
可選值：

inline 將元素設置為行內元素
block 將元素設置為塊元素
inline-block 將元素設置為行內塊元素 , 行內塊，既可以設置寬度和高度又不會獨占一行
table 將元素設置為一個表格
none 元素不在頁面中顯示

6.2 visibility

設置元素的顯示狀態(tài)
可選值：

visible 默認值，元素在頁面中正常顯示
hidden 元素在頁面中隱藏不顯示，但是依然占據(jù)頁面的位置

display: block;

visibility: hidden;

7.盒子的尺寸

默認情況下，盒子可見框的大小由內容區(qū)、內邊距和邊框共同決定
box-sizing 用來設置盒子尺寸的計算方式（設置width和height的作用）

content-box 默認值，寬度和高度用來設置內容區(qū)的大小
border-box 寬度和高度用來設置整個盒子可見框的大小
可選值：
width 和 height 指的是內容區(qū) 和內邊距和邊框的總大小

.box1{
           width: 100px;
           height: 100px;
           background-color: #bfa;
           padding: 10px;
           border: 10px red solid;
  box-sizing: border-box;
      }

8. 輪廓和圓角

8.1 陰影box-shadow

box-shadow 用來設置元素的陰影效果，陰影不會影響頁面布局

第一個值水平偏移量設置陰影的水平位置正值向右移動負值向左移動
第二個值垂直偏移量設置陰影的水平位置正值向下移動負值向上移動
第三個值陰影的模糊半徑
第四個值陰影的顏色

box-shadow: 0px 0px 50px rgba(0, 0, 0, .3) ;

8.2 輪廓線outline

outline 用來設置元素的輪廓線，用法和border一模一樣
輪廓和邊框不同的點，就是輪廓不會影響到可見框的大小

.box1:hover{
           outline: 10px red solid;
      }

8.3 圓角 border- redius

border-radius: 用來設置圓角圓角設置的圓的半徑大小
border-radius 可以分別指定四個角的圓角

四個值左上右上右下左下
三個值左上右上/左下右下
兩個個值左上/右下右上/左下

有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。

盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

1.1 盒子模型

在學習盒子模型之前，先來看一個生活中的例子。假如墻上排列著幾幅畫。對于每幅畫來說，都有一個邊框，在英文中稱為border；每個畫框中，畫和邊框通常都會有一定的距離，這個距離稱為內邊距，在英文中稱為padding；每一幅畫間也不是緊挨著的，也存在一些距離稱為外邊距，在英文中稱為margin。

在CSS中，一個獨立的盒子模型由content（頁面內容）、border（邊框）、padding（內邊距）、margin（外邊距）四部分組成

1.content：位于最中間，頁面的主要顯示內容，也就是這幅畫的本身2.border：位于內邊距外面，如果沒有內邊距就是包著內容的外框。它一般具有一定的厚度，也就是這幅畫的畫框3.padding：位于邊框內部的空隙，是內容與邊框的距離，也就是畫框和圖之畫之間的空隙4.margin：位于邊框內部空隙，邊框外面周圍的距離，也就是每幅畫之間的空隙

1.1.1 邊框

邊框（border）有三個屬性，分別是color（顏色）、width（粗細）和style（樣式）。在網(wǎng)頁中設置邊框樣式時，嘗嘗需要將這三個屬性很好地配合起來，才能達到良好的頁面效果。在使用CSS設置邊框時，分別使用border-color、border-width和border-style設置邊框的顏色、粗細和樣式

border-color

border-color的設置方法與文本的color屬性或背景顏色bancground-color屬性的設置方法完全一樣，也是使用十六進制設置邊框的顏色，如紅色為#FF0000，也可以使用RGBA的顏色表示方法。

由于盒子模型分為上、下、左、右四個邊框，因此在設置邊框顏色時，可以按上、右、下、左的順序來設置四個邊框顏色，也可以同時設置四個邊框的顏色。border-color屬性設置方法如下：

屬性說明舉例border-top-color設置上邊框顏色border-top-color:#369border-right-color設置右邊框顏色border-right-color:#369border-bottom-color設置下邊框顏色border-bottom-color:#FAE45Bborder-left-color設置左邊框顏色border-left-color:#EEFF34border-color設置四個邊框顏色為同一個顏色border-color:#EEFF34

當使用border-color屬性同時設置四條邊框顏色時，設置順序按順時針方向上、右、下、左設置邊框顏色，屬性值之間以空格隔開。沒有設置屬性值的找對邊

例如：border-color:#369 #000 #F00 #00F;四個屬性按上、右、下、左依次對號入座。

例如：border-color:#369 #000 #F00;三個屬性值按上、右、下、左依次對號入座。#369對應上邊框，#000對應右邊框，#F00對應下邊框，發(fā)現(xiàn)到“左”的時候沒有屬性值了，這時候找它的對邊。因為“左”的對邊是“右”所以#000對應左邊框

以后無論給出幾個屬性值都按照“上、右、下、左”“沒有找對邊”的方式來對應

border-width

border-width用來指定border的粗細程度，它的值有thin、medium、thick和像素值

thin ：設置細的邊框

medium：默認值，設置中等的邊框一般的瀏覽器都將其解析為2px

thick：設置粗的邊框

像素值：表示具體的數(shù)值，自定義設置邊框的寬度，如1px、5px等

border-style

border-style用來指定border的樣式，它的值有none、hidden、dotted、dashed、solid、double、groove、ridge和outset，其中none、dotted、dashed、solid在實際網(wǎng)頁制作中是經常用到的值。none表示無邊框，dotted表示點線邊框，dashed表示虛線邊框，solid表示實現(xiàn)邊框。由于dotted和dashed在大多數(shù)瀏覽器顯示為實線，因此在實際網(wǎng)頁中，為了瀏覽器兼容性，常用none和solid。

值含義none默認無邊框dotted定義一個點線邊框dashed定義一個虛線邊框solid定義實線邊框double定義兩個邊框。兩個邊框的寬度和 border-width 的值相同groove定義3D溝槽邊框。效果取決于邊框的顏色值ridge定義3D脊邊框。效果取決于邊框的顏色值inset定義一個3D的嵌入邊框。效果取決于邊框的顏色值outset定義一個3D突出邊框。效果取決于邊框的顏色值

示例

<!DOCTYPE html><html><headlang="en"><metacharset="UTF-8"><title></title><style>div{        width: 200px;        height: 200px;        border: 1px solid black;  /*設置div邊框，1px黑色的實線邊框*/    }    p:nth-of-type(1){        width: 100px;        border: 1px dotted red;  /*設置第一個p標簽邊框為1px的點狀虛線*/    }    p:nth-of-type(2){        width: 100px;        border: 1px dashed yellow;/*設置第二個p標簽邊框為1px的虛線邊框*/    }    p:nth-of-type(3){        width: 100px;        border: 4px double blue;/*設置第三個p標簽邊框為4px的雙線邊框*/    }</style></head><body><div><p>第一段落</p><p>第二段落</p><p>第三段落</p></div></body></html>

1.1.2 外邊距

外邊距（margin）位于盒子邊框外，指與其他盒子之間的距離，也就是指網(wǎng)頁中元素與元素之間的距離，例如示例1效果圖中標題與div上邊框之間的距離，以及標題與下方表單之間的距離都是由h2外邊距產生的。從圖中也可以看到頁面內容并沒有緊貼瀏覽器，而是與瀏覽器有一定的距離，這就是因為body本身也是一個盒子，也有一個外邊距，這也是由body的外邊距產生的。

外邊距與邊框一樣，也分為上外邊距、右外邊距、下外邊距、左外邊距，使用方法和border-color方法一樣。

1.1.3 內邊距

內邊距（padding）用于控制內容與邊框之間的距離，以便精確控制內容在盒子中的位置。內邊距與外邊距一樣，也分為上內邊距、右內邊距、下內邊距、左內邊距，設置方式和設置順序也都一樣，請參照border-color設置方法。

示例

<!DOCTYPE html><html><headlang="en"><metacharset="UTF-8"><title></title><style>div{        width: 200px;        height: 200px;        border: 1px solid black;  /*設置div邊框，1px黑色的實線邊框*/    }    p:nth-of-type(1){        width: 100px;        border: 1px dotted red;  /*設置第一個p標簽邊框為1px的點狀虛線*/margin-top: 30px; /*距離頂部的距離30px*/padding: 40px;   /*所有填充都是40px*/    }    p:nth-of-type(2){        width: 100px;        border: 1px dashed yellow;/*設置第二個p標簽邊框為1px的虛線邊框*/margin-left: 20px;  /*距離左側的距離20px*/    }    p:nth-of-type(3){        width: 100px;        border: 4px double blue;/*設置第三個p標簽邊框為1px的雙線邊框*/margin: 50px;  /*4個邊距50px*/    }</style></head><body><div><p>第一段落</p><p>第二段落</p><p>第三段落</p></div></body></html>

1.1.4 盒子模型的尺寸

在CSS中，width和height指的是內容區(qū)域的寬度和高度。增加了邊框、內邊距和外邊距后不會影響內容區(qū)域的尺寸，但是會增加盒子模型的總尺寸。

示例

<!DOCTYPE html><html><headlang="en"><metacharset="UTF-8"><title></title><style>div{        width:100px;/*div寬度100px*/height:100px;/*div高度100px*/padding:5px;/*div上右下左外邊距5px*/margin:10px;/*div上右下左內邊距10px*/border:1px solid #000;/*div上右下左邊框為1px*/    }</style></head><body><div></div></body></html>

運行之后會發(fā)現(xiàn)div的實際總寬度為112px而不是100px這說明把寬度width設置為100px是不能達到最終要求的盒子總寬度為100px的。

修改上面代碼如下：

div{        width:88px;/*div寬度100px*/height:88px;/*div高度100px*/padding:5px;/*div上右下左外邊距5px*/margin:10px;/*div上右下左內邊距10px*/border:1px solid #000;/*div上右下左邊框為1px*/    }

盒子模型的計算方法：

盒子模型內盒總尺寸=border（上下/左右）+padding（上下/左右）+內容寬度

1.1.5 box-sizing拯救布局

為了解決上述問題CSS3添加了一個盒子模型屬性box-sizing，能夠事先定義盒子模型的尺寸解析方式

box-sizing 屬性允許您以特定的方式定義匹配某個區(qū)域的特定元素。

box-sizing: content-box|border-box|inherit:

值說明content-box這是 CSS2.1 指定的寬度和高度的行為。指定元素的寬度和高度（最小/最大屬性）適用于box的寬度和高度。元素的填充和邊框布局和繪制指定寬度和高度除外border-box指定寬度和高度（最小/最大屬性）確定元素邊框。也就是說，對元素指定寬度和高度包括了 padding 和 border 。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。inherit指定 box-sizing 屬性的值，應該從父元素繼承

示例

div {        width:100px;        height:100px;        padding:5px;        margin:10px;        border:1px solid #000;        -webkit-box-sizing: border-box;        -moz-box-sizing: border-box;        box-sizing: border-box;    }

2.1 圓角邊框

在 CSS2 中添加圓角矩形需要技巧。我們必須為每個圓角使用不同的圖片。

在 CSS3 中，創(chuàng)建圓角是非常容易的。

在 CSS3 中，border-radius 屬性用于創(chuàng)建圓角：

2.1.1 圓角邊框語法

border-radius:length{1,4}

注意: 每個半徑的四個值的順序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

1.border-radius:length{1}設置一個屬性值表示top-left,top-right,bottom-right和bottom-left四個值是一樣的，也就是元素四個圓角效果一樣

2.border-radius:length{2}設置兩個屬性值表示top-left等于bottom-right，并且取第一個值，top-right等于bottom-left，并且取第二個值，也就是左上角和右下角取第一個值，右上角和左下角取第二個值

3.border-radius:length{3}設置三個屬性值，第一個值是top-left,第二個值是top-right和bottom-left，第三個只是bottom-right

4.border-radius:length{4}設置四個屬性值，第一個值是top-left，第二個值是top-right第三個值bottom-right第四個值bottom-left

示例

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{       width:100px;       height:100px;       border:10px solid red;       -webkit-border-radius:20px;       -moz-border-radius:20px;       border-radius:20px;/*div四個角都是圓角，值為20px*/   }</style></head><body><div></div></body></html>

2.1.2 使用border-radius制作特殊圖形

制作圓形

利用border-radius屬性制作圓角時有兩個要點

1.元素的寬度和高度必須相同 2.圓角的半徑為元素寬度的一般，或者直接設置圓角半徑值為50%

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{       width:100px;       height:100px;       border:4px solid red;       -webkit-border-radius:50%;       -moz-border-radius:50%;       border-radius:50%;/*div四個角都是圓角，值為20px*/   }</style></head><body><div></div></body></html>

制作半圓

利用border-radius屬性制作半圓的方法和制作圓形的方法一樣，只是元素的寬度與圓角的方為要配合一直，不同的寬度和高度比例，以及圓角的方位，可以制作上半圓、下半圓、左半圓、右半圓

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{       background: red;       margin:30px;   }    div:nth-of-type(1){        width:100px;        height:50px;        -webkit-border-radius:50px50px00;        -moz-border-radius:50px50px00;        border-radius:50px50px00;    }   div:nth-of-type(2){        width:100px;        height:50px;        -webkit-border-radius: 0050px50px;        -moz-border-radius: 0050px50px;        border-radius: 0050px50px;    }   div:nth-of-type(3){        width:50px;        height:100px;        -webkit-border-radius:050px50px0;        -moz-border-radius:050px50px0;        border-radius:050px50px0;    }   div:nth-of-type(4){        width:50px;        height:100px;        -webkit-border-radius:50px0050px;        -moz-border-radius:50px0050px;        border-radius:50px0050px;    }</style></head><body><div></div><div></div><div></div><div></div></body></html>

制作半圓形的要點：

1.當制作上半圓或下半圓時，元素的寬度是高度的2倍，而且圓角半徑為元素的高度值2.當制作左半圓或右半圓時，元素的高度是寬度的2倍，而且圓角半徑為元素的寬度值

制作扇形

遵循“三通，一不同”原則，“三同”是元素寬度、高度、圓角半徑相同，“一不同”是圓角取值位置不同

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{       background: red;       margin:30px;   }    div:nth-of-type(1){        width:50px;        height:50px;        -webkit-border-radius:50px000;        -moz-border-radius:50px000;        border-radius:50px000;    }   div:nth-of-type(2){        width:50px;        height:50px;        -webkit-border-radius: 050px00;        -moz-border-radius: 050px00;        border-radius: 050px00;    }   div:nth-of-type(3){        width:50px;        height:50px;        -webkit-border-radius:0050px0;        -moz-border-radius:0050px0;        border-radius:0050px0;    }   div:nth-of-type(4){        width:50px;        height:50px;        -webkit-border-radius: 00050px;        -moz-border-radius: 00050px;        border-radius: 00050px;    }</style></head><body><div></div><div></div><div></div><div></div></body></html>

3.1 盒子陰影

box-shadow:inset x-offset y-offset blur-radius color;

1.inset：陰影類型，可選值，如果不設置，默認的投影方式是外陰影；如果設置了inset表示內陰影

2.x-offset：X軸位移，用來指定陰影水平位移量，其值可以是正值，也可以是負值，如果問正值，陰影在對象的右邊；反之，陰影在對象的左邊

3.y-offset：Y軸位移，用來指定因應垂直位移量，其值可以是正值，也可以是負值，如果為正值，陰影在對象的底部；反之，陰影在對象的右邊

4.blur-radius：陰影模糊半徑，代表陰影向外模糊的模糊范圍，值越大陰影向外模糊的范圍就越大，陰影的邊緣就越模糊。這個值只能是正值，如果為0，則表示不具有模糊效果，是可選值

5.color：陰影顏色，定義繪制陰影時所使用的顏色。陰影顏色可以是十六進制顏色，RGB、RGBA透明色等，不寫這個值會用瀏覽器的默認色代替，由于瀏覽器默認色不一樣，因此建議不要省略這個值

與用圖片來制作盒子陰影相比，利用box-shadow屬性修改陰影效果要方便的多，并且從box-shadow的語法上可以看出它的每個屬性值都是可以自由設置的，這就意味著我們可以隨意設置出不同的陰影效果

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{        width:100px;        height: 100px;        border:1px solid red;        -webkit-border-radius:8px;        -moz-border-radius:8px;        border-radius:8px;        margin:20px;        -webkit-box-shadow:  20px10px#06C;        -moz-box-shadow:  20px10px#06C ;        box-shadow:  20px10px#06C ;    }</style></head><body><div></div></body></html>

4.1 總結

1.盒子模型的概念、盒子模型的邊框、外邊距和內邊距在網(wǎng)頁中的使用方法2.使用border、padding、margin美化圖片、div、列表、表單元素等網(wǎng)頁元素3.精確計算盒子模型的尺寸，并且可以通過box-sizing選擇盒子模型的解析方式4.使用border-radius給元素添加圓角效果，以及制作特殊的圖形5.使用box-shadow給元素添加內、外陰影效果

免費學習視頻歡迎關注云圖智聯(lián)：https://e.yuntuzhilian.com/

在線咨詢

上一篇：先睹為快即將到來的HTML6
下一篇：HTML基本標簽

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商