時間：2016年5月17日
在昨天學(xué)習(xí)了邊框和尺寸的情況下，今天我們主要學(xué)習(xí)的就是盒模型髓窜。盒模型是HTML中最重要扇苞，這也是要實現(xiàn)基本布局的一個關(guān)鍵知識點〖淖荩基本的盒模型包括margin鳖敷，bordor，padding程拭，contant定踱，由外到里。其中“margin”是邊框激勵父標(biāo)簽的距離恃鞋，或者距離同級標(biāo)簽邊框的距離崖媚。padding數(shù)以標(biāo)簽的一部分亦歉，是標(biāo)簽內(nèi)容到邊框的距離。bordor設(shè)置邊框樣式如顏色畅哑，實線虛線或者大小肴楷。contant是內(nèi)容。margin是外邊距荠呐，而padding是內(nèi)邊距赛蔫。
課堂筆記摘錄：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-image: url("nihao/22.jpg");
background-repeat: repeat;
background-attachment:fixed;
margin: 100px;
}
/這里設(shè)置的主要是body的樣式，無論是背景圖片和背景顏色還是外邊距都有體現(xiàn)泥张。/
#box{
width: 300px;
padding:10px;
border: 2px dotted gray;
background-color: pink;
}
div.box{
width: 200px;
height: 100px;
padding-left: 20px;
margin: 40px;
border: 1px solid black
}
/*div{
width: 400px;
height: 300px;
border: 1px solid black;
background-image: repeating-radial-gradient(50px at center,red 0px,green 20px,orange 50px);
}
*/
d1{
background-image: linear-gradient(to bottom,red,#ccc);
}
bar{
height: 76px;
width: 200px;
background-image: url(bg.jpg);
background-repeat: repeat-x;
}
h2{
background-image: radial-gradient(200px at left top,red,blue);
}
right{
display: inline-block;
}
a{
width: 100px;
height: 100px;
border: 1px gray dotted;
background-color: blue;
padding: 10px;
}
b{
width: 122px;
border: 1px white dotted;
background-color: yellow;
padding: 10px;
}
c{
width: 144px;
border: 1px black dotted;
background-color: pink;
padding: 10px;
}
top{
display: inline-block;
width: 100px;
height: 100px;
background-color: black;
/*margin-bottom: 150px;*/margin:auto;
}
bottom{
display: inline-block;
width: 100px;
height: 100px;
background-color: yellow;
/*margin-top: 100px;*/
}
</style>
</head>
<body>
<div id="top"></div>
<div id="bottom"></div>
<div id="box">
覺得神女控土壤管理山東那邊lift還能巴洛克風(fēng)格很不vfbhljfnbx可不能打開呵恢，發(fā)布 逢高減磅你煩不煩客服根本就技俐，電飯煲 咖啡館不見了地方回來的根本就好地解放北路附近改變你的的不是跟你玩日本李嘉誠不了人挺好ijn载迄，吃飯吧ilghfkgh來發(fā)表講話了日就會明白你勞動法保護(hù)考慮別人可了不得
</div>
<div class="box">
您好崖咨，你你撥打的電話已關(guān)機画切，請你稍后再撥拒炎。
</div>
<div id="d1"></div>
<div id="bar"></div>
<div id="h2"></div>
<div id="right">
<div id="c"><div id="b"><div id="a"></div></div></div>
</div>
</body>
</html>
上述程序中體現(xiàn)的有在做和模型的時候設(shè)置的一些參數(shù)和能夠達(dá)到的效果硅堆。
盒模型的結(jié)構(gòu)樣式圖如下：
盒模型在css中的樣式：
div.box {
width:200px; height:100px; padding:20px; margin:40px; border:1px solid black;
}
<div class="box">
This is content.
This is content.
This is content.
</div>
什么是外邊距沪曙？
圍繞在元素邊框周圍的空?白區(qū)域是外邊距
– 會在元素外創(chuàng)建額外的空?白
– 外邊距是透明的
外邊距的作用效果：
外邊距 margin
? 外邊距：與下?一個元素之間的空間量 – margin：value;
? 單邊設(shè)置
– margin-top/right/bottom/left：value;
? 外邊距的屬性值可能為px(像素)痘括，百分?比(%)或?自動 (auto)歇竟，也可以為負(fù)值
div {
width:150px; height:150px; border:2px solid #0f0; margin-top:10px; margin-right:20px; margin-bottom:30px; margin-left:40px; }
顯示效果：
外邊距 margin（續(xù)1）
? 默認(rèn)情況下挥唠，以下 HTML 塊級元素都存在外邊距
– body –
h1,h2,h3,h4,h5,h6
– p…
? 聲明 margin 屬性，可以覆蓋默認(rèn)樣式 body,p,div,h1,h2,h3,h4,h5,h6,pre
{
margin:0;
}
外邊距 margin（續(xù)2）
? margin 可取值為 auto焕议，由瀏覽器計算外邊距
– 實現(xiàn)?水平?方向居中顯?示的效果
外邊距的簡潔寫法
? 外邊距的簡捷寫法有以下?幾種：
– margin : value(四個?方向相同) ;
– margin : value(上下) value(左右) ;
– margin : value(上) value(左右) value(下) ;
– margin: value(上) value(右) value(下) value(左) ;
div {
width:150px; height:150px; border:2px solid #0f0; margin:10px 20px 30px 40px;
}
外邊距合并
? 當(dāng)兩個垂直外邊距相遇時宝磨，它們將形成?一個外邊距，稱為 外邊距合并
? 合并后的外邊距的?高度等于兩個發(fā)?生合并的外邊距的?高度 中的較?大者
注意：margin縱向疊加盅安，橫向相加唤锉。
什么是內(nèi)邊距
? 內(nèi)邊距：內(nèi)容區(qū)域和邊框之間的空間
– 會擴?大元素邊框所占?用的區(qū)域
div
{
border:2px solid red; width:200px; height:50px;
}
d1
{
padding:20px;
}
圖解：
內(nèi)邊距 padding
? 內(nèi)邊距：內(nèi)容與框線之間的距離
– padding：value;
? 內(nèi)邊距屬性值可以為像素、百分?比别瞭，但不能為負(fù)數(shù)
? 單邊設(shè)置
– padding-top/right/bottom/left：value;
內(nèi)邊距的簡潔寫法
? 內(nèi)邊距的簡捷寫法有以下?幾種：
– padding : value(四個?方向相同);
– padding : value(上下) value(左右);
– padding : value(上) value(左右) value(下);
– padding : value(上) value(右) value(下) value(左)
注意：兄弟關(guān)系用margin窿祥，父子關(guān)系用padding，如果父子關(guān)系使用padding必須將子用display轉(zhuǎn)化為塊蝙寨。
inling-block.
背景繪制區(qū)域 background-clip
? background-clip 屬性規(guī)定背景的繪制區(qū)域
? 可取值為
– border-box：背景被裁剪到邊框盒晒衩，為默認(rèn)值
– padding-box：背景被裁剪到內(nèi)邊距框
– content-box：背景被裁剪到內(nèi)容框
背景的定位區(qū)域 background-origin
? background-origin 屬性規(guī)定背景圖?片的定位區(qū)域
? 可取值為
– border-box：背景圖像相對于邊框來定位
– padding-box：背景圖像相對于內(nèi)邊距框來定位
– content-box：背景圖像相對于內(nèi)容框來定位
背景屬性 background
? background 屬性在一個聲明中設(shè)置所有的背景屬性
? 語法結(jié)構(gòu)是：
– background : color url(圖像URL) repeat attachment position ;
? 如果不設(shè)置其中的某個值，將使?用默認(rèn)值
什么是漸變
? 漸變指墙歪，兩種或者多種顏?色之間的平滑過渡
? 可以指定多個中間顏?色值（?色標(biāo)） – 每個?色標(biāo)包含一種顏?色和一個位置 – 從每個?色標(biāo)的顏?色淡出到下一個听系，以創(chuàng)建平滑的漸變
? 漸變可以?用在任何使?用背景圖?片的地?方
– 線性漸變
– 徑向漸變
– 重復(fù)漸變
漸變語法
? 使?用 background－image 屬性進(jìn)?行設(shè)置
? 可以取值 – linear-gradient ：線性漸變
– radial-gradient ：徑向漸變
– repeating-linear-gradient ：重復(fù)線性漸變
– repeating-radial-gradient ：重復(fù)徑向漸變
線性漸變
? linear-gradient( angle, color-point1, color-point2,…)
– angle：為第?一個參數(shù)，指定漸變的?方向虹菲，可以是?角度值靠胜， 也可以是關(guān)鍵詞，如 to top（對應(yīng) 0deg），to right（對應(yīng) 90deg）浪漠，to bottom（對應(yīng) 180deg）菠赚，to left（對應(yīng) 270deg）
– color－point：表?示顏?色的起始點、中間點或者結(jié)束點郑藏，取 值為顏?色和位置的組合，如 red 0%瘩欺、green 50％
徑向漸變
? radial-gradient( [size at position], color-point1, colorpoint2,…)
– position：為第?一個參數(shù)必盖，指定漸變的圓?心位置，默認(rèn)值為 center俱饿；可以取值為 數(shù)值歌粥、百分?比，或者關(guān)鍵字拍埠；此參數(shù) 可以省略
– color－point：表?示顏?色的起始點失驶、中間點或者結(jié)束點，取 值為顏?色和位置的組合枣购，如 red 0%嬉探、green 50％
重復(fù)漸變
? 重復(fù)線性漸變
– repeating-linear-gradient( angle, color-point1, color-point2, …)
重復(fù)漸變（續(xù)1）
? 重復(fù)徑向漸變
– repeating-radial-gradient( [size at position], color-point1, color-point2,…)
瀏覽器兼容性
?目前，各瀏覽器的新版本均?支持漸變屬性
? 對于不?支持的版本
– Firefox 需要前綴
-moz– Chrome 和 Safari 需要前綴-webkit
– Opera 需要前綴 -o#
display參數(shù)：none（隱藏表情標(biāo)簽棉圈，并且不占款高涩堤，inline行標(biāo)簽，block轉(zhuǎn)化為快標(biāo)簽）inlinr-block轉(zhuǎn)化為內(nèi)聯(lián)塊
