顯示：盒子-css教學-PHP中文網

首頁

web前端

css教學

顯示：盒子

高洛峰

Oct 29, 2016 pm 01:33 PM

display:box;是css3新加入的盒子模型屬性，經典的佈局應用就是佈局的垂直等高、水平均分、按比例劃分。

目前box-flex屬性還沒有得到firefox、Opera、chrome瀏覽器的完全支持，但可以使用它們的私有屬性定義firefox(-moz-)、opera(-o-)、chrome/safari（-webkit- )。

一、box-flex屬性

1.水平等寬盒子

代碼：

<html>
<head>
<style>
.wrap{
    width:600px;
    height:200px;
    display:box;
    display:-moz-box;
    display:-webkit-box;
}
.sectionOne{
    background:orange;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
}
.sectionTwo{
    background:purple;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
}
.sectionThree{
    background:green;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
}
</style>
</head>
<body>
<article class="wrap">
    <section class="sectionOne">01</section>
    <section class="sectionTwo">02</section>
    <section class="sectionThree">03</section>
</article>
</body>
</html>

展示效果：

顯示：盒子

容器：父元素樣式必須使用display:box*內進行劃分；子元素樣式使用box-flex屬性指定在父容器中所佔比例（份數）。以上是等寬劃分，三個子容器屬性box-flex:1;總共將父容器依寬度分為三份，所以子容器是等寬劃分。

注意：如果定了display:box則該容器則定義為了內聯元素，使用margin:0px auto讓其居中是無效的，要想使其居中只能通過它的父容器的text-align:center 。

2.自訂劃分寬度比例

將上述CSS程式碼中box-flex:1;改變為不同的佔比。

代碼

.sectionOne{
    background:orange;
    width:300px;//设置固定宽度
}

展示效果：

顯示：盒子

如果設定了margin，則margin也算在定寬內，剩下寬度進行劃分。

程式碼（上面程式碼改）：

<style>
.wrap{
    width:600px;
    height:200px;
    display:box;
    display:-moz-box;
    display:-webkit-box;
    text-align:center;
}
.sectionOne{
    background:orange;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
}
.sectionTwo{
    background:purple;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
    margin:0 50px;//添加margin宽度
}
.sectionThree{
    background:green;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
}
</style>

展示效果：

顯示：盒子

每塊的寬度是減掉左右margin：100px之後的166.7px,而不是200px，在佈局上也是等分佈。

二、box其他屬性

其他屬性包括：box-orient | box-direction | box-align | box-pack | box-lines。

1.box-orient屬性作用：決定父元素裡子元素的排列方式，是水平還是垂直。

屬性值：horizontal | vertical | inline-axis | block-axis | inherit。

如果父元素box-orient:horizontal;或box-orient:inline-axis;，將子元素水平排列，就是將父元素的寬度劃分。（此時如果父元素定義了高度值，其子元素的高度值設定則無效狀態，所有子元素的高度等於父元素的高度值；如果父元素不設定高度值，其子元素的高度值才有效並且取最大高度值的子元素的高度。如下。

程式碼：

<style>
.wrap{
    width:600px;
    height:200px;
    display:box;
    display:-moz-box;
    display:-webkit-box;
    text-align:center;
    -moz-box-orient:inline-axis;
    -webkit-box-orient:inline-axis;
}
.sectionOne{
    background:orange;
    height:100px;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
}
.sectionTwo{
    background:purple;
    height:200px;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
}
.sectionThree{
    background:green;
    height:300px;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
}
</style>

展示效果：

顯示：盒子

如果父元素box-orient:vertica;l或box-orient:block-axis;(此屬性是預設值)，對子元素進行垂直排列，就是將父元素的高度進行劃分。（此時如果父元素定義了寬度值，其子元素的寬度值設定則無效狀態；如果父元素不設定寬度值，其子元素的寬度值才有效且取最大寬度值的子元素的寬度。）同上，親測子元素的寬度會溢出父元素設定的高度，並且每個子元素持有自己設定的寬度，不一致，括號裡的說明待查證，代碼和展示效果如下。

程式碼：

<style>
.wrap{
    width:600px;
    height:200px;
    display:box;
    display:-moz-box;
    display:-webkit-box;
    text-align:center;
    -moz-box-orient:vertical;
    -webkit-box-orient:vertical;
}
.sectionOne{
    background:orange;
    width:500px;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
}
.sectionTwo{
    background:purple;
    width:600px;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
}
.sectionThree{
    background:green;
    width:700px;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
}
</style>

