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

時間 2020-01-06

標籤 web 前端基礎 css 尺寸邊框欄目 HTML 简体版

原文原文鏈接

尺寸和邊框:html

1、尺寸瀏覽器

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

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

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

2、溢出處理htm

　　當一個元素裏面的內容量過大且該元素的尺寸大小又不足以徹底能容納下該元素裏面的內容時，則會發生溢出想象；默認的溢出狀況是垂直方向溢出容納不下的內容，而且將溢出的內容顯示出來，代碼以下：blog

<!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的幾個取值入下：ip

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

　　　　　　hidden(隱藏溢出的內容)

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

　　　　　　visible(默認值)

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

　　常見行內元素：span , a , b , i , u , em;

實現水平溢出的方法：能夠將盛放內容的塊級元素或ha'e行內塊元素的寬度設置爲比其該元素的父元素的寬度更大便可實現水平溢出；

3、邊框 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 colorci

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

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

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

　　　　spread:陰影的尺寸

　　　　color:陰影的顏色

5、盒子模型

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

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

　　　　左外邊距+左邊框+左內邊距+內容區域寬度+右內邊距+右邊框+右外邊距

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

　　　　上外邊距+上邊框+上內邊距+內容區域高度+下內邊距+下邊框+下外邊距

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

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

　　　　box-sizing：默認的是content-box,即設置的width(寬度)僅僅是元素內容的寬度，如取值設置爲border-box,則設置寬度其實是元素內容區域的寬度+border-width+padding(左右內邊距),固然高度也是同樣的；

　　總結

塊級元素	行內元素	行內塊元素
設置寬高有效。若是不設置寬，寬度是父元素寬度的100%。若是不設置高，高度靠內容撐開	設置寬高無效。寬高靠內容撐開。	設置寬高有效。不設置，自帶默認寬高，寬高都爲0px。
獨佔一行	與其餘行內元素/行內塊共用一行	與其餘行內元素/行內塊共用一行
上下左右外邊距有效但塊級元素被另外一個塊級元素所包裹時，被包裹的塊級元素的margin值若是設置左右邊距，那麼該塊級元素則只是水平移動，可是若是b置a上下邊距，則該塊級元素在上下移動時，其父元素也會跟着上下移動，可是不會左右移動，始終保持父子塊級元素的上下相對位置不變；	上下外邊距無效，左右外邊距有效	上下左右外邊距有效