css3盒模型和弹性布局的相关属性

Posted 2020-06-23

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。看了有些晕啊，看一下以下几个属性应该就懂了:1.content-box:宽度和高度分别应用到元素的内容框,在宽度和高度之外绘制元素的内边距和边框。例如：

div{box-sizing:border-box;

-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}
在固定宽度的情况下如果给元素一个边框宽度，他会应用的元素的外面，也就是说或挤压其他的元素；
2、border-box

固定宽度的情况下为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行调整，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

ps：https://www.zhihu.com/question/20691294   知乎上相关的回答

面阿里的时候提到的了弹性盒的概念，因为之前及不太清楚了这里在继续整理一下，弹性方框布局第一点：1、首先要考虑的是兼容性，此布局方式兼容性是比较差的，因此需要考虑不同的浏览器，这里给出了兼容性的版本情况:http://www.tuicool.com/articles/Afq6Bzq
2.自适应，这里自适应的情况是这样，示例如下；

#d1{
display: -webkit-box;
display: -moz-box;
display: -ms-box;
-webkit-flex-wrap: nowrap ;
width:500px;
border:1px solid red;
}
#i1,#i2,#i3{
width:200px;
height:200px;
border:1px solid black;
}

这个时候子div超过父div，直到父div的宽度超过了600，才会继续按照正常思维来，但是在火狐中情况却不一样，父元素会被强行撑到600+的宽度。

3、display：box和inline-box的区别，在我看来，box仍然是block，但是inline-box却是行内块级流了。

4、display：box/inline-box的伴生属性box-flex是用在容器子标签上的，因代表的是容器子标签在父元素中的比例，所以这时候可以不用设置子标签的宽度。

5、box-align，是设置弹性方框的在父元素中的位置.（以上即常用的几个属性）

ps：https://www.zhihu.com/question/22991944

flex、和box是有区别的，当子元素的宽度超过父元素的宽度的时候，flex标准比box要新一点，还有flexbox好像才是最新的，慕课网上有一节相关视频大家可以翻看一下。