展示效果：

顯示：盒子

box-orient:inherit;設定繼承父元素的此值。

2、box-direction

屬性作用：決定父元素裡的子元素排列順序，是正常順序還是反轉順序。

屬性值：normal | reverse | inherit。

該屬性值很好理解，父元素屬性box-direction:normal;指按照html標籤的正常順序排列子元素，box-direction:reverse;指按照反轉（反序）順序排列子元素，box- direction:inherit;指繼承父元素的改值。直接給予展示效果。

展示效果（正序）：

顯示：盒子

展示效果（反序）：

顯示：盒子

3.box-align

屬性值：start | end | center | baseline | stretch。顯示：盒子

box-align:start;表示子元素居頂對齊，展示效果：

顯示：盒子

box-align:end;表示子元素居底對齊，展示效果：🎜🎜🎜🎜

box-align:center;表示子元素居中对齐，展示效果：

顯示：盒子

4、box-pack

属性作用：确定父元素里面定宽子元素的水平对齐方式。

属性值：start | end | center | justify。

代码：

<style>
.wrap{
    width:600px;
    height:200px;
    display:box;
    display:-moz-box;
    display:-webkit-box;
    text-align:center;
    border:1px solid brown;
    -webkit-box-pack:justify;
}
.wrap section{
    width:100px;  
}
.sectionOne{
    background:orange;
}
.sectionTwo{
    background:purple;
}
.sectionThree{
    background:green;
}
</style>

box-pack:start;表示子元素整体水平居左对齐，展示效果：

顯示：盒子

box-pack:end;表示子元素整体居右对齐，展示效果：

顯示：盒子

box-pack:center;表示子元素整体居中对齐，展示效果：

顯示：盒子

box-pack:justify;表示子元素水平等分父元素宽度，展示效果：

顯示：盒子

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

這不應該發生：對不可能進行故障排除May 15, 2025 am 10:32 AM

解決這些不可能的問題之一，這是您從未想過的其他問題的問題。

@KeyFrames vs CSS過渡：有什麼區別？May 14, 2025 am 12:01 AM

@keyframesandCSSTransitionsdifferincomplexity:@keyframesallowsfordetailedanimationsequences,whileCSSTransitionshandlesimplestatechanges.UseCSSTransitionsforhovereffectslikebuttoncolorchanges,and@keyframesforintricateanimationslikerotatingspinners.

使用頁面CMS進行靜態站點內容管理May 13, 2025 am 09:24 AM

我知道，我知道：有大量的內容管理系統選項可用，而我進行了幾個測試，但實際上沒有一個是一個，y＆＃039;知道嗎？怪異的定價模型，艱難的自定義，有些甚至最終成為整個＆

鏈接HTML中CSS文件的最終指南May 13, 2025 am 12:02 AM

鏈接CSS文件到HTML可以通過在HTML的部分使用元素實現。 1)使用標籤鏈接本地CSS文件。 2)多個CSS文件可通過添加多個標籤實現。 3)外部CSS文件使用絕對URL鏈接，如。 4)確保正確使用文件路徑和CSS文件加載順序，優化性能可使用CSS預處理器合併文件。

CSS Flexbox與網格：全面評論May 12, 2025 am 12:01 AM

選擇Flexbox還是Grid取決於佈局需求：1)Flexbox適用於一維佈局，如導航欄；2)Grid適合二維佈局，如雜誌式佈局。兩者在項目中可結合使用，提升佈局效果。

如何包括CSS文件：方法和最佳實踐May 11, 2025 am 12:02 AM

包含CSS文件的最佳方法是使用標籤在HTML的部分引入外部CSS文件。 1.使用標籤引入外部CSS文件，如。 2.對於小型調整，可以使用內聯CSS，但應謹慎使用。 3.大型項目可使用CSS預處理器如Sass或Less，通過@import導入其他CSS文件。 4.為了性能，應合併CSS文件並使用CDN，同時使用工具如CSSNano進行壓縮。

Flexbox vs Grid：我應該學習兩者嗎？May 10, 2025 am 12:01 AM

是的，youshouldlearnbothflexboxandgrid.1）flexboxisidealforone-demensional，flexiblelayoutslikenavigationmenus.2）gridexcelstcelsintwo-dimensional，confffferDesignssignssuchasmagagazineLayouts.3）blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction