盒模型的相关计算及flex布局的不常见规律总结

栏目: CSS · 发布时间: 6年前

内容简介:当以下为实例以下为css样式

box-sizing:content-box 时,boxwidth(盒子宽度)=contentwidth(盒子内容宽度)+2*padding+2 *border,

以下为实例

<div class="bc">
    <div class="bc1">
        <div class="bc2"></div>
    </div>
</div>
复制代码

以下为css样式

.bc{
position: relative;
width:400px;
height:200px;
margin: 10px;
}

.bc1{
width:100%;
height:100%;
box-sizing:border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0;
padding:20px;
}

.bc2{
box-sizing: border-box;
width: 50%;
height: 50%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 5px solid #000;
margin: 8px;
padding: 20px;
}
复制代码

下面进行盒模型的相关计算

盒模型的相关计算及flex布局的不常见规律总结

spacewidth(盒子空间宽度)=boxwidth+2*margin

spaceheight(盒子空间高度)=boxheight=2 *margin

bc1:
box-sizing:border-box;margin:0
spaceWidth=boxwidth=400*100%=400,
spaceHeight=boxheight=200*100%=200,padding=20 ==>
contentWidth=400-2*20=360,contentHeight=200-2*20=160

box2:
boxSizing=borderbox
container(contentWidth=360,contentHeight=160),width=50%,height=50% ==> 
boxwidth:180,boxheight:80
padding=20;border=5 ==> 
contentWidth=180-2*20-2*5=130,
contentHeight=80-2*20-2*5=30
margin=8 ==> 
spaceWidth=180+2*8=196,spaceHeight=80+2*8=96
复制代码

实际效果图:

盒模型的相关计算及flex布局的不常见规律总结

当box-sizing:content-box时,

bc1:
box-sizing:border-box;margin:0
spaceWidth=width=400,
spaceHeight=height=200,padding=20 ==> 
contentWidth=400-2*20=360,
contentHeight=200-2*20=160 

bc2
boxsizing=contentbox
container(contentWidth=360,
contentHeight=160),
width=50%,
height=50% ==>
contentWidth:180,contentHeight:80
padding=20;border=5 ==> 
width=180+2*20+2*5=230,height=80+2*20+2*5=130
margin=8 ==> spaceWidth=230+2*8=246,spaceHeight=130+2*8=146
复制代码

实际效果图:

盒模型的相关计算及flex布局的不常见规律总结

由此可见当选择不同的box-sizing模型时,盒子的宽度是不同的

选择content-box时,contentwidth不变,当padding,border变大时,盒子可视宽度变大,撑大,影响整体布局

而选择border-box时,当padding,border变大时,contentwidth会被压缩,盒子可视宽度不变,不影响整体布局

而一般开发情况下,为了不影响整体布局,我们通常选择border-box 为盒模型

2.flex布局不常见规律总结

1.flex-direction 决定扩展方向

当flex-direction属性取值后,其width/height只能在row/column上进行扩展,当其含有多个子元素时,子元素的W/H按比例分配(margin也要计算在内),示例:

<div class="bc">
  
    <div class="bc1">
        <div class="bc2">
            <div class="bc3"></div>
            <div class="bc4"></div>
        </div>
    </div>
</div>
复制代码

css

.bc{
position: relative;
width:400px;
height:200px;
margin: 10px;
}

.bc1{
width:100%;
height:100%;
box-sizing:border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0;
padding:20px;
}

.bc2{
box-sizing: border-box;
width: 50%;
height: 50%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 5px solid #000;
margin: 8px;
padding: 20px;
}

.bc3{
    width:140px;
    height:30px;
}

.bc4{
    width:160px;
    height:90px;
}

复制代码
bc1:
box-sizing:border-box;margin:0
spaceWidth=width=400,
spaceHeight=height=200,padding=20 ==> 
contentWidth=400-2*20=360,
contentHeight=200-2*20=160 

bc2:
boxsizing=border-box
container(contentWidth=360,
contentHeight=160),
width=50%,
height=50% ==>
width=180,height=80
padding=20;border=5 ==>
contentWidth=180-2*20-2*5=130,contentHeight=80-2*20-2*5=30
margin=8 ==> spaceWidth=230+2*8=246,spaceHeight=130+2*8=146

复制代码

计算

beacuse bc2(flex-direction:row) ==> bc2-contentWidth=bc3-Width+bc4-Width
bc3-Width:bc4-Width=7:8 ==>
bc3-width=130*0.46=60.672
bc4-Width=130*0.54=69.328
bc3-height,bc4-height be equal to defined vaule

复制代码
盒模型的相关计算及flex布局的不常见规律总结

当存在margin时,两个子元素宽度会被压缩

.bc4{
    margin-left:50px;
}
复制代码
盒模型的相关计算及flex布局的不常见规律总结

column方向同理

另外还可根据flex值分配W/H,示例如下

.bc3{
   flex:2
   height:30px;
}

.bc4{
   flex:1
   height:90px;
}
复制代码

得到的效果如下:

盒模型的相关计算及flex布局的不常见规律总结

2.子元素决定父元素尺寸,子元素一旦固定,父元素不会变化

当多个元素分配W/H时,有子元素的可根据其子元素的W/H确定其值(具有优先分配W/H的权力)。且子元素一旦固定,其值也不会变化。

实例

html:

<div style="position: relative;width:400px;height:200px;margin: 10px;">
    <div class="bc1">
          <div class="bc2">
            <div class="bc3"></div>
            <div class="bc4"></div>
            <div class="bc5">
                <div class="bc6"></div>
            </div>
        </div>
    </div>
</div>
复制代码

css:

.bc{
position: relative;
width:400px;
height:200px;
margin: 10px;
}

.bc1{
width:100%;
height:100%;
box-sizing:border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0;
padding:20px;
}

.bc2{
box-sizing: border-box;
width: 50%;
height: 50%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 5px solid #000;
margin: 8px;
padding: 20px;
}

.bc3{
    width:140px;
    height:30px;
}

.bc4{
    width:160px;
    height:90px;
}

.bc5{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
}
.bc6{
    width:100px;
    height:100px;
}
复制代码

计算:

bc1,bc2计算方式如上 ==>bc2-width=130
because bc6:width=100,height=100 ==>
bc5 width,height not defined ==>
bc5 width=100,height=100;
bc5: margin-left=10 ==>
bc3-width+bc4-width=bc2-width-100-10=20
bc3-width:bc4-width=7:8 ==>
bc3-width=9.328,bc4-width=10.672

height has defined vaule ==> height not change

复制代码

实图

盒模型的相关计算及flex布局的不常见规律总结

3.当父元素W/h未定义,子元素的最大w/h决定父元素的w/h

实例如下

html:

<div style="position: relative;width:400px;height:200px;margin: 10px;">
    <div class="bc1">
          <div class="bc2">
            <div class="bc3"></div>
            <div class="bc4"></div>
        </div>
    </div>
</div>
复制代码

css

.bc{
position: relative;
width:400px;
height:200px;
margin: 10px;
}

.bc1{
width:100%;
height:100%;
box-sizing:border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0;
padding:20px;
}

.bc2{
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 5px solid #000;
margin: 8px;
padding: 20px;
}

.bc3{
    width:50px;
    height:30px;
}

.bc4{
    width:100px;
    height:90px;
}
复制代码

实图:以为flex-direction=row ==>bc2-width=100+50=150,height未定义,取子元素最大值(90px)

盒模型的相关计算及flex布局的不常见规律总结

当换以下height以后

.bc3{
    width:50px;
    height:100px;
}
.bc4{
    width:100px;
    height:50px;
}
复制代码

以下为新的实图

盒模型的相关计算及flex布局的不常见规律总结

父元素的高度通过子元素变换后,取最大值(100px),宽度仍为子元素之和150px

---------------------我是分割线-------------------------

其实在布局中还有很多规律,希望大家多多细心发现后与大家共享,让大家少走坑!!!以上


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Python基础教程

Python基础教程

[挪] Magnus Lie Hetland / 袁国忠 / 人民邮电出版 / 2018-2-1 / CNY 99.00

本书包括Python程序设计的方方面面:首先从Python的安装开始,随后介绍了Python的基础知识和基本概念,包括列表、元组、字符串、字典以及各种语句;然后循序渐进地介绍了一些相对高级的主题,包括抽象、异常、魔法方法、属性、迭代器;此后探讨了如何将Python与数据库、网络、C语言等工具结合使用,从而发挥出Python的强大功能,同时介绍了Python程序测试、打包、发布等知识;最后,作者结合......一起来看看 《Python基础教程》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具