整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
寫HTML代碼時要經常用到Chrome瀏覽器的F12功能，比如我們看淘寶：
通過元素定位器定位到一個li標簽，然后看開發者選項卡的右側：
這里就是這個li標簽里的所有屬性了，我們在做開發時可以直接修改這里的屬性值，然后直接在頁面中查看效果，比如我現在在這里加一個
margin-bottom: 20px：
回車后即可在頁面查看效果：
也可以在盒子上直接調整大小來進行盒子樣式的調試：
至此，我們應該記住：width和height只能設置盒子中內容的寬度和高度，盒子的實際高度和寬度應該加上border和padding。
div + css的應用
position：定位屬性
作用：讓標簽顯示在我們想要顯示的位置
默認值：static 靜態，不能動
lesson4.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Css盒子模型</title> <meta name="keywords" content="key1, key2"> <meta name="description" content=""> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div class="mydiv">我的css盒子測試模型1</div> </body> </html>
index.css
*{
margin: 0px;
padding: 0px;
}
html,body{
width: 100%;
height: 100%;
}
div.mydiv{
width: 100px;
height: 100px;
background-color: #000;
color:#fff;
padding: 10px 20px;
border-top: 10px solid #f00;
border-left: 10px solid #0f0;
border-right: 10px solid #00f;
border-bottom: 10px solid #bbb;
display: inline-block;
margin: 10px;
position: relative;
top: 100px;
left: 100px;
}
注意，上面css代碼中，我們增加了position：relative屬性，接著我們增加了top和left屬性，這時候頁面顯示為：
盒子的上面和左面都增加了100像素的距離，而如果我們不添加positon: relative屬性直接增加top和left這時候這兩個屬性是不起作用的。
這里的相對是指相對于盒子的左上角頂點。
應用relative時只能應用left和top屬性，也就是相對于左側和上方的距離。
讓盒子固定在某個地方。比如微信公眾號右側有一個`在線問答`不管頁面怎么動，它都是在瀏覽器右側中部邊緣：
比如現在我們讓我們的盒子頂在右側邊緣且沒有間隙，那我們就可以這樣修改代碼：
index.css
*{
margin: 0px;
padding: 0px;
}
html,body{
width: 100%;
height: 100%;
}
div.mydiv{
width: 100px;
height: 100px;
background-color: #000;
color:#fff;
padding: 10px 20px;
border-top: 10px solid #f00;
border-left: 10px solid #0f0;
border-right: 10px solid #00f;
border-bottom: 10px solid #bbb;
display: inline-block;
margin: 10px;
position: fixed;
right: -10px;
top: -10px;
}
這樣盒子模型就會固定在右上角：
相對于relative，應用fixed屬性可以應用：top/left/right/bottom屬性。
關注，不迷路，每天分享大量前端知識
css中的盒子模型 css處理網頁時，他認為每個元素都包含在一個不可見的矩形盒子 盒子是由 內容區，內邊距(padding)，邊框，外邊距(margin)組成
在瀏覽器中，其默認樣式中存在一些body等元素存在的默認樣式，比如一些外邊距，內邊距等,它的這些默認樣式
所以在編寫樣式之前我們需要將默認樣式取消掉，在書寫代碼時在style中引入下面的reset.css文件即可，下面的效果不好的話，可以百度reset.css粘貼進去。
內聯元素的盒模型，設置width和height無效，水平方向的內邊距可以用，內聯元素可以設置 垂直方向的外邊距，不會影響頁面的布局，即不影響其他元素的位置，僅僅是其顯示效果發生變化 可以使用邊框，外邊距，兩個內聯元素的相鄰外邊距會相加，垂直外邊距不支持！
css中的display，通過display可修改元素類型，比如塊元素轉化為內聯元素，內聯元素轉化為塊元素，還可以設置為內聯塊元素，擁有他們的共性，可以設置寬高，但又
不獨占一行，比如img標簽。display：none 元素不顯示，也不在頁面占有位置。
visiblity visiblity：none 元素不顯示，但在頁面占有位置。
css盒子模型中的overflow 如果子元素大小超過父元素的大小，超出父元素的內容
會在超過父元素的區域顯示，父元素默認是將溢出的內容，在父元素外邊顯示，通過overflow可以處理溢出的內容。比如overflow：scroll/auto，添加滾動條，來查看所有內容。
文檔流 文檔指的是HTML的頁面，每個頁面都是一個文檔，文檔流就是處在網頁中的底層表示一個頁面的位置，我們創建的元素默認處在文檔流中
元素在文檔流中的特點。
1.塊元素在文檔流中會默認獨占一行，默認自上往下排列，默認寬度是父元素的100%
塊元素的高度默認被內容撐開。
2.內聯元素在文檔流中只占自身的大小，默認從左向右排列，如果一行內容納不了所有元素則會另起一行，接著自左向右。
在內聯元素，寬度和高度默認被內容撐開。
浮動（float）
塊元素在文檔流中默認垂直排列，如果希望塊元素水平排列，可以使其脫離文檔流。
百度reset.css即可搜到去除瀏覽器默認樣式的css文件
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
1.盒子移動，我們可以理解為盒子的offsetLeft在不斷的增加
2.offsetLeft在不斷的增加，我們可以利用我們的定時器實現，setInterval可以實現重復執行盒子的offsetLeft不斷增加
3.盒子什么時候停止呢?我們可以在定時器內增加一個判斷條件，如果盒子的offsetLeft大于等于某個長度了，我們可以停止移動盒子
4.停止移動盒子的本質就是清除定時器clearInterval
5.怎么實現多個盒子移動呢？我們可以采用封裝函數的方法，把盒子移動的定時器封裝到函數里面，哪個盒子需要移動動畫，哪個盒子就調用函數
6.調用函數的時候，我們需要傳遞那些實參給函數的形參呢，從定時器我們可以了解到，我們需要傳遞哪個對象需要移動，并且需要移動動畫要移動到的終點。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
