一、初識盒子模型
css層疊樣式表
CSS 規(guī)則由兩個主要的部分構(gòu)成：選擇器腻异，以及一條或多條聲明。
內(nèi)部樣式：
行內(nèi)樣式：<div style=“width:;height:;”>
二产喉、簡單的css樣式
1捂掰、
Width寬度 height高度 background背景
2敢会、邊框線
border: 1px solid red;
邊框三要素： 大小 風(fēng)格 顏色
單獨的定義某條邊框線：
border-top:1px solid red; /*上邊框*/
border-right:1px solid red; /*右邊框*/
border-bottom:1px solid red; /*下邊框*/
border-left:1px solid red; /*左邊框*/
邊框三要素詳解
***border-width:1px; 邊框大小 / 粗細
***border-color： red; 邊框顏色
英文單詞：red blue
十六進制：#666
rgb / rgba 顏色/透明顏色
***border-style: solid;
邊框風(fēng)格： ①無邊框 none
②實線 solid
③虛線 dashed
④點狀線 dotted
⑤雙線 double
⑥3d 凹槽 groove
⑦3d 壟狀 ridge
⑧3d inset邊框 inset
⑨3d outset邊框 outset
3外邊距
1.CSS margin 圍繞在元素邊框的空白區(qū)域是外邊距曾沈。
設(shè)置外邊距會在元素外創(chuàng)建額外的“空白
2.邊框以外是外邊距，外邊距默認是透明的鸥昏，因此不會遮擋其后的 任何元素
3.margin 屬性接受任何長度單位塞俱、百分數(shù)值甚至負值。
margin-top /*距離頂部的距離*/
margin-right /*距離右邊的距離*/
margin-bottom /*距離下邊的距離*/
margin-left /*距離左邊的距離*/
4.margin復(fù)合樣式：
margin:50px; /*上下左右*/
margin:50px 50px; /*上下 左右*/
margin:50px 50px 50px; /*上 左右 下*/
margin:50px 50px 50px 50px; /*上右下左*/
auto=居中
4吏垮、內(nèi)邊距
1.CSS padding 屬性定義元素的內(nèi)邊距（邊框和內(nèi)容區(qū)之間）;
2.padding 屬性接受長度值或百分比值障涯，但不允許使用負值。
不能使用auto
padding-top:20px / 10%; /*頂部內(nèi)邊距*/
padding-right:20px / 10%; /*右邊內(nèi)邊距*/
padding-bottom:20px / 10%; /*下面內(nèi)邊距*/
padding-left:20px / 10%; /*左邊內(nèi)邊距*/
3.元素框的最內(nèi)部分是實際的內(nèi)容膳汪，直接包圍內(nèi)容的是內(nèi)邊距唯蝶。
4.內(nèi)邊距呈現(xiàn)了元素的背景。
5.內(nèi)邊距的邊緣是邊框遗嗽。
- 在 CSS 中粘我，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。
增加內(nèi)邊距、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸征字，
但是會增加元素框的總尺寸
5都弹、CSs框模型
CSS 框模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距匙姜、邊框 和 外邊距 的方式
盒子模型占位寬高計算：
1.盒子模型占位寬：
自身寬（width）+左右內(nèi)邊距(padding)+左右邊框(border)+左右外邊距(margin)
1.盒子模型占位高：
自身高(height)+上下內(nèi)邊距(padding)+上下邊框 (border)+上下外邊距(margin)
