WEB前端-CSS盒子

.盒子模型主要定義四個區域：內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）

2.border，設置元素的邊框，屬性（邊框三要素）：寬度、樣式、顏色，這也是通常border屬性值的書寫順序（非嚴格要求）

單獨書寫：border-width（寬度，默認3px）、border-style（樣式，默認none）、border-color（顏色，默認黑色）

border-style屬性值：dotted（點狀）、solid（實線）、double（雙實線）、dashed（虛線）、無邊框（none）

3.padding，設置元素內容與邊框之間的距離，增加內邊距會擴大元素邊框所占用的區域

書寫格式：padding:value（四邊設置，可多值）、padding-top/right/bottom/left:value（單邊設置），value取值可以為像素、百分比，但不能為負數

4.margin，設置元素邊框外周圍的空白區域，外邊距是透明的

書寫格式：margin:value（四邊設置、可多值）、margin-top/right/bottom/left:value（單邊設置），value取值可以為像素、百分比、auto、負數

外邊距合并，當兩個垂直外邊距相遇時，他們將形成一個外邊距，即外邊距合并

合并后的外邊距的高度等于發生合并的兩個外邊距中高度較大者

兩個塊級元素是包含關系時，要設置被包含元素的相對邊距，需要增加父元素border（邊框）或使用“ overflow：hidden”或“ padding”

外邊距特點：① 塊級元素的垂直相鄰外邊距外邊距會合并，② 行內元素不占上下外邊距，且左右外邊距不會合并，③ 浮動元素的外邊距也不會合并，④ 允許指定負數外邊距值

5.怪異盒子，盒子模型分為兩種，一種是符合W3C規范的標準盒子模型，另一種是IE的盒子模型，也被叫做怪異盒子

IE盒子模型也包括margin、border、padding、content，不過IE盒子模型的寬（width）包含了border和padding

6.box-sizing，該屬性用于指定當前元素使用哪種盒子模型，標準（W3C）或怪異（IE）

屬性值：

content-box（標準），padding和border不會被包含在width和height內

border-box（怪異），padding和border被包含在width和height內，即元素實際大小只與width和height有關

7.flexbox，伸縮盒子模型（也叫彈性盒子）

它決定一個盒子在其他盒子中的分布，以及如何處理可用的空間。

該模型可以輕松的創建“自適應”瀏覽器窗口的流動布局。

傳統盒子模型基于HTML文檔流排列，彈性盒子模型可以規定特定的順序。

通過設置 display屬性值為 flex開啟彈性盒子模型。

設置了彈性盒子模型后，float、clear、vertical-align在 flex中不起作用。

8.flex

基本結構：

display:flex，定義外層父容器 d0為彈性布局，默認為水平布局

flex-grow:value，該屬性表示當前子項目在父容器中的占比，默認值為0

flex-direction，定義靈活項目的布局方向，屬性值：row（默認值，靈活項目水平排列）、row-reverse（靈活項目以相反的順序水平排列）

column（靈活項目垂直排列）、column-reverse（靈活項目以相反的順序垂直排列）

justify-content，設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式，使用該屬性之前必須先聲明父元素為彈性盒子

屬性值：flex-start（默認值，子項目位于容器的開頭）、flex-end（子項目位于容器的結尾）、center（子項目位于容器的中心）、

space-between（子項目位于各行之間留有空白的容器內）、space-around（子項目位于各行之前、之間、之后都留有空白的容器內）

align-items，該屬性定義靈活子項目在flex父容器的側軸（縱軸）方向上的對齊方式

屬性值：stretch（默認值，拉伸子項目以適應容器）、center（子項目在容器中心）、flex-start（子項目在容器開頭）、flex-end（子項目在容器末端）、baseline（子項目在容器基線）

如果你現在也想學習前端開發技術，在學習前端的過程當中有遇見任何關于學習方法，學習路線，學習效率等方面的問題，你都可以申請加入我的Q群:前114中6649后671，可以免費獲取你所需要的學習資料，只要我有，那么都是大家的。其中還有許多大廠的面試題，希望能夠對你們有所幫助。

耀盒子Pro 操作指導

榮耀盒子Pro 是華為榮耀推出的一款高端智能語音4K網絡機頂盒。采用2G內存和8G閃存，看視頻、開應用更暢快。接入國廣東方播控平臺，集成CIBN環球影視、銀河·奇異果、云視聽極光、芒果TV等多家內容，你想看的可能都在這里。支持智能語音功能，按住語音鍵說出想看的影片，精彩內容即刻呈現。支持跨屏續播，一個華為賬號，輕松實現榮耀盒子Pro、榮耀手機、平板等設備的個人在線觀影記錄跨屏同步。采用沉浸式UI設計，讓您能夠置身其中，帶來影院級品質享受。

詳情戳視頻↓↓↓

http://v.qq.com/x/page/b0320eppjdw.html

榮耀盒子voice操作指導

