CSS中如何使用box-align属性控制子元素布局

2024-04-02 19:04:59 920人浏览泡泡鱼

摘要

这篇文章主要介绍CSS中如何使用box-align属性控制子元素布局，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！box-align 说明box-align属性, 指定元素内子要素纵

这篇文章主要介绍CSS中如何使用box-align属性控制子元素布局，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

box-align 说明
box-align属性, 指定元素内子要素纵方向排列指定时使用。<规定框中子元素的显示次序。>
容器元素比子元素大很多的情况下，使用box-align属性，可以指定子元素的排序顺序，并且可以指定子元素如何表示。
还有，纵方向排列一说，可以解释为元素内子元素的配置方向默认值为水平，使用此属性后垂直方向进行排列。也可以使用 box-orient:vertical来设置子元素排列方向。

属性值
start：标准方向元素，各子要素上端沿着元素上端进行排列，余下的位置向下排序，反方向元素的话，则沿着下端进行排序，余下的位置向上排序。<对于正常方向的框，每个子元素的上边缘沿着框的顶边放置。对于反方向的框，每个子元素的下边缘沿着框的底边放置。>
end：标准方向元素，各子要素下端沿着元素下端进行排列，余下的位置向上排序，反方向元素的话，则沿着上端进行排序，余下的位置向下排序。<对于正常方向的框，每个子元素的下边缘沿着框的底边放置。对于反方向的框，每个子元素的上边缘沿着框的顶边放置。>
center：剩余空间，进行均等分配。<均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下。>
baseline：inline-axis和horizontal的场合，所有子元素baseline配置排列<如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐。>
stretch：各子元素按照容器元素的高来自动排序（默认值）

关于居中
原来水平垂直居中写法为：height=line-height 实现垂直居中text-align实现水平居中
现在使用box-align实现垂直居中box-pack 实现水平居中

<!DOCTYPE html>   
  
<html>   
<head>   
    <title>水平及垂直居中</title>   
</head>   
<body >   
<div style="width:300px; height: 300px; background-color: #ccc;  
  line-height: 300px; text-align: center;">   
    <input type="button" value="原有居中方式">   
</div>   
<div style="width:300px; height: 300px; background-color: #aaa;  
 display:-WEBkit-box;-webkit-box-pack: center;  
   ; -webkit-box-align:center">   
    <input type="button" value="css3的居中方式">   
</div>   
</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>   
div.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;   
}   
div.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;   
}   
div.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;   
}   
div.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;   
}   
div.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;   
}   
    
div.aka {background-color:red;}   
div.midori {background-color:green;}   
div.ao {background-color:blue;}   
</style>   
    
</head>   
    
<body>   
<h5>box-align:start;</h5>   
<div class="prefix_sample1">   
<div class="aka">abcde</div>   
<div class="midori">abcde</div>   
<div class="ao">abcde</div>   
</div>   
    
<h5>box-align:end;</h5>   
<div class="prefix_sample2">   
<div class="aka">abcde</div>   
<div class="midori">abcde</div>   
<div class="ao">abcde</div>   
</div>   
    
<h5>box-align:center; </h5>   
<div class="prefix_sample3">   
<div class="aka">abcde</div>   
<div class="midori">abcde</div>   
<div class="ao">abcde</div>   
</div>   
    
<h5>box-align:baselinebaseline; </h5>   
<div class="prefix_sample4">   
<div class="aka">abcde</div>   
<div class="midori">abcde</div>   
<div class="ao">abcde</div>   
</div>   
    
<h5>box-align:stretch; </h5>   
<div class="prefix_sample5">   
<div class="aka">abcde</div>   
<div class="midori">abcde</div>   
<div class="ao">abcde</div>   
</div>   
    
</body>   
</html>

实例图
CSS中如何使用box-align属性控制子元素布局

以上是“CSS中如何使用box-align属性控制子元素布局”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网JavaScript频道！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: CSS中如何使用box-align属性控制子元素布局

本文链接: https://www.lsjlt.com/news/81060.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

CSS中如何使用box-align属性控制子元素布局

这篇文章主要介绍CSS中如何使用box-align属性控制子元素布局，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！box-align 说明box-align属性, 指定元素内子要素纵...

99+

2022-10-19
怎么使用CSS布局属性控制元素的隐藏与显示

今天小编给大家分享一下怎么使用CSS布局属性控制元素的隐藏与显示的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我...

99+

2022-10-19
HTML布局技巧：如何使用position属性进行层叠元素控制

在网页设计中，为了实现复杂的布局效果，我们经常需要使用position属性来控制元素的位置和层叠关系。本文将介绍三种常用的position属性值，分别是relative、absolute和fixed，并给出相应的代码示例。一、relativ...

99+

2023-10-21

html 布局技巧 position属性
HTML布局技巧：如何使用position属性进行浮动元素控制

在网页设计中，布局是非常重要的一环。通过合理的布局可以使网页更加美观、易读，提升用户体验。而在实现布局过程中，浮动元素的控制是其中一个关键点。HTML提供了position属性，通过这个属性我们可以实现对浮动元素的控制。本文将介绍如何使用p...

99+

2023-10-21

浮动 position 元素控制 HTML布局技巧：
HTML布局技巧：如何使用z-index属性进行层叠元素控制

引言：在HTML和CSS中，布局是网页设计中的一个重要环节。在实现网页布局时，我们经常会遇到需要将元素进行层叠显示的情况，例如导航栏在顶部悬浮显示，弹出窗口在其他内容上方弹出等。本文将介绍如何使用CSS的z-index属性实现元素的层叠控制...

99+

2023-10-21

