5.盒模型
2020-05-23 16:02:06来源：博客园 阅读 ()
5.盒模型
# 5.盒模型- box-sizing:content-box | border-box; 默认content-box 一个盒模型的功能强弱，直接决定了布局是否简洁，决定了编程的复杂度。
正常盒子： boxWidth = width + border*2 + padding*2;
IE6混杂模式的盒子整体宽度 boxWidth = width; contentWidth = width - border*2 - padding*2;
- overflow:visiable | hidden | auto | scroll;
- resize: none | both | horizontal | vertical; 要配合overflow使用
- flex display:flex | inline-flex; flex:将对象作为弹性伸缩和显示 inline-flex:将对象作为内联块级弹性伸缩盒显示。
```html /* * align-content:center;//多行文本居中 */
/* * justify-content:center; * align-items:center;//单行文本居中 */ <style> .wrapper{ width:300px; height:300px; border:1px solid black; display:flex; /*flex-direction:row | row-reverse | column | column-reverse;主轴方向*/ /*flex-wrapper:wrap | nowrap | wrap-reverse;换行 */ /*justify-content:flex-start | flex-end | center | space-between | space-around;基于主轴的对齐方式 */
/*align-items:flex-start | flex-end | center | baseline | stretch;基于交叉轴的对齐方式,主要还是针对单行元素来处理对齐方式*/
/*align-content:flex-start | flex-end | center | space-between | space-around;基于交叉轴的对齐方式,主要还是针对多行元素来处理对齐方式*/ }
.content{ width:150px; height:150px; border:1px solid green; box-sizing:border-box;
/*order:0;默认值为0;数值大的在前面 */ /*align-self:auto | flexstart | flex-end | center | baseline | stretch;子项基于交叉轴的对齐方式 */
/*flex-grow:1;基于比例瓜分剩余空间,伸展性,0则不参与瓜分*/ /*flex-shrink: */ /*flex-basis:auto | 100px;用来覆盖子项的width */ } </style> <div class="wrapper"> <div class="content"></div> <div class="content"></div> <div class="content"></div> </div> ```
```html
<style> /* flex-shrink的计算 */ .wrapper{ width:600px; height:300px; border:1px solid black; display:flex; }
.content{ width:100px; height:100px; flex-shrink:1; }
.content:nth-of-type(2){ width:200px; flex-shrink:1; } .content:nth-of-type(3){ width:400px; flex-shrink:3; } /* 总长度：各自子元素内容盒的width * 各自子元素的flex-shrink值 的总和： (100 * 1) + (200 * 1) + (400 * 3) = 1500; 计算第三个content压缩后的长度： 要压缩的总长度 = 子元素内容盒的总长度 - 父亲的内容盒长度 100 + 200 + 400 - 600 = 100;
子元素压缩的长度 = (子元素的width * 子元素的flex-shrink) / 上面的总长度 * 要压缩的总长度 (400 * 3)/1500 * 100 = 80
最终子元素内容盒的width = 子元素内容盒的宽度 - 子元素要压缩的长度 400 - 80 = 320; */ </style> <div class="wrapper"> <div class="content"></div> <div class="content"></div> <div class="content"></div> </div>
/* flex-basis 只写了flex-basis或者flex-basis大于width，代表元素的最小宽度。 当不换行内容超过内容区时，容器会被撑开
设置的width和flex-basis且flex-basis小于width时，代表元素的最小宽度是flex-basis，最大宽度是width。 当不换行内容超过内容区时，容器会被撑开但是容器宽度不会超过width。
无论什么情况，被不换行内容撑开的容器，不会被压缩
word-break:break-word;//元素中内容可以换行 弹性盒一般都要换行，才能进行正常的压缩。 */ ```
```html <style> /* 弹性盒的应用 */ /* 1.单行居中 */ .wrapper{ width:300px; height:300px; display:flex; border:1px solid black; } .content{ width:100px; height:100px; border:1px solid black; justify-content:center; align-items:center; } </style> <div> <div class="content"></div> </div>
<style> /* 2.多行居中 */ .wrapper{ width:300px; height:300px; display:flex; border:1px solid black; } .content{ width:100px; height:100px; border:1px solid black; justify-content:center; align-content:center; } </style> <div> <div class="content"></div> <div class="content"></div> <div class="content"></div> </div>
<style> /* 3.可动态增加的导航栏 */ .wrapper{ width:300px; height:200px; display:flex; border:1px solid black; } .item{ height:30px; flex:1 1 auto; } </style> <div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
<style> /* 4.等分布局 */ .wrapper{ width:400px; height:200px; display:flex; border:1px solid black; } .content{ border:1px solid black; box-sizing:border-box; height:100px; flex:1 1 auto; } </style> <div> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> </div>
<style> /* 4.中间固定，两边自适应 */ .wrapper{ width:400px; height:200px; display:flex; border:1px solid black; } .content{ border:1px solid black; box-sizing:border-box; height:100px; flex:1 1 auto; } .content:nth-of-type(2){ flex:0 0 200px; } </style> <div> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> </div>
<style> /* 5.多行换行，一次排列 */ .wrapper{ width:400px; height:800px; border:1px solid black; display:flex; flex-wrap:wrap; align-content:flex-start; } .content{ border:1px solid black; box-sizing:border-box; height:100px; flex:1 1 auto; } .content:nth-of-type(2){ flex:0 0 200px; } </style> <div> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> <div class="content">4</div> <div class="content">5</div> <div class="content">6</div> <div class="content">7</div> <div class="content">8</div> <div class="content">9</div> <div class="content">10</div> <div class="content">11</div> <div class="content">12</div> </div>
<style> /* 6.圣杯布局 */ .wrapper{ width:300px; height:300px; border:1px solid black; display:flex; flex-direction:column;/*垂直布局*/ } .header, .footer{ border:1px solid black; box-sizing:border-box; flex:0 0 20%; } .contain{ flex:1 1 auto; display: flex; } .left, .right{ flex:0 0 20%; } .center{ flex: 1 1 auto; } </style> <div> <div class="header"></div> <div class="contain"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> <div class="footer"></div> </div> ``` 以上是markdown格式的笔记
原文链接:https://www.cnblogs.com/lanshanxiao/p/12941730.html
如有疑问请与原作者联系
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：阻止表单的默认提交事件
下一篇：6.动画
相关文章
- css：盒子模型边框（边框、内外边距） 2020-06-03
- 弹性盒模型 2020-04-02
- CSS核心概念之盒子模型 2020-03-17
- 高度塌陷，清除浮动---CSS必备的盒子模型知识！ 2020-03-07
- 边框详讲---CSS必备的盒子模型知识！ 2020-03-07
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
热门词条
最新资讯
热门关注
热门标签