盒子模型

最新推荐文章于 2024-08-03 09:43:52 发布

lanjiao34

最新推荐文章于 2024-08-03 09:43:52 发布

阅读量85

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/lanjiao34/article/details/115095408

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

W3C标准盒模型：前者width = content，
一种IE盒模型（IE6以下）：后者width = content + padding + border

若要将IE盒模型转换为标准盒模型，需要在文档顶部加上<!DOCTYPE html>声明；很有意思的是，后来CSS3中也增加了box-sizing属性，
1. box-sizing: content-box即标准盒模型，
2. box-sizing: border-box即IE盒模型（width包含内边距和边框），
W3C反过来又承认了微软，也是有意思。

** 弹性盒模型（flexbox）是什么呢？
就 W3C 官方给到的解释是，这是设计来实现更复杂的版面布局。其本质上就是Box-model的延伸，Box-model定义了一个元素的盒模型，而 Flexbox 更进一步的去规范了这些盒模型之间彼此的相对关系。

** CSS3的flexbox（弹性盒布局模型）,以及适用场景？
该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

Flexible boxes盒子按照宽高分出了以下 8 点：
水平的主轴：main axis；垂直的纵轴：cross axis；
纵轴的开始位置和边框的交点：cross start；
纵轴的结束位置和边框的交点：cross end；
主轴的开始位置和边框的交点：main strat；
主轴的结束位置和边框的交点：main end；
单个项目占据主轴的空间距离：main axis；
单个项目占据纵轴的空间距离：cross axis

弹性盒模型语法基础概念
任何一个容器都可以指定为Flex布局：
块：display；行内：inline-flex（依然要加上浏览器前缀）
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

容器属性设置
flex-direction：主轴的方向（即项目的排列方向）
flex-wrap：如果一条轴线排不下，如何换行
flex-flow：flex-direction属性和flex-wrap属性的简写
justify-content：定义了项目在主轴上的对齐方式
align-items：定义项目在交叉轴上如何对齐
align-content：多根轴线的对齐方式，一根轴该属性无效

flex-direction：主轴的方向（即项目的排列方向）
row | row-reverse | column | column-reverse;
row（默认值）    主轴为水平方向，起点在左端。
row-reverse    主轴为水平方向，起点在右端。
column    主轴为垂直方向，起点在上沿。
column-reverse    主轴为垂直方向，起点在下沿。

flex-wrap：如果一条轴线排不下，如何换行
nowrap | wrap | wrap-reverse;
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。