HTML布局 z-index 层叠元素控制
HTML布局技巧：如何使用z-index属性进行层叠元素层级控制

在网页设计和开发中，我们经常需要对元素进行层级控制，以达到想要的布局效果。这时候，z-index属性就是我们的好帮手。z-index属性可以控制元素在垂直方向上的层叠顺序，使得我们可以轻松地调整元素的显示优先级。下面就让我们通过具体的代码示...

99+

2023-10-21

HTML布局 z-index 层叠元素
HTML布局技巧：如何使用定位布局进行元素控制

引言：在网页设计和开发中，布局是非常重要的一部分。HTML和CSS提供了多种布局方法，其中定位布局是最常用的之一。通过定位布局，我们可以精确控制元素在网页中的位置和大小。本文将介绍如何使用定位布局进行元素控制，并提供具体的代码示例。一、CS...

99+

2023-10-21

元素控制定位布局 HTML布局技巧
HTML布局技巧：如何使用position属性进行元素定位

在网页设计和布局过程中，我们经常需要对元素进行定位，以实现不同的布局效果。其中，position属性是CSS中的一个关键属性，它可以用来指定元素的定位方式、位置和相对于其他元素的关系。本文将介绍如何使用position属性进行元素定位，并提...

99+

2023-10-21

html 布局 position
HTML布局指南：如何使用transform属性进行元素变换

在Web设计中，布局是至关重要的。HTML和CSS是实现布局的主要工具。除了传统的布局技术外，CSS3还提供了一种强大的属性——transform属性，可以实现元素的各种变换效果。本文将详细介绍如何使用transform属性进行元素变换，并...

99+

2023-10-21

HTML布局 transform属性元素变换
如何利用css伪类选择器hover控制两个元素属性

小编给大家分享一下如何利用css伪类选择器hover控制两个元素属性，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！利用css伪类选择器hover控制两个元素属性示例1：<ht...

99+

2022-10-19
HTML布局技巧：如何使用overflow属性进行溢出控制

HTML布局技巧：如何使用overflow属性进行溢出控制在进行网页布局时，有时会遇到内容过多而无法完全展示的问题。这时，我们可以使用overflow属性来控制溢出的内容的显示方式。通过合理地使用overflow属性，可以使网页布局更加美观...

99+

2023-10-27

HTML布局溢出控制
如何使用css属性:nth-child(n)匹配选择第n个子元素

本篇内容介绍了“如何使用css属性:nth-child(n)匹配选择第n个子元素”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细...

99+

2022-10-19
css如何使用flexbox布局容器内多元素水平居中

小编给大家分享一下css如何使用flexbox布局容器内多元素水平居中，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！想要实现这样一个父元素中的子元素都是居中的只需在父元素上加样式{disp...

99+

2022-10-19
HTML布局技巧：如何使用overflow属性进行图片缩放控制

在现代网页设计中，图片扮演了非常重要的角色。然而，当图片的尺寸超过容器的大小时，我们常常面临着如何控制图片缩放和显示的问题。在HTML中，我们可以使用CSS的overflow属性来解决这个问题。overflow属性简介overflow属性是...

99+

2023-10-21

html 图片缩放 Overflow
HTML布局技巧：如何使用overflow属性进行文本溢出控制

在网页开发中，有时我们经常会遇到文本内容过长溢出的问题。为了控制这种溢出，使网页布局更加美观和规整，可以使用CSS的overflow属性来实现。本文将介绍overflow属性的使用方法，并提供具体的代码示例。一、overflow属性的作用o...

99+

2023-10-21

HTML布局 overflow属性文本溢出控制
HTML布局技巧：如何使用overflow属性进行内容溢出控制

在网页设计中，经常会遇到内容溢出的情况。如果在容器中的内容超过了容器的大小，会导致布局混乱，影响用户体验。为了解决这个问题，HTML中提供了overflow属性，可以通过设置不同的属性值来控制内容的溢出情况。本文将介绍如何使用overflo...

99+

2023-10-21

HTML布局内容溢出控制 overflow属性
HTML布局指南：如何使用伪类选择器进行元素状态控制

HTML布局指南：如何使用伪类选择器进行元素状态控制引言：在网页设计中，布局是极为重要的一部分。使用HTML和CSS可以实现各种各样的布局方式，但是有时候我们需要根据元素的状态来控制布局效果。在这篇文章中，我们将学习如何使用伪类选择器来控制...

99+

2023-10-26

HTML布局状态控制伪类选择器
HTML布局指南：如何使用伪类选择器进行元素选中样式控制

引言：在网页设计中，对元素选中样式的控制是非常重要的一环。HTML提供了伪类选择器来实现对元素的不同状态进行样式控制，这为我们带来了更多的灵活性。本文将介绍如何使用伪类选择器来控制元素的选中样式，并提供具体的代码示例。一、什么是伪类选择器：...

99+

2023-10-21

HTML布局伪类选择器 HTML布局指南：元素选中样式控制
HTML布局技巧：如何使用z-index属性进行层叠顺序控制

在HTML页面中，我们常常需要使用CSS来控制元素的布局和显示顺序。当多个元素重叠在一起时，我们希望能够通过调整它们的层叠顺序来控制显示效果。这就需要用到CSS的z-index属性。z-index是CSS的一个属性，它用于控制元素的层叠顺序...

99+

2023-10-21

HTML布局技巧 z-index属性层叠顺序控制
如何使用CSS中的visibility属性控制内容显示

小编给大家分享一下如何使用CSS中的visibility属性控制内容显示，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！CSS使用visibility属性控制内容显示什么是CSS的visib...

99+

2022-10-19