php中的box盒子意思

Posted 2023-04-12

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了php中的box盒子意思相关的知识，希望对你有一定的参考价值。

这个应该是css吧!应该和php混合在一起的.要么就是php嵌套的html.
,的CSS中. Box Model叫盒子模型（或框模型），Box Model规定了元素框处理元素内容（element content）、内边距（padding）、边框（border）和外边距（margin）的方式。在HTML文档中，每个元素（element）都有盒子模型，所以说在Web世界里（特别是页面布局），Box Model无处不在。参考技术A 浮动左。这和php没什么关系。纯css就可以做到
首先确定一排3个的话，就把一排的宽度定的和3个盒子加起来的宽度一样或者大于3个盒子的宽度，但是要小于4个盒子的宽度，然后给这个盒子float:left;左浮动一下，在最后一个盒子后面加上一段<div style="clear:both"></div>或者这个层的底部就行。
css3 box-shadow 盒子效果：
<style type="text/css">
img
width: 100px;
height: 100px;
vertical-align: bottom;

.out-shadow
margin-right:10px;
padding:5px;
border:1px solid #ccc;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
box-shadow: 0 0 5px rgba(0,0,0,0.2);
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-ms-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
transition:all 0.3s ease;

.out-shadow:hover
border:1px solid rgba(82, 168, 236, 0.6);
-webkit-box-shadow:0 0 11px rgba(82, 168, 236, 0.6);
-moz-box-shadow: 0 0 11px rgba(82, 168, 236, 0.6);
box-shadow: 0 0 11px rgba(82, 168, 236, 0.6);

</style> 参考技术B 函数名称：alert
功能：提示文字信息，并跳转到目标页面
参数：$msg--alert message;$url--dest web page，默认为空，如果为空，则表示不跳转
返回值：返回跳转的脚本代码
注释：
开发：kapil
时间：2005-08-15
*/
function alert($msg = '',$url = '')

$x = '';
if($url != '')

$x = 'document.location.href="' . $url . '";';

else

$x = '';

if($msg != '')

$m = 'alert("' . $msg . '");';

else

$m = '';

$s = '<script language="javascript">' . $m . $x . '</script>';

echo $s;
参考技术C 函数名称：alert
功能：提示文字信息，并跳转到目标页面
参数：$msg--alert message;$url--dest web page，默认为空，如果为空，则表示不跳转
返回值：返回跳转的脚本代码
注释：
开发：kapil
时间：2005-08-15
*/
function alert($msg = '',$url = '')

$x = '';
if($url != '')

$x = 'document.location.href="' . $url . '";';

else

$x = '';

if($msg != '')

$m = 'alert("' . $msg . '");';

else

$m = '';

$s = '<script language="javascript">' . $m . $x . '</script>';

echo $s;
参考技术D 没有听说过，只有div+css中才有box盒子模型的概念！

[ css 弹性盒子模型 box-flex 及相关属性 ] box-flex属性弹性盒子模型讲解及实例演示

box-flex属性（和谐版）

有道桌面词典显示，”flex”一词中文有“收缩”之意。不过，从此属性实际上产生的效果来看，无论怎样用“收缩”一词解释都显得很牵强。所以，这里，直接抛开字面意思，我们可以将”box-flex”理解为”房子-分配”。box为“盒子”的意思，我们可以理解为当下价格巨高的“房子”，”flex”指兄弟几个“分配房子”。

举个更实际点的例子：马林大叔省吃俭用一辈子，终于在上海郊外买了间150平米的商品房。后来，马林大叔想回老家养老，决定把房子分配给他的三个儿子。ok，先暂停下，这里提到的“房子”就是”box-flex”中的”box”，“分配”就是”box-flex”中的”flex”，于是，这个“分配房子”的举动就称为”box-flex”，而box-flex属性的值就是说的如何分配，分配比例是什么。oK，继续我们的例子，马林大叔的三个儿子分别叫做大马，中马和小马，其中大马已经结婚多年，有一堆双胞胎女儿，拖家带口的人多；而中马和小马是优秀的光棍人士。所以，大马要求分配更多的房子，最终，家人一番协商有了下面的分配结果，就是：

#大马 { 房子-分配: 2; }
#中马 { 房子-分配: 1; }
#小马 { 房子-分配: 1; }

