域名解析(阿里雲二級域名解析)
一、什麼叫框模型
頁面元素皆為框(盒子),定義了元素框處理元素內容,內邊距,外邊距以及邊框的計算方式。
二、外邊距
圍繞在元素邊框外的空白距離(元素與元素之間的距離)
語法:margin,定義4個方向的外邊距
1、單邊定義:margin-top/right/bottom/left
(1)取值:以px為單位, %佔父級元素寬度的%比
正數:margin-left 元素向右移動,margin-top元素向下移動
負數:就是相反方向
取值 auto:自動計算塊級元素的外邊距,對於上下外邊距無效,塊級元素水平居中
2、簡寫方式
margin:value ;定義4個方向的值
margin:v1 v2; v1設定上下,v2設定左右
margin:0 auto:設定塊級元素水平居中
margin:v1 v2 v3;v1設定上,v2設定左右,v3設定下
margin:v1 v2 v3 v4;上右下左
3、自帶外邊距的元素
h1~h6、p、body、ol、ul、dl、pre
一般在開發的時候需要重置具有外邊距的元素
方案一:*{margin:0;padding:0}
方案二:參考淘寶
4、外邊距的特殊效果
(1)外邊距合併
當兩個垂直外邊距相遇時,他們將合併成一個,最終的距離取決於兩個邊距中較大的
(2)行內元素對外邊距的表現
行內元素垂直外邊距無效(img)除外
(3)行內塊對外邊距的表現
同一行中,一個行內塊設定了垂直邊距,同行其他行內會跟著變化
(4)外邊距溢位
在特殊條件下,為子元素設定上外邊距,會作用到父元素
特殊條件:
1.父元素上邊框
2.為第一個子元素設定上外邊框,任何一個 都會造成外邊框溢位
解決方法:
為父元素新增邊框,弊端:影響了父元素的實際高度
為父元素新增內邊距,弊端 了父元素的實際高度
在父元素的 第一個子元素位置,新增一個空的table
佛山vi設計https://www.houdianzi.com/fsvi/ 豌豆資源搜尋大全https://55wd.com
三、內邊距
不會影響其他元素,但是會影響自己的佔地尺寸,視覺上感覺大小發生變化
語法:
padding:value ;設定4個方向的內邊距
padding:v1 v2;v1設定上下,v2設定左右
padding:v1 v2 v3;v1設定上,v2設定左右,v3設定下
padding:v1 v2 v3 v4;設定上右下左
單方向設定:padding-top/right/bottom/left
box-sizing屬性,設定框模型的計算方式
box-sizing:content-box;預設值,盒子模型計算,div設定的width,height為content的大小
<style>
#d1{
width: 200px;
height: 200px;
margin: 10px;
padding: 10px;
border: 10px solid black;
box-sizing: content-box;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
box-sizing:boder-box;div設定的width,height為border外邊距的大小
<style>
#d1{
width: 200px;
height: 200px;
margin: 10px;
padding: 10px;
border: 10px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>