尺寸和邊框: 一、尺寸 行內元素是不能設置寬和高的，其高度是由元素裡面的內容的高度撐起來的； 行內塊元素可以設置寬和高，當行內塊元素沒有設置寬高的時候，行內塊元素的寬高是其預設的寬高； 塊級元素：可以設置寬高，但是如果沒有設置寬，則其預設寬度是該塊級元素的父級元素的寬度的100%；如果沒有設置高度， ...
尺寸和邊框:
一、尺寸
行內元素是不能設置寬和高的，其高度是由元素裡面的內容的高度撐起來的；
行內塊元素可以設置寬和高，當行內塊元素沒有設置寬高的時候，行內塊元素的寬高是其預設的寬高；
塊級元素：可以設置寬高，但是如果沒有設置寬，則其預設寬度是該塊級元素的父級元素的寬度的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的幾個取值入下：
overflow:scroll(不管是否溢出，水平和垂直都添加滾動條) hidden(隱藏溢出的內容) auto(只在有溢出的地方添加滾動條) visible(預設值) 常見的塊級元素：div , h系列 , li , dt ,dd，以及p標簽元素； 常見行內元素：span , a , b , i , u , em; 實現水平溢出的方法：可以將盛放內容的塊級元素或行內塊元素的寬度設置為比其該元素的父元素的寬度更大即可實現水平溢出； 三、邊框 border border設置時的簡寫方式：border:width style color; width:邊框的寬度（就是邊框的粗細程度); style:邊框線的樣式，大多數情況下取值為solid(邊框線為實線),當然也有其它取值； color:邊框線的顏色； 單個設置某一個方向是否有邊框：border-top/border-left/border-right/border-bottom:width style color;邊框的陰影: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