我想，上面的分配应该很容易看懂的。房子分成了总共4份，其中有家室的大马分得其中的两份，而为国家省橡胶的中马和小马每人分得其中一份，于是用数值换算就是：
大马 = 150 * (2 / (2+1+1)) = 75（平米）;
中马 = 150 * (1 / (2+1+1)) = 37.5（平米）;
小马 = 150 * (1 / (2+1+1)) = 37.5（平米）;

如果装换成CSS表示就是：

#first_boy { box-flex: 2; }
#second_boy { box-flex: 1; }
#three_boy { box-flex: 1; }

哇咔咔，box-flex的含义与作用理解瞬间柳暗花明：用来按比例分配父标签的宽度(或高度)空间。

box-flex的值为至少为1的整数时起作用。但是，仅仅一个box-flex属性是不足以实现子元素间的空间分配，因为还要看其老爸的意思。所谓，我爸是李刚，撞人很嚣张；恨爸不是刚，撞人心慌慌。只有老爸开口说：“这个房子现在你们随意分配。”其子女才能分配。

所以，父元素也是需要添加必要的声明的。此声明就是：

#father { display: box; }

似乎也可以是：

#father { display: inline-box; }

此声明好像是在说：孩子们，现在我把这个房子变成了可随意分配状态，非固定财产，你们可以自己协商分配了。
display: box;的声明其实就是弹性盒子模型的声明，此声明下的子元素的行为与表现与CSS2中的传统盒子模型的表现是有显著的差异的。

毕竟属于CSS3的东西，目前而言，仅Firefox/Chrome/Safari浏览器支持弹性盒子模型（IE9不详，Opera尚未），且使用的时候，需要附带私有前缀。就是诸如-moz-, -webkit-之类。

CSS实例
现在把上面的马林分房子的例子CSS实例化，看看在web页面上是个如何的表现：//zxx:有把小说拍成电影的感觉，技术分享

主要CSS代码如下：

.test_box {
    display: -moz-box; 
    display: -webkit-box; 
    display: box; 
    
    ...
 }
.list {
   ...
}
.list_one {
    -moz-box-flex: 1; 
    -webkit-box-flex: 1; 
    box-flex: 1;
}
.list_two{
    -moz-box-flex: 2; 
    -webkit-box-flex: 2; 
    box-flex: 2;
}

HTML代码如下：

<div class="test_box">
    <div class="list list_two">1</div>
    <div class="list list_one">2</div>
    <div class="list list_one">3</div>
</div>

结果如下缩略图：
技术分享

从上图可以看去，老大大马确实分配到了2份的房子空间，而中马和小马均分到了一份房子空间。

您可以狠狠地点击这里：box-flex弹性布局测试demo

三、CSS box-flex属性（不和谐版）

继续上面马林大叔分房的例子。原本兄弟三人和和睦睦是一点问题都没有的，房子怎么分也基本都定下来了。然而，突然，事情起了波澜。老三小马突然有了个彪悍的女朋友，叫阿凤。小马本人对分配房子的大小是觉得无所谓的，即使两个人住，近40平米的屋子也足够了，何必为了这点事情伤了兄弟们间的和气。然而，小马的女友阿凤却是个吃不了亏的人，说什么也要争口气，于是，找来大马中马，强烈要求要加大他们房子的分配面积。

在大马，中马看来，阿凤还属于外来人，凭什么对他们兄弟的房子指手划脚，于是，没得妥协，于是，争执不断，于是，愈演愈烈，于是，不可开交。于是，有天，阿凤实在憋不住了，在厨房做菜的时候突然拿着菜刀跑出来，大声咆哮：“不管怎样，反正我家小马至少要50平米的房子，其余的怎么分是你们的事情，我不管，这是我的底线了，再低就没得商量！！”大马等被这架势吓住了，最终还是妥协了：小马就50平米（即使以后房子扩建还是50平米），剩下的面积大马，中马2:1比例再分配。于是就有：

#大马 { 房子-分配: 2; }
#中马 { 房子-分配: 1; }
#小马 { 房子-分配: 50m

; }

改编成CSS剧本就是：

#first_boy { box-flex: 2; }
#second_boy { box-flex: 1; }
#three_boy { width: 50px; }

还是不难理解，当子元素中有宽度值的时候，此元素就定宽处理，剩下的空间再按比例分配。
于是，此时，大马的房子大小是：(150 – 50) * (2 / (1 + 2)) = 66.7平米，中马分配房子大小是：(150 – 50) * (1 / (1 + 2)) = 33.3平米。

还是类似上面的demo，看看含有定宽元素的子元素是如何表现的。

新增CSS样式如下：

