css基礎--盒子模型
盒子模型
1 絕大多數標籤都可以看作盒子，可以設定寬高或設定內容；在CSS中，"box model"這一術語是用來設計和佈局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的圖片說明了盒子模型(Box Model)：
content 盒子的內容
padding 內邊距 內容到邊框的距離
border 邊框
margin 外邊距 元素與元素的間距
2 盒子模型的屬性
1) width 寬 height高 均指內容放入寬高，而非盒子的
2) padding 內邊距 內容到邊框的距離
padding:10px; 一個值相當於四個方向值相同（上 右 下 左）
padding:10px 20px; 上10px 右20px 下10px 左20px
padding:10px 20px 30px; 上 右 下 左20px
padding:10px 20px 30px 40px; 上 右 下 左
上 padding-top
右padding-right
下 padding-bottom
左padding-left
2)border 邊框
按三要素：border-width 邊框寬度
border-style 邊框樣式 solid實線 dashed虛線
border-color 邊框顏色
按方向：border:10px solid blue 四個方向均同樣設定
border-top
border-right
border-bottom
border-left
background-color:#000;黑
border-width:20px;
border-style:solid dashed dotted doble; 上右下左
border-color:red green blue pink; 上右下左
border-bottom:5px solid blue; 下邊框設定3個樣式
3）margin 外邊距 元素與元素的間距
margin:20px 30px 上右下左 同padding
margin-top
margin-right
margin-bottom
margin-left
水平居中： text-align:center;
margin: 0 auto; 上下邊距為0 auto讓有寬度的塊級元素水平居中 eg:div p
3 margin塌陷問題及解決
父子margin塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
/*margin 父子塌陷問題
父親沒有設定padding border 內容時，子元素垂直方向的margin會疊加給父親
一旦發生塌陷，疊加規則：父親最終垂直方向的margin為父子中最大的margin值，並非相加
解決方法： 1 把兒子的margin轉換成父親的padding 注意盒子總高度變化問題
2 給父親增加一個屬性 overflow:hidden; //觸發了BFC
*/
.box1{
width: 150px;
height: 150px;
background-color: pink;
/* padding: 20px; */
/* overflow: hidden; */
}
.p1{
width: 50px; /*內容的寬*/
height: 50px; /*內容的高*/
background-color: aqua;
padding: 10px 20px; /*內邊距 內容到邊框的距離 上下為10px 左右20px*/
border: 2px dashed red;
border-bottom: 2px solid blue;
margin: 20px;
}
</style>
</head>
<body>
<div class="box1">
<p class="p1">這是內容1</p>
</div>
</body>
</html>
margin父子塌陷
4 並列元素（兄弟塌陷）
垂直方向上相遇的盒子模型，會發生margin塌陷；現象就是元素二者之間的距離並非之和，而是二者之間最大的
解決方法：只配置一個方向即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1,.box2{
width: 50px;
height: 50px;
background-color: red;
}
/*
並列元素（兄弟）塌陷：垂直方向上的盒子模型，會發生margin塌陷
即兩個盒子模型的margin值選二者中最大的
解決方式：只設置一個方向
*/
.box1{
margin-bottom: 50px; /*只在其中一個設定，即只設置margin-bottom 或margin-top*/
/* margin-bottom: 30px; */ /*會發生並列元素塌陷*/
}
.box2{
margin-top: 0px;
/* margin-top: 20; */
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</htm
並列元素塌陷
5 背景屬性
1）背景顏色 background-color
2) 背景圖片 background-img:url(xxx.jpeg); // 預設平鋪
3）背景重複 background-repeat:repeat-x; //不寫時預設圖片平鋪
控制圖片平鋪：repeat x,y方向均重複; repeat-x x方向平鋪； repeat-y y方向平鋪； no-repeat 不平鋪； 4）背景圖定位 background-position:50px 50px; background-position:center center; background-position:50% 50%; //圖片中心點參考body100%移動50% 相當於center center background-position:left top; //左上 background-position:right bottom; //右下 簡寫：background:blue url(xxx.jpg) no-repeat cener cernter fixed; //若不需要，後四個屬性值可以不寫<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 預設圖片平鋪
控制圖片平鋪：repeat x,y方向均重複; repeat-x x方向平鋪；repeat-y y方向平鋪；
no-repeat 不平鋪；
*/
.box1{
width: 1500px;
height: 1500px;
/* background-image: url(../ddr.png);
background-repeat: no-repeat;
background-position: right bottom; */
/*簡寫 若不需要設定，後面四個屬性值可以不寫*/
background: grey url(../ddr.png) no-repeat center center fixed;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
background
5 css元素的顯示模式
元素根據表現的特性分為：塊級元素、行內元素、行內塊元素
預設特點：
塊級元素 div p li dt dd h1~h6 ul dl
1）獨佔一行
2）設定寬高有效 （padding margin line-height）
3）不設定寬高，預設是父親的100%
行內元素 span em i b strong
1)可以與其他行內元素並排
2）設定寬高無效 （行高 line-height可設定，不支援垂直方向 padding margin）
3）元素靠內容撐開
行內塊元素 img
1)可以與其他行內元素 或 行內塊元素並排
2）可以設定寬高
一般通過如下方法去除預設的padding margin
*{
padding:0;
margin:0;
}
6 display 改變元素的顯示模式
display:block; 轉化為塊級元素
display:inline; 轉化為行內元素
display:inline-block; 轉化為行內塊元素
display:none; 隱藏元素