Web前端的尺寸和邊框知識點有哪些

今天小編給大家分享一下Web前端的尺寸和邊框知識點有哪些的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

尺寸

　　行內元素是不能設置寬和高的，其高度是由元素里面的內容的高度撐起來的；

　　行內塊元素可以設置寬和高，當行內塊元素沒有設置寬高的時候，行內塊元素的寬高是其默認的寬高；

　　塊級元素：可以設置寬高，但是如果沒有設置寬，則其默認寬度是該塊級元素的父級元素的寬度的100%；如果沒有設置高度，則該該塊級元素的默認高度是由該塊級元素內部的內容撐起來的高度，如若塊級元素中沒有內容，則默認高度為；

邊框border

　　border設置時的簡寫方式：border:widthstylecolor;

　　width:邊框的寬度（就是邊框的粗細程度);

　　style:邊框線的樣式，大多數情況下取值為solid(邊框線為實線),當然也有其它取值；

　　color:邊框線的顏色；

　　單個設置某一個方向是否有邊框：border-top/border-left/border-right/border-bottom:widthstylecolor;

　　邊框的陰影:box-shadow：h-shadowv-shadowblurspreadcolor

　　h-shadow:水平方向陰影的偏移量

　　v-shadow:垂直方向陰影的偏移量

　　blur:陰影的模糊距離，值越大，越模糊

　　spread:陰影的尺寸

　　color:陰影的顏色

溢出處理

　　當一個元素里面的內容量過大且該元素的尺寸大小又不足以完全能容納下該元素里面的內容時，則會發生溢出想象；默認的溢出情況是垂直方向溢出容納不下的內容，并且將溢出的內容顯示出來。

　　這里關于overflow的幾個取值入下：

　　overflow:scroll(不管是否溢出，水平和垂直都添加滾動條)

　　hidden(隱藏溢出的內容)

　　auto(只在有溢出的地方添加滾動條)

　　visible(默認值)

　　常見的塊級元素：div,h系列,li,dt,dd，以及p標簽元素；

　　常見行內元素：span,a,b,i,u,em;

　　實現水平溢出的方法：可以將盛放內容的塊級元素或行內塊元素的寬度設置為比其該元素的父元素的寬度更大即可實現水平溢出；

盒子模型

　　盒子模型---元素在頁面上實際的占地空間的計算方式

　　瀏覽器默認的元素實際占地寬度：

　　左外邊距+左邊框+左內邊距+內容區域寬度+右內邊距+右邊框+右外邊距

　　瀏覽器默認的元素實際占地高度：

　　上外邊距+上邊框+上內邊距+內容區域高度+下內邊距+下邊框+下外邊距

　　***外邊距margin：單位有px和%，px：因為改變邊框距的影響，直接位移多少像素的距離；%：位移的距離是父元素寬度的百分比；

　　margin的特殊取值有auto(自動計算塊級元素的左右邊距，使其塊級元素在父級元素的范圍內水平居中顯示，ps：auto不能是塊級元素垂直居中，只能設置水平居中只對塊級元素有效)，padding(內邊距)取值沒有auto；

以上就是“Web前端的尺寸和邊框知識點有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。