详细解释了在CSS中使用box模型框属性
本文主要介绍了盒模型盒在CSS中的使用,包括弹性盒模型的参数,需要的朋友可以参考一下。
每个元素(包括内联元素)显示在页面上可以被看作是一个盒子,盒子模型(盒模型)。看看Chrome DevTools截图:
很明显,盒子模型由4部分组成,从内到外是:
内容>边距>边框>边距
作为一个合理的原因,一个元素的宽度(类比的高度)应该用这种方法来计算:
总宽度=边距左+左边框+左填充+宽度+填充右+边框右+边距右边
但是不同的浏览器(你没有猜测,也就是不同的浏览器)在宽度的解释上是不同的。浏览器符合W3C标准,一个元素的宽度仅仅是它内容的宽度,剩下的将是额外的:
CSS代码将内容复制到剪贴板。
{。例
宽度:200px;
填料:10px;
边境:5px固体# 000;
保证金:20px;
}
那么他的最终宽度应该是:
宽度=宽度(200px)+填料(10px×2)+缘(5px×2)+缘(20px * 2)= 270px;
在IE(小于IE9),最终的宽度:
宽度=宽度(200px)+缘(20px * 2)= 240px;
我个人认为即是更多的人的思维,毕竟,填充被称为内边缘和边界的一个额外的宽度不能said.w3c最后,为了解决这个问题,加上框胶CSS3属性。当我们机顶盒选型:边界框;边框和填充都包含在宽高为标准之前,即同样的,为了避免你在不同的浏览器相同的CSS,最好加:
CSS代码将内容复制到剪贴板。
*,*:以前,*:{后
-moz盒尺寸:边界盒;
Webkit盒尺寸:边界盒;
盒尺寸:边框框;
}
这里有两个特殊情况:
没有宽度mdash;mdash;绝对定位(位置:绝对;)元
没有宽度mdash;mdash;浮动(float)元素
他们不占据页面上的空间。他们喜欢在页面的顶部浮动。它们不影响其他元素的位置。
CSS3弹性盒模型
属的相关值:
盒子东方决定子元素的方向。
Box Flex与父标签的宽度或高度成比例,其值至少为1。当子元素的宽度值为该元素为固定宽度时,剩余空间比例分布。
盒子是用来确定方向的子元素的顺序
框对齐决定垂直方向的使用,即垂直方向的对齐。
框包决定父标签级别空间的使用。
Grammar:
盒对齐:开始|端|中心|基线|伸展;
箱方向:正常|反|继承;
Box Flex:值;
框flex组:整数;
箱线:单|多;
框序号组:整数;
箱东方:横向(水平)|垂直(垂直)|内联轴|块轴|继承
包:开始|端|中心|对齐(两端对齐);
盒尺寸:内容框|边界盒|继承:
盒子的影子:插图h-shadow v-shadow模糊扩散的颜色;
实例uff1a
在一个灵活的盒子模型容器中使用平均配子元素是很容易的:
CSS代码将内容复制到剪贴板。
{容器。
显示:框;
框对齐:拉伸;
盒子垂直:垂直;
}
容器跨度{框弯曲:1;}
示例:CSS 3灵活的盒子模型
小心 uff1a
外层必须有一个宽度。内层必须BFC。
tag:模型属性解释详细电脑软件
相关内容