盒模型

時間 2019-12-12

標籤模型简体版

原文原文鏈接

盒模型

盒模型：是在網頁設計中常常用到的CSS技術所使用的一種思惟模型，內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)，都是一個個盒子組成的。
- margin：區域老是透明的，可見
- 注：ie6/ie7除外，ie瀏覽器會將width解釋爲一個元素和的整個寬度，與其餘瀏覽器解析不一樣
- em盒：控制元素字體大小，一個字一個盒子
- 內容區：每一個元素有一個內容盒子，大小取決於元素的字體大小
- 內嵌盒：文本中每一個字符和元素運行都會產生一個內嵌盒
- 行盒：表明一行所須要的總高度（light-height控制）
- 他們之間是層級關係
寬和高：
- 控制元素的大小
- 行內元素轉換塊級：display：inline-block/block
- 元素的寬高，在默認狀況下取決於字體和圖片的大小
外邊距：
- margin:_ _ _ _表示外邊距設置：上右下左順序
- 外邊距能夠是負值，與頁面的其餘元素重疊
- 相鄰的兩個塊級元素之間距離，以他們之間最大的外邊距爲準
邊框：
- 非可替換內嵌元素的邊框對於該元素所在行的高度沒有影響（內容不變，span換strong）
- 可替換元素的邊框將會影響高度（內容不變，sapn換h1）
- border:屬性值有9個，經常使用none,dotte,dashed,solid,double,groove,right,inset,outset
- border-top/right/bottom/left-style: 可分別對邊框進行設置
- boder:_ _ _ _ 順序：上右下左
內邊距:
- 內邊距是padding是元素內容區與邊框可選區域
- padding:_ _ _ _ 順序：上右下左
- padding沒有負值
正常文檔流佈局：
- 標準文檔流：文檔流指的是元素排版佈局過程當中，元素會自動從左往右，從上往下的流式排列。並最終窗體自上而下分紅一行行，並在每行中從左至右的順序排放元素
元素的浮動：脫離標準文檔流，實現樣式佈局的改變
- 基礎：
  - flot的屬性值：none(不浮動)，left(左浮)，right(右浮)
  - 浮動的元素就像文檔流中的島嶼，雖然這些浮動元素從正常文檔中脫離出來，可是流仍是圍繞着這些島嶼
  - 當folt不爲none時，元素會被視爲塊級
  - 浮動前，必須給浮動的元素width不然會摺疊，可是浮動元素的margin是不會重合的，保留了下來
- 行爲：
  - 若第一個同級塊級元素浮動，後面的會跟着浮動，造成一行並列
- 清除浮動：
  - clear屬性值有三個：none(默認)，left（清除左浮），right(清除右浮)，both(清除全部浮動)

定位：容許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另外一個元素甚至瀏覽器窗口自己的位置

類型
- static:默認，標準文檔流
- relative：相對定位，位置改變，但原元素在文檔的原始空間保留
- absolute:絕對定位，脫離文檔流，原始空間再也不保留，不影響其餘元素，置於文檔最上層，會遮蓋其餘元素
- fixed:固定定位，脫離文檔流，相對於視口定位（瀏覽器窗口）
位置
- position屬性值四個：top,left,bottom,right

處理溢出

overflow:指定其內容不能填充
屬性值四個：visible(默認值)，hidden(表示裁剪內容，不顯示超出內容)，scroll(表示裁剪內容，同時添加滾動條)，atuo(必要時裁剪內容，並添加滾動條)
添加overflow屬性，該元素的position屬性必須是absolute

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>boder邊框</title>
    <style>
       .style1{
           position: relative;
           height: 150px;
           width: 150px;
           border: 1px solid black;
           background-color: red;
       }
        .style2{
            position: absolute;
            top: 10px;
            left: 10px;
            height: 50px;
            width: 50px;
            border: 1px solid aqua;
            background-color: #7ffb80;
        }
        .style3{
            height: 50px;
            width: 50px;
            border: 1px solid black;
            background-color: #f1bdaa;
        }
    </style>
</head>
<body>

 <div class="style1">
     <div class="style2">圖一</div>
     <div class="style3">圖二</div>
 </div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。