盒子由幾部分組成：
物品 + 填充物 + 外包裝 + 外邊距
content + padding + border + margin
/* margin 後面接多個值 */
/* 上 右 下 左 */
margin
:50px
30px
40px
20px;
/* 上 左右 下 */
margin:
50px
30px
40px;
/* 上下 左右 */
margin:
50px
30px;
/* 上下左右 */
margin:
50px;
通常情況下：
父子關係產生邊距一般用padding
兄弟關係產生邊距一般用margin
p標籤的基本樣式p
插入背景
/* 背景，平鋪 */
background-image:
url(
"img/1.gif");
/* 背景是否重複 x y */
background-repeat:
repeat-y;
/* 背景大小 寬 高 */
/*background-size: 100% 100%;*/
/* 1. 可以使用畫素值
2. 可以使用方向值
3. 可以使用百分比
*/background-position:30%
80%;
} /* 偽類
hover 滑鼠懸停
*/.div1:hover
css基本樣式一覽
css 屬性名：
width: 寬度
height: 高度
margin: 外邊距
padding: 內邊距
border: 邊框
background: 背景
display: 顯示方式
font: 字型
font-weight 文字著重
font-family 字型
font-size 文字大小
font-style 文字樣式
letter-spacing 字母間距
word-spacing 單詞間距
text-align 文字對齊方式
text-decoration 文字修飾
text-indent 首行縮排
background-repeat 背景重複
background-image 背景
background-size 背景大小
float 浮動
浮動布局
float:
left 左浮
float：right 右浮
清除浮動的方式：
1. clear:both;
2. 在父級中加上overflow:hidden; 變為bfc(單獨布局的小單位)
3. 用浮動去清浮動。
文件流：在當前文件下，給元素排列時所占用的位置。
浮動：元素直接脫離文件流，按照指定的方向移動。直到遇到父級的邊界，或者其他的浮動元素停止。
CSS盒模型與浮動
box sizing屬性用於改變元素width和height值的具體意義 段落p 標題h1或div等元素是塊級元素，它們生成塊級框，各個框體是縱向堆疊的 即 換行 任何元素可以由display block宣告為塊級元素。注 通過css的display屬性，是可以改變html文件中元素預設的布局方式的...
CSS盒模型與布局
1.1兩種基本的盒模型 block型別 這種盒模型的元素不會佔據一行，允許通過 css設定寬度 高度。例如 元素。inline元素 這種盒模型的元素不會佔據一行 預設允許在一行放置許多元素 即使通過 css設定高度和寬度也不會起作用。例如,css為display屬性提供了block和inline兩個...
CSS布局之 盒模型與聖杯布局
盒模型 在css布局的編寫中，盒模型的概念必須要搞清楚，才能更好的體現出前端 的能力。在此之前，我們需要弄清楚幾個名詞。包含塊包含塊對於浮動元素來說，定義為最近的塊級祖先元素，但對於定位來說，情況則沒有這麼簡單，css2.1定義了一下行為 根元素 的包含塊 也稱為初始包含塊 由使用者 建立，在htm...