.list_w300 { width: 300px; }

HTML代码如下：

<div class="test_box">
    <div class="list list_two">1</div>
    <div class="list list_one">2</div>
    <div class="list list_w300">3</div>
</div>

结果如下缩略图：
技术分享

老三分得300像素的宽度，剩下的500像素宽度老大和老二2:1比例分配。

您可以狠狠地点击这里：含定宽元素弹性布局demo

然而，事情还没有结束。兄弟几个相处了一段时间后发现，偌大的屋子如果全部都是私有的话，会有诸多生活上的不便。所以，需要腾出些公共空间，给屋子透个气。咋办呢，老三小马的女友阿凤死活不妥协，没有办法，老马和中马只能牺牲自己的住所面积作为公共空间了。

反应到CSS上，大致就是增加了margin间距，如下HTML：

<div class="test_box">
    <div class="list list_two">1</div>
    <div class="list list_one" style="margin:0 30px;">2</div>
    <div class="list list_w300">3</div>
</div>

结果如下缩略图：
技术分享

老大，老二的空间同时被压榨了，老大还好，原本比例高。只是可怜了二当家的，地方越来越小。不过，老二的隐忍换来了和睦，所做的牺牲没有白费。

四、爸爸其实很厉害，的说~

语言小知识：“厉害”用日语说的话，动漫里面经常用的比较文雅的就是“すごい”，现在年轻人常用的就是“スゲ”，还有一种说法“よくできるね”是一种称赞的说法，语气比较柔和。

弹性盒子模型下的爸爸（父标签）其实是很有货的，男人嘛，就应该这样，够沉稳够内涵。
爸爸肚子中的货有：box-orient, box-direction, box-align, box-pack, box-lines. 现在依次讲讲这里box打头的属性都是干嘛用的。

box-orient
box-orient用来确定子元素的方向。是横着排还是竖着走。可选的值有：

horizontal | vertical | inline-axis | block-axis | inherit

其中，inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的，让子元素横排；而vertical与block-axis的表现也是一致的，让元素纵列。

我专门做了个demo页面，方便您查看各个值的行为与表现。您可以狠狠地点击这里：box-orient值作用测试页面

切换demo页面左边的单选选项卡（如果您的浏览器为Firefox/Chrome/Safari），就可以看到不同的box-orient属性值的行为表现了。//zxx:对比可以发现，Firefox下的display:box会收缩外框（有点display:inline-block的感觉），而Chrome则没有收缩。
技术分享

box-direction
box-direction是用来确定子元素的排列顺序，可选值有：

normal | reverse | inherit

其中normal是默认值，表示按照正常顺序排列。所谓正常顺序，就是我们看书写文字的顺序，从左往右，由上至下，先出现的元素，就上面或是左边。而reverse表示反转，原本从左往右应该是1-2-3的，结果显示确实3-2-1。

例如我们将此属性应用在我们一开始的分配房子的demo上的话，最后的显示就会如下缩略图——顺序反过来的：
技术分享

五、两个遗漏的属性

子元素除了box-flex属性，还有两个属性，box-flex-group和box-ordinal-group，其中box-flex-group的作用不详，貌似目前浏览器也不支持；box-ordinal-group的作用是拉帮结派。还是上面马林大叔分房子的例子。小马女友阿凤又不消停，眼瞅着大马的房子面积比自己大好多，心里不平衡，于是，就去拉拢中马，一起打大马房子的主意。这个“拉拢”就是这里的box-ordinal-group，拉拢的组织团伙是有一个数字级别的，决定了你这个组织的位置。

数值越小，位置就越靠前，这不难理解，第一组在最前嘛，随后第二组，第三组… 例如：box-ordinal-group:1的组就会在box-ordinal-group:2的组前面显示。于是，我们可以利用这个属性改变子元素的顺序。例如下面这个例子：
HTML代码如下：

<div class="test_box">
    <div class="list list_two">1</div>
    <div class="list list_one">2</div>
    <div class="list list_one">3</div>
</div>

六、实际点的应用

如果您现在浏览器地址栏中的地址中含有”www.zhangxinxu.com”字样，并且浏览器为较新的Firefox/Chrome/Safari浏览器，那么您就可以在本页面上找到我做的应用。

咔咔，我就不卖卖关子了，我改变了相关文章某一处的显示顺序，就是随机文章。
技术分享

但是在本文所在的页面上，随机文章第一个显示了（由于赞不支持换行，故垂直显示了）。
技术分享