盒子模型 邊框border 外邊距 內邊距
css學習的三大重點:css盒子模型,浮動,定位
盒子模型
盒子模型由四部分組成:內容(content),內邊距(padding),邊框(border),外邊距(margin)
盒子邊框
border-width:邊框寬度
border-style:soild(實線),dashed(虛線),dotted(點線)
border-color:邊框顏色
邊框的總和寫法:變寬粗細 邊框樣式 邊框顏色
border:5px solied red
border-collapse:collapse/*合併相鄰重疊的邊框*/
內邊距
盒子的實際大小的寬度=內容的寬度+內邊距*2+邊框*2
內邊距是邊框與內容之間的距離
padding-left padding-right padding-top padding-bottom
padding:上 右 下 左
注意:當我們給盒子指定padding的時候發生兩件事1盒子會變大,2內容和邊框有了距離,添加了內邊框
盒子的大小=內容的寬度或者高度+內邊距+邊框
解決添加內邊距撐大盒子的方法:
因爲內邊距一定要給的,我們只能改變內容的寬度,讓內容的寬度減去內邊距*2就好了.
padding不影響盒子大小的情況
如果沒有給一個盒子指定的寬度(不包活繼承也就是繼承的不算給的寬度),此時如果給這個盒子指定padding,則不會撐開這個盒子
eg:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav{
width:200px;
height: 41px;
border: 1px solid red;
}
p{
height: 20px;
background-color: pink;
padding-left: 30px;
}
</style>
</head>
<body>
<div class="nav">
<p>哈哈哈</p>
</div>
外邊距
margin屬性用於設置外邊距,margin就是控制盒子和盒子之間的距離
塊盒子水平居中的條件:
盒子必須指定寬度
然後給左右外邊距都設置auto
eg:.header{width:960px;margin:auto;}
文字居中和盒子居中的區別
1:盒子內的文字水平居中是text-align:center 而且還可以讓行內元素和行內塊居中對齊
2:塊級盒子水平居中 左右margin:auto
插入圖片和背景圖片的區別
1:插入圖片 我們用的最多的 比如產品展示類 移動位置只能靠盒模型padding margin
2:背景圖片我們一般用於小圖標背景或者超大背景圖片 背景圖片只能通過background-position
img{
width:200px;//插入圖片更改大小 width和height
height:210px;
margin-top:30px;/*插入圖片更改爲位置 可以用margin或padding盒模型*/
margin-left:30px;/*插入當圖片也是一個盒子*/
}
div{
width:400px;
height:400px;
border:1px solid purple;
background:#fff url() no-repeat
background-position:30px 50px ;
}
清除元素的默認內外邊距(重要)
*{
padding:0;
margin:0;
}
注意:行內元素爲了照顧兼容性,儘量只設置左右內外邊距,不要設置上下內外邊距
相鄰塊元素垂直外邊距的合併
上邊外邊距是margin-bottom:200px;下邊外邊距是margin-top:100px;則兩個塊元素之間的聚利時取兩值中的最大值
決絕辦法儘量只給一個盒子添加margin值
嵌套塊元素垂直外邊距的合併(塌陷)
對於兩個嵌套關係的塊元素,如果父元素沒有上內邊距及邊框
父元素的上外邊距會與子元素的上外邊距發生合併
合併後的外邊距爲兩者中的較大者
解決方法:
可以爲父級元素定義上邊框
可以爲父級元素定義上內邊距
可以爲父級元素添加overflow:hidden
還有其他方法,比如浮動,固定,絕對定位的盒子不會有問題,後面在總結.
取消li列表的樣式
li{
list-style:none;
}
圓角變邊框
語法:border-radius:length;
其中每個值可以爲數值或者百分比形式
技巧:
讓一個正方形編程元圈border-radius:50%
如果是矩形只用高度的一半,如果是正方形使用高度或者寬度的一半
盒子陰影
語法:box-shadow:水平陰影,垂直陰影,模糊距離(虛實) 陰影尺寸(影子大小) 陰影顏色 內/外陰影
| 值 | 描述 |
|---|---|
| h-shadow | 必須,水平陰影的位置.允許負值 |
| v-shadow | 必須,垂直陰影的位置,允許負值 |
| blur | 可選,模糊距離 |
| spread | 可選,陰影的尺寸 |
| color | 可選,陰影的顏色, |
| inset | 可選,將外部陰影改爲內部陰影 |
總結:
盒子模型的四部分組成:內容,內邊距,外邊距,邊框
內邊距的作用和對盒子的影響:調節內容和邊框的距離,會使盒子撐大,
padding參數的含義:上 右 下 左
盒子居中對齊的兩個條件:給定寬度 margin:auto
外邊距合併的解決辦法:
t | 可選,將外部陰影改爲內部陰影 |
總結:
盒子模型的四部分組成:內容,內邊距,外邊距,邊框
內邊距的作用和對盒子的影響:調節內容和邊框的距離,會使盒子撐大,
padding參數的含義:上 右 下 左
盒子居中對齊的兩個條件:給定寬度 margin:auto
外邊距合併的解決辦法: