這篇文章主要講解了“css尺寸邊框溢出怎么處理”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css尺寸邊框溢出怎么處理”吧！

站在用戶的角度思考問題，與客戶深入溝通，找到?jīng)负泳W(wǎng)站設計與浉河網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都做網(wǎng)站、網(wǎng)站建設、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、主機域名、虛擬空間、企業(yè)郵箱。業(yè)務覆蓋浉河地區(qū)。

web前端基礎-css-尺寸邊框

尺寸和邊框:

一、尺寸

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

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

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

二、溢出處理

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

    
    
    
    
    


    

        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?
    

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

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

hidden(隱藏溢出的內(nèi)容) 　　　　　　auto(只在有溢出的地方添加滾動條) 　　　　

visible(默認值) 

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

常見行內(nèi)元素：span , a , b , i , u , em; 實現(xiàn)水平溢出的方法：可以將盛放內(nèi)容的塊級元素或ha'e行內(nèi)塊元素的寬度設置為比其該元素的父元素的寬度更大即可實現(xiàn)水平溢出； 

三、邊框 border 

border設置時的簡寫方式：border:width style color; 

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

style:邊框線的樣式，大多數(shù)情況下取值為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:陰影的顏色

五、盒子模型

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

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

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

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

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

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

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

box-sizing：默認的是content-box,即設置的width(寬度)僅僅是元素內(nèi)容的寬度，如取值設置為border-box,則設置寬度實際上是元素內(nèi)容區(qū)域的寬度+border-width+padding(左右內(nèi)邊距),當然高度也是一樣的；

總結(jié)

感謝各位的閱讀，以上就是“css尺寸邊框溢出怎么處理”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對css尺寸邊框溢出怎么處理這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關知識點的文章，歡迎關注！