尺寸和邊框:
一、尺寸
行內元素是不能設置寬和高的，其高度是由元素里面的內容的高度撐起來的；
行內塊元素可以設置寬和高，當行內塊元素沒有設置寬高的時候，行內塊元素的寬高是其默認的寬高；
塊級元素：可以設置寬高，但是如果沒有設置寬，則其默認寬度是該塊級元素的父級元素的寬度的100%；如果沒有設置高度，則該該塊級元素的默認高度是由該塊級元素內部的內容撐起來的高度，如若塊級元素 中沒有內容，則默認高度為；
二、溢出處理
當一個元素里面的內容量過大且該元素的尺寸大小又不足以完全能容納下該元素里面的內容時，則會發生溢出想象；默認的溢出情況是垂直方向溢出容納不下的內容，並且將溢出的內容顯示出來，代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width:200px; height:200px; background-color:yellow; } </style> </head> <body> <div> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea delectus at nobis consectetur doloremque aliquam ratione repudiandae, incidunt temporibus quis aperiam animi iusto, consequuntur cum facilis quos perspiciatis voluptates ullam? </div> </body> </html>
這里關於overflow的幾個取值入下：
邊框的陰影:box-shadow：h-shadow v-shadow blur spread color
h-shadow:水平方向陰影的偏移量
v-shadow:垂直方向陰影的偏移量
blur:陰影的模糊距離，值越大，越模糊
spread:陰影的尺寸
color:陰影的顏色
五、盒子模型
盒子模型---元素在頁面上實際的占地空間的計算方式
瀏覽器默認的元素實際占地寬度：
左外邊距+左邊框+左內邊距+內容區域寬度+右內邊距+右邊框+右外邊距
瀏覽器默認的元素實際占地高度：
上外邊距+上邊框+上內邊距+內容區域高度+下內邊距+下邊框+下外邊距
***外邊距margin：單位有px和%，px：因為改變邊框距的影響，直接位移多少像素的距離；%：位移的距離是父元素寬度的百分比；
margin的特殊取值有auto(自動計算塊級元素的左右邊距，使其塊級元素在父級元素的范圍內水平居中顯示，ps：auto不能是塊級元素垂直居中，只能設置水平居中只對塊級元素有效)，padding(內邊距)取值沒有auto；
box-sizing：默認的是content-box,即設置的width(寬度)僅僅是元素內容的寬度，如取值設置為border-box,則設置寬度實際上是元素內容區域的寬度+border-width+padding(左右內邊距),當然高度也是一樣的；
總結
| 塊級元素 |
行內元素 |
行內塊元素 |
| 設置寬高有效。如果不設置寬，寬度是父元素寬度的100%。如果不設置高，高度靠內容撐開 |
設置寬高無效。寬高靠內容撐開。 |
設置寬高有效。不設置，自帶默認寬高，寬高都為0px。 |
| 獨占一行 |
與其他行內元素/行內塊共用一行 |
與其他行內元素/行內塊共用一行 |
| 上下左右外邊距有效 但塊級元素被另一個塊級元素所包裹時，被包裹的塊級元素的margin值如果設置左右邊距，那么該塊級元素則只是水平移動，但是如果b置a上下邊距，則該塊級元素在上下移動時，其父元素也會跟着上下移動，但是不會左右移動，始終保持父子塊級元素的上下相對位置不變； |
上下外邊距無效，左右外邊距有效 |
上下左右外邊距有效 |
2020-01-05