web前端基礎-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; 實作水平溢位的方法：可以將盛放內容的塊級元素或行內塊元素的寬度設定為比其該元素的父元素的寬度更大即可實作水平溢位；三、邊框 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上下邊距，則該塊級元素在上下移動時，其父元素也會跟著上下移動，但是不會左右移動，始終保持父子塊級元素的上下相對位置不變；	上下外邊距無效，左右外邊距有效	上下左右外邊距有效

2020-01-05

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/83610.html

標籤：Html/Css

上一篇：移動端適配思路淺析

下一篇：如何使用CSS3中的結構偽類選擇器和偽元素選擇器