榮耀盒子voice是華為榮耀推出的一款智能語音4K網絡機頂盒。采用內置電源設計，即插即用。支持語音控制，通過語音快速找到想看的節目、控制播放進度、打開感興趣的應用，全家人都會用。采用華為海思專業機頂盒芯片，支持 H.265 硬解碼，節省多達50%帶寬需求；集成Imprex? 畫質增強引擎，圖像顯示更清晰真實。采用2*2互補式雙天線，雙發雙收，全方位無死角接收。接入央廣銀河集成播控平臺，匯聚超200萬小時高清正版影視資源庫，每日更新超1000個節目。支持藍牙4.0，可連接手柄、耳機和音箱等多種類型藍牙設備。

詳情戳視頻↓↓↓

http://v.qq.com/x/page/w0181ug27t7.html

榮耀盒子產品視頻

榮耀盒子是華為榮耀推出的一款4K網絡機頂盒。采用華為海思專業機頂盒芯片，支持 H.265 硬件解碼，節省多達50%帶寬需求；集成Imprex? 畫質增強引擎，圖像顯示更清晰真實。采用2*2互補式雙天線，雙發雙收，全方位無死角接收，擁有更暢快的觀影體驗。接入央廣銀河集成播控平臺，匯聚超200萬小時高清正版影視資源庫，每日更新超1000個節目。榮耀盒子將每一寸空間都用到極致，容納了網口、HDMI、USB、 AV接口、SD卡槽，非常齊全。

【轉自榮耀盒子公眾號】

)CSS 標準盒子模型(Box Model)

在網頁中所有HTML元素可以看作盒子,在CSS中,"box model"術語是用來設計和布局時使用的;CSS盒模型本質上是一個盒子,封裝周圍的HTML元素包括:外邊距(margin)邊框(border)內邊距(padding)實際內容(content)四個屬性,所以布局時每個元素所占的總寬高是這4個屬性的總和;比如寬度:總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

1.1Margin(外邊距)清除邊框外的區域,外邊距是透明的

1.2Border(邊框)圍繞在內邊距和內容外的邊框

1.3Padding(內邊距)清除內容周圍的區域,內邊距是透明的

1.4Content(內容)盒子里填充的內容比如文本,圖像等

標準盒子模型

寬度為100px的div

根據盒子模型得出該元素的總寬度為:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一個寬度為100px的元素,此元素的總寬度必須小于等于100px

2)DIV+CSS布局

Div+CSS布局就是將網頁內容用<div>分割為塊,之后使用css設置每個塊的大小,位置等

DIV+CSS布局最重要的是靈活運用float(浮動)屬性,其值:1)left 2)right 3)both

clear屬性作用是清除浮動,其值為:1)left 2)right 3)both

d2向右浮動 float:right

因為div是塊級元素,如果都沒有脫離文檔流div就會按照從上到下的順序放置

d2設置為右浮動其他兩個div位置的變化:

1)d1沒有脫離文檔流會占據一行,所以d2只能浮動到d1下面的右面如上圖所示

2)d2脫離文檔流,d3自動填充到d2的位置

d1,d2全部設置為右浮動

1)當d1,d2都設置為右浮動時:因為css中d1在d2上面先設置,因此d1在右側,如果d2在d1上面先設置樣式,則d2在右側,d1在左側,自己測試不再截圖

2)當d1,d2都設置為右浮動時:d3就會跑到上圖中d2的位置

3)如果3個div都設置左或右浮動,當3個width加一起<=100%就會在第一行顯示(d1,d2,d3)

 <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 50%;
      height: 100px;
    }
  </style>

d2清除左浮動,d3設置為右浮動

當d2清除了左浮動,d3設置為右浮動,就會如上圖所示;如果d2清除的是右浮動,d2就會在d1上面,d3就會定位在d1下面的右面,自己測試不再截圖

當d2清除了左浮動,如果想要d2緊挨著d1(與d1在一行上),可以通過position脫離文檔流設置其上下左右屬性使其定位在d1右側,自己測試

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>div+CSS布局</title>
  <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 30%;
      height: 100px;
      float:left; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 40%;
      height: 100px;
      clear: left;     
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 30%;
      height: 100px; 
      float: right; 
    }
  </style>
</head>
<body>
    <div id="d1"><span style="font-size: 50px;">d1</span></div>
    <div id="d2"><span style="font-size: 50px;">d2</span></div>
    <div id="d3"><span style="font-size: 50px;">d3</span></div>
  </body>
</html>

DIV+CSS布局綜合運用position+上下左右屬性與float屬性為網頁進行布局

注意:瀏覽器的兼容性問題,特別是使用IE內核的瀏覽器對W3C的規范不怎么遵守

在線咨詢

上一篇：前端頁面如何原樣快速導出PDF？附示例
下一篇：這些iframe跨域解決方案你需要了解一下，以后不應該再是你的盲區

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

WEB前端-CSS盒子

您的項目需求