CSS的box-align屬性控制子元素佈局實例分析-css教學-PHP中文網

box-align:start;

box-align:end;

box-align:center;

box-align:baselinebaseline;

box-align:stretch;

首頁

web前端

css教學

CSS的box-align屬性控制子元素佈局實例分析

高洛峰

Mar 08, 2017 pm 01:52 PM

css

box-align 說明

box-align屬性, 指定元素內子要素縱方向排列指定時使用。
容器元素比子元素大很多的情況下，使用box-align屬性，可以指定子元素的排序順序，並且可以指定子元素如何表示。
還有，縱方向排列一說，可以解釋為元素內子元素的配置方向預設值為水平，使用此屬性後垂直方向進行排列。也可以使用 box-orient:vertical來設定子元素排列方向。

屬性值
start：標準方向元素，各子要素上端沿著元素上端排列，餘下的位置向下排序，反方向元素的話，則沿著下端進行排序，餘下的位置向上排序。
end：標準方向元素，各子要素下端沿著元素下端排列，餘下的位置向上排序，反方向元素的話，則沿著上端進行排序，餘下的位置向下排序。
center：剩餘空間，進行均等分配。
baseline：inline-axis和horizontal的場合，所有子元素baseline配置排列
stretch：各子元素依照容器元素的高來自動排序（預設值）

#關於居中
原來水平垂直居中寫法為：height=line- height 實作垂直居中text-align實作水平居中
現在使用box-align實作垂直居中box-pack 實作水平居中

<!DOCTYPE html>   

<html>   
<head>   
    <title>水平及垂直居中</title>   
</head>   
<body >   
<p style="width:300px; height: 300px; background-color: #ccc;
  line-height: 300px; text-align: center;">   
    <input type="button" value="原有居中方式">   
</p>   
<p style="width:300px; height: 300px; background-color: #aaa;
 display:-webkit-box;-webkit-box-pack: center;
   ; -webkit-box-align:center">   
    <input type="button" value="css3的居中方式">   
</p>   
</body>   
</html>

登入後複製

實例程式碼

<!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>   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
<title> box-align </title>   
<style>   
p.prefix_sample1 {   
width:500px; height:100px;   
background-color:yellow;   
display:-moz-box;   
display:-webkit-box;   
display:-o-box;   
display:-ms-box;   
-moz-box-align:start;   
-webkit-box-align:start;   
-o-box-align:start;   
-ms-box-align:start;   
}   
p.prefix_sample2 {   
width:500px; height:100px;   
background-color:yellow;   
display:-moz-box;   
display:-webkit-box;   
display:-o-box;   
display:-ms-box;   
-moz-box-align:end;   
-webkit-box-align:end;   
-o-box-align:end;   
-ms-box-align:end;   
}   
p.prefix_sample3 {   
width:500px; height:100px;   
background-color:yellow;   
display:-moz-box;   
display:-webkit-box;   
display:-o-box;   
display:-ms-box;   
-moz-box-align:center;   
-webkit-box-align:center;   
-o-box-align:center;   
-ms-box-align:center;   
}   
p.prefix_sample4 {   
width:500px; height:100px;   
background-color:yellow;   
display:-moz-box;   
display:-webkit-box;   
display:-o-box;   
display:-ms-box;   
-moz-box-align:baselinebaseline;   
-webkit-box-align:baselinebaseline;   
-o-box-align:baselinebaseline;   
-ms-box-align:baselinebaseline;   
}   
p.prefix_sample5 {   
width:500px; height:100px;   
background-color:yellow;   
display:-moz-box;   
display:-webkit-box;   
display:-o-box;   
display:-ms-box;   
-moz-box-align:stretch;   
-webkit-box-align:stretch;   
-o-box-align:stretch;   
-ms-box-align:stretch;   
}   

p.aka {background-color:red;}   
p.midori {background-color:green;}   
p.ao {background-color:blue;}   
</style>   

</head>   

<body>   
<h4 id="box-align-start">box-align:start;</h4>   
<p class="prefix_sample1">   
<p class="aka">abcde</p>   
<p class="midori">abcde</p>   
<p class="ao">abcde</p>   
</p>   

<h4 id="box-align-end">box-align:end;</h4>   
<p class="prefix_sample2">   
<p class="aka">abcde</p>   
<p class="midori">abcde</p>   
<p class="ao">abcde</p>   
</p>   

<h4 id="box-align-center-nbsp">box-align:center; </h4>   
<p class="prefix_sample3">   
<p class="aka">abcde</p>   
<p class="midori">abcde</p>   
<p class="ao">abcde</p>   
</p>   

<h4 id="box-align-baselinebaseline-nbsp">box-align:baselinebaseline; </h4>   
<p class="prefix_sample4">   
<p class="aka">abcde</p>   
<p class="midori">abcde</p>   
<p class="ao">abcde</p>   
</p>   

<h4 id="box-align-stretch-nbsp">box-align:stretch; </h4>   
<p class="prefix_sample5">   
<p class="aka">abcde</p>   
<p class="midori">abcde</p>   
<p class="ao">abcde</p>   
</p>   

</body>   
</html>

登入後複製

實例圖
CSS的box-align屬性控制子元素佈局實例分析

以上是CSS的box-align屬性控制子元素佈局實例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

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

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1664

CakePHP 教程

1422

Laravel 教程

1316

PHP教程

1267

C# 教程

1239

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。