Web前端的尺寸和邊框知識點有哪些-創新互聯

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

創新互聯建站從2013年開始，是專業互聯網技術服務公司，擁有項目成都網站設計、網站制作網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元甘德做網站,已為上家服務,為甘德各地企業和個人服務,聯系電話:18980820575

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

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

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

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前端的尺寸和邊框知識點有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注創新互聯行業資訊頻道。

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容