溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“css尺寸邊框溢出怎么處理”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css尺寸邊框溢出怎么處理”吧！
尺寸和邊框:
一、尺寸
行內元素是不能設置寬和高的，其高度是由元素里面的內容的高度撐起來的；
行內塊元素可以設置寬和高，當行內塊元素沒有設置寬高的時候，行內塊元素的寬高是其默認的寬高；
塊級元素：可以設置寬高，但是如果沒有設置寬，則其默認寬度是該塊級元素的父級元素的寬度的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; 實現水平溢出的方法：可以將盛放內容的塊級元素或ha'e行內塊元素的寬度設置為比其該元素的父元素的寬度更大即可實現水平溢出；
三、邊框 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上下邊距，則該塊級元素在上下移動時，其父元素也會跟著上下移動，但是不會左右移動，始終保持父子塊級元素的上下相對位置不變； | 上下外邊距無效，左右外邊距有效 | 上下左右外邊距有效
|
感謝各位的閱讀，以上就是“css尺寸邊框溢出怎么處理”的內容了，經過本文的學習后，相信大家對css尺寸邊框溢出怎么處理這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
