1、邊框
1、css的三大重點：盒子模型、浮動、定位
2、 盒子模型：內容、邊框、外邊距、內邊距
3、 網頁布局本質：拼接盒子的過程 div +css
4、 邊框
(1) 、邊框屬性：邊框厚度、邊框的顏色、邊框的線條樣式
(2) 、邊框厚度：border-top-width（上）
(3) 、邊框的顏色： border-top-color: blue;（上）
(4) 、邊框的線條樣式：border-top-style: solid;
① 、實線 solid
② 、虛線 dashed
③ 、點線 dotted
④ 、雙實線 double
(5) 、綜合設定：border:1px solid red;
(6) 、邊框會影響盒子的尺寸
2、內邊距
1、定義：內邊距：盒子中內容與邊框之間的距離
2、用法：
(1) 、上內邊距 padding-top: 20px;
(2) 、左內邊距 padding-left: 15px;
(3) 、下內邊距 padding-bottom: 25px;
(4) 、右內邊距 padding-right: 10px;
(5) 、屬性值個數不同
① 四個屬性值 :上、右、下、左 padding: 50px 40px 30px 10px;
② 三個屬性值： 上、左右、下 padding: 50px 40px 30px;
③ 兩個屬性值： 上下、左右 padding: 50px 20px;
④ 乙個屬性值： 上下左右 padding: 50px;
3、外邊距
1、定義：盒子的邊框與其他元素或者瀏覽器邊緣之間的距離
2、使用：
① 上外邊距 margin-top: 100px;
② 左外邊距 margin-left: 80px;
③ 下外邊距 margin-bottom: 50px;
④ 右外邊距 margin-right: 200px;
3、綜合設定
(1) 四個屬性值：上 右 下 左 margin: 90px 70px 50px 20px;
(2) 三個值：上、左右、下margin: 90px 70px 20px;
(3) 兩個值：上下、左右margin: 90px 50px;
(4) 乙個值：上下左右 margin: 50px;
4、總結：
(1) div盒子預設有8px的外邊距（只值距離瀏覽器的
(2) 盒子的外邊距不會影響盒子的尺寸
5、水平居中
(1) text-align:center:內容水平居中，可以讓行內元素和行內塊元素水平居中，不可以讓塊狀元素居中
(2) margin:auto:塊狀元素水平居中,必須設定寬度
4、外邊距合併
1、相鄰塊元素垂直外邊距的合併
① 定義：當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者 ,這種現象被稱為相鄰塊元素垂直外邊距的合併（也稱外邊距塌陷）
2、巢狀關係的塊元素的外邊距合併
① 定義：對於兩個巢狀關係的塊元素，如果父元素沒有上內邊距及邊框， 則父元素的上外邊距會與子元素的上外邊距發生合併， 合併後的外邊距為兩者中的較大者
3、避免巢狀關係外邊距合併的方法
① 給父元素新增邊框
② 給父元素新增內邊距
③ 給父元素新增overflow屬性
5、盒子陰影
1、定義：向div元素新增影子
2、使用：四個屬性值 水平陰影 垂直陰影 影子模糊距離 影子的顏色
box-shadow: 60px 30px 10px #ff0000;
CSS 之盒子模型 邊框 內邊距 外邊距
使用width來設定盒子內容區的寬度 使用height來設定盒子內容區的高度 width和height只是設定的盒子內容區的大小，而不是盒子的整個大小，盒子可見框的大小由內容區，內邊距和邊框共同決定 為元素設定邊框 要為乙個元素設定邊框必須指定三個樣式 border width 邊框的寬度 bord...
盒子邊框 外邊距 內邊距 盒子模型的尺寸
1.盒子模型由 網頁內容content 邊框boder 內邊距padding 外邊距margin 四部分組成 2.邊框boder 三個屬性 顏色color 粗細width 樣式style 01.color 分開設定boder top color上邊框顏色 boder bottom color下邊框顏...
關於css中的邊框 內邊距 外邊距
使用width來設定盒子內容區的寬度 使用height來設定盒子內容區的高度 width和height只是設定的盒子內容區的大小，而不是盒子的整個大小，盒子可見框的大小由內容區，內邊距和邊框共同決定 為元素設定邊框 要為乙個元素設定邊框必須指定三個樣式 border width 邊框的寬度 bord...