推廣 熱搜: WEB前端教程  雅思培訓班  雅思培訓 

WEB前端教程:盒子模型

   日期:2019-04-22     瀏覽:266    
核心提示:外邊距圍繞在元素邊框周圍的空白區域會在元素外創建額外的空白區域外邊距是透明的語法:margin:value;單邊設置margin-top/right/


外邊距

圍繞在元素邊框周圍的空白區域

會在元素外創建額外的空白區域

外邊距是透明的

語法:margin:value;

單邊設置

margin-top/right/bottom/left: value;

value可取值為像素,%,auto,負值


外邊距簡寫

margin:value(四個方向相同) ;

margin: value(上下) value(左右);

margin: value(上) value(左右) value(下);

margin: value(上) value(右) value(下) value(左);

margin設置元素外邊距的寬度,它有這么幾個特點

1. 塊級元素的垂直相鄰外邊距會合并

2. 行內元素實際上不占上下外邊距。行內元素的的左右外邊距不合并

3. 浮動元素的外邊距也不會合并

4. 允許指定負的外邊距值,不過使用時要小心

內邊距

內容區域和邊框之間的空間

會擴大元素邊框所占用的區域

語法:padding:value;

單邊設置

padding-top/right/bottom/left:value;

value可取值為像素,百分比,但不能為負數

內邊距的簡寫

padding:value(四個方向相同) ;

padding: value(上下) value(左右);

padding: value(上) value(左右) value(下);

padding: value(上) value(右) value(下) value(左);

border邊框

border屬性設置一個元素的邊框,它有三個要素:寬、樣式、顏色,統稱“邊框三要素”。

三要素書寫的時候一般如下順序

border:寬度 樣式 顏色

border: 1px solid red;

不過不按此順序來寫依然能正常顯示。

div{ border: red solid 2px; }

border的三要素可以統一寫在”border”屬性中,也可以單獨設置。

統一的寫法:border: 1px solid  red;

單獨設置的寫法:

border-width:;

border-style:;

border-color:;

要注意,在style屬性為空的情況下,整個邊框是不會出現的。這不論是統一寫在border或是單獨設置都是這樣的。

不寫width會有默認3像素的值。

不寫顏色會默認為黑色。

border-style設置邊框的樣式,有五種常用樣式可選

點狀dotted

實線solid

雙線double   ( 需要最起碼設置為3像素,不然顯示不下)

虛線dashed

無邊框none


Box-sizing

box-sizing屬性允許你以“W3C的盒模型”或“IE盒模型”來定義元素,以適應區域。換句話說,當前元素使用哪種盒模型,可以由box-sizing屬性來指定

它有兩個值

content-box(標準)

padding和border不被包含在width和height內,元素的實際大小為寬高+border+padding,此為標準模式下的盒模型。

border-box(怪異)

padding和border被包含在定義的width和height中,元素實際的大小為你定義了多寬就是多寬。此屬性為怪異模式下的盒模型。

四、伸縮盒模型flexbox

伸縮盒模型也叫彈性盒模型,或flexBox。它決定一個盒子在其它盒子中的分布,以及如何處理可用的空間。使用該模型,可以輕松的創建“自適應”瀏覽器窗口的流動布局。

flexbox是一個很新的東西,在w3c希望可以使用flexbox實現一些更復雜的布局和應用。傳統盒模型基于HTML文檔流排列,使用彈性盒模型可以規定特定的順序。要開啟彈性盒模型,只需要設置display的屬性值 flex,因為它是CSS3中為display新添加的值類型。

目的:在瀏覽器窗口變化時,盒子相應改變大小。

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

flexbox的基礎知識

由于 flexbox是一個整體的模塊,它們之中一些屬性是在父容器上設置,而一些是在子容器上設置。

一個flexbox的基本結構:

.box{ display: flex;}    //最外層的為父容器,定義此容器為彈性布局

.item1{ flex-grow: 1; background:pink}       flex-grow占1比例

.item2{ flex-grow: 2; background:orange}     占2比例

.item3{ flex-grow: 3; background:red}        占3比例


1


2


3


1.首先規定哪個是父容器,父容器中包含多個“項目”(每個子div),項目是可以在父容器中彈性布局的。

2.其次還可以規定父容器中要怎么來顯示它里面的項目,如是否換行、項目排列方向等

父容器常用屬性

1.父容器中的常用屬性

display: flex;

定義一個flex容器

新彈性盒  設置父元素是一個彈性盒,子元素會自動水平排列

4.子元素常用屬性

*伸縮盒中的每一個元素稱為一個項目。

flex-grow: number;

  一個數字,規定項目將相對于其他靈活的項目進行擴展的量。默認值是 0。

.item1{ flex-grow: 1; background:pink}

.item2{ flex-grow: 1; background:orange}

.item3{ flex-grow: 1; background:red}

舊的伸縮盒

伸縮盒從被提出到如今一直在修改,所以這里涉及到了新老寫法

伸縮盒最老版本

display:box;

將對象作為彈性伸縮盒顯示(火狐和webkit內核都支持display:-webkit-box;或display:-moz-box;)

子元素   box-flex:;

伸縮盒過渡版本

display:flexbox;

將對象作為彈性伸縮盒顯示

伸縮盒最新版本

display:flex;

將對象作為彈性伸縮盒顯示

根據不同的瀏覽器內核,css前綴會有不同。最基本的瀏覽器內核有如下四種,其它的內核都是基于此四種進行再研發的。

1.Gecko內核      前綴為-moz-   火狐瀏覽器

2.Webkit內核    前綴為-webkit-   也叫谷歌內核,chrome瀏覽器最先開發使用,safari瀏覽器也使用

該內核。國內很多瀏覽器也使用了webkit內核,如360極速、世界之窗、獵豹等。

3.Trident內核    前綴為-ms-  也稱IE內核

4.Presto內核      前綴-o-   目前只有opera采用

六、css中的繼承

所謂css的繼承是指被包在內部的標簽將擁有外部標簽的樣式性質。繼承是一種機制,它允許樣式不僅可以應用于某個特定的元素,還可以應用于它的后代。例如一個body定義了顏色值也會應用到段落的文本中。

繼承的局限性

在css中,繼承是非常自然的行為,但是繼承也有局限性。有些屬性是不能繼承的,比如border屬性用來設置邊框,它就沒有繼承性。padding和margin也不能繼承。

能被繼承的常用屬性有哪些?

color, cursor, font-family, font-size, font-style, font-weight, font, letter-spacing, line-height, list-style,text-align, text-indent


 
標簽: WEB前端教程
打賞
 
更多>同類資訊

推薦圖文
推薦資訊
點擊排行
網站首頁  |  關于我們  |  聯系方式  |  使用協議  |  版權隱私  |  網站地圖  |  排名推廣  |  廣告服務  |  網站留言  |  RSS訂閱  |  違規舉報  |  粵ICP備19057289號-9
 
2012年七乐彩走势图