内容简介:当以下为实例以下为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; } 复制代码
下面进行盒模型的相关计算
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 复制代码
实际效果图:
当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 复制代码
实际效果图:
由此可见当选择不同的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 复制代码
当存在margin时,两个子元素宽度会被压缩
.bc4{ margin-left:50px; } 复制代码
column方向同理
另外还可根据flex值分配W/H,示例如下
.bc3{ flex:2 height:30px; } .bc4{ flex:1 height:90px; } 复制代码
得到的效果如下:
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 复制代码
实图
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)
当换以下height以后
.bc3{ width:50px; height:100px; } .bc4{ width:100px; height:50px; } 复制代码
以下为新的实图
父元素的高度通过子元素变换后,取最大值(100px),宽度仍为子元素之和150px
---------------------我是分割线-------------------------
其实在布局中还有很多规律,希望大家多多细心发现后与大家共享,让大家少走坑!!!以上
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- css经典布局系列三——三列布局(圣杯布局、双飞翼布局)
- 四种方法实现──三栏布局(圣杯布局、双飞翼布局)
- 浅谈CSS三栏布局(包括双飞翼布局和圣杯布局)
- css经典布局——圣杯布局
- CSS布局基础——(三栏布局)
- Grid布局 - 一键布局尝试总结~
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Python基础教程
[挪] Magnus Lie Hetland / 袁国忠 / 人民邮电出版 / 2018-2-1 / CNY 99.00
本书包括Python程序设计的方方面面:首先从Python的安装开始,随后介绍了Python的基础知识和基本概念,包括列表、元组、字符串、字典以及各种语句;然后循序渐进地介绍了一些相对高级的主题,包括抽象、异常、魔法方法、属性、迭代器;此后探讨了如何将Python与数据库、网络、C语言等工具结合使用,从而发挥出Python的强大功能,同时介绍了Python程序测试、打包、发布等知识;最后,作者结合......一起来看看 《Python基础教程》 这本书的介绍吧!