我們都知道盒子是有寬度、高度和邊框的屬性的，我們頁面中的每乙個標籤和我們實際當中的盒子差不多，也是有這幾個屬性的，所以我們下面分別了解一下。
1.1 頁面中的標籤都是盒子
html中所有元素（標籤 ）都可以看作是乙個盒子，也就是整個網頁都是由乙個個盒子構成，目的在於網頁更佳整潔規整
1.2 網頁由多個盒子組成
網頁的布局是由乙個個盒字構成的目前選中的盒子就是div標籤做出來的
2.3 網頁盒子預設沒有大小（所以看不到）
網頁盒子設定了寬度和高度還是看不到的
通過瀏覽器開發工具看網頁盒子
3.1邊框作用
給網頁盒子加上邊框我們就能看到盒子了
width 設定的是盒子的厚度
style是樣式 solid 實線 dashed虛線 dotted點狀線
3.2邊框屬性設定
邊框的綜合寫法
border：1px solid red;
邊框的分開寫法
top bottom left right 分別是上下左右
我們在寫頁面的時候，實際上是在頁面上排列盒子，所以我們要根據實際需求來不停的移動我們的頁面標籤（也就是我們所認為的盒子），所以我們需要牢牢掌握下面盒子位置調整的知識點。
4.1 margin的初識
margin也叫邊距，是盒子與盒子之間的間距，有margin-top(上邊距) margin-bottom(下邊距) margin-left(左邊距) margin-right(右邊距)
4.2 盒子上下外邊距的調整
有兩個盒子我們想讓他離開一定距離，我們可以給第乙個孩子設定margin-bottom也可以給第二個盒子設定margin-top 實現效果是一樣的
4.3 盒子向右移動位置的調整
第乙個盒子想往右移動50px需要設定margin-left為50px
4.4 盒子向下移動位置的調整
第乙個盒子向下移動50需要設定margin-top為50px
有的時候我們明明設定了margin,為什麼在頁面上沒有顯示效果呢，請詳細**下面的筆記
5.1 margin為什麼頁面不顯示
超過了設定的50px
不會有任何變化 因為第乙個盒子距離body的最右邊距離遠遠超過了50px
6.1 margin的四個值寫法
margin的四個值連寫，分別代表上右下左margin
margin：40px 50px 60px 40px;
4個值分別代表了距離上方盒子10px右方20px下方30px左40px總結為上右下左 為順時針方向
6.2 margin的乙個值寫法
margin：50px;
margin只寫乙個值，代表上下左右都是給定的值都是乙個值
6.3 margin兩個值寫法
margin :50px70px;
margin兩個值，分別代表上下margin是第乙個值 左右是第二個值
6.4 margin三個值寫法
margin :50px 60px 70px;
margin三個值，第乙個值代表上margin 第二個值代表左右的margin值 第三個值代表下margin值
margin-top margin-bottom margin-left margin-right是單獨寫法 margin後面給定不同的值是綜合寫法
margin: 0 auto; 盒子 text-align: center 內容實現css水平居中
圓角邊框和盒子陰影
語法 border radius lenth 其中每乙個值可以為數值或百分比的形式 技巧 讓乙個正方形變成圓圈 以上效果圖矩形的圓角，就不要用百分比了，因為百分比是表示高度和寬度的一半 而我們這裡矩形就只用高度的一般就好了。精確單位 語法 box shadow 水平陰影 垂直陰影 模糊距離 虛實 陰...
獲取盒子的實際位置
在元素的定位中經常出錯，學習了一段時間，今天來總結一下其中遇到的一些問題 其中obj.offsetleft指的是乙個元素的計算後的位置 盒模型的尺寸 1.offsetwidth css寬 padding border 2.offsetleft offsettop到定位父級的距離 3.document...
div盒子邊框圓角 CSS之圓角邊框漸變的實現
注 測試瀏覽器版本號 chrome 75.0.3770.80 opera 60.0.3255.109 firefox 67.0 ie 11。之前 css之漸變效果的實現 中有講到邊框顏色漸變，但是只有講最普通的邊框漸變，其作用於圓角邊框漸變時會覆蓋掉圓角的效果，這不是我們預期的，所以我們需要尋找其他...