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

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

尺寸

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

　　行內(nèi)塊元素可以設(shè)置寬和高，當(dāng)行內(nèi)塊元素沒有設(shè)置寬高的時候，行內(nèi)塊元素的寬高是其默認(rèn)的寬高；

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

邊框border

　　border設(shè)置時的簡寫方式：border:widthstylecolor;

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

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

　　color:邊框線的顏色；

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

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

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

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

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

　　spread:陰影的尺寸

　　color:陰影的顏色

溢出處理

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

　　這里關(guān)于overflow的幾個取值入下：

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

　　hidden(隱藏溢出的內(nèi)容)

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

　　visible(默認(rèn)值)

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

　　常見行內(nèi)元素：span,a,b,i,u,em;

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

盒子模型

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

　　瀏覽器默認(rèn)的元素實際占地寬度：

　　左外邊距+左邊框+左內(nèi)邊距+內(nèi)容區(qū)域?qū)挾?右內(nèi)邊距+右邊框+右外邊距

　　瀏覽器默認(rèn)的元素實際占地高度：

　　上外邊距+上邊框+上內(nèi)邊距+內(nèi)容區(qū)域高度+下內(nèi)邊距+下邊框+下外邊距

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

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

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