CSS3盒子与DIV布局

2022年6月11日12:36:24

CSS3中提出了盒子模型和新增盒子模型来完成对元素的直接定位,即能够为页面元素定义边框,并修饰内容距离,。从而优化文本内容的显示效果。

div层

div与span区别

在包含方面div和span标记的作用相同。div和span标记二者的区别是,div是一个块级元素,其包含的元素会自动换行。span标记是一个行内标记,其前后都不会发生换行。div标记可以包含span标记元素,但是span标记一般不包含div标记。

盒子模型

盒子模型

所以的页面元素都包含在一个矩形框内,称为盒子。盒子描述了元素及其属性在页面布局中所占的空间大小,因此盒子是可以影响其他元素的位置及大小。盒子模型包含如下四部分:

  1. content(内容):是盒子模型中必需的一部分,内容可以是文字,图片等元素。
  2. padding(空白):也称内边距或补白,用来设置内容和边框直接的距离。
  3. border(边框):可以设置内容边框线的粗细,颜色和样式等。
  4. margin(边界):外边界,用来设置内容与内容之间的距离。

border边框

border边框是内边框和外边框的分界线,可以分离不同的HTML元素,border的外围是元素的最外围。

padding内边距

padding属性定义内容与边框之间的距离,即内边距的距离。
语法格式如下:

padding:length

margin外边距

margin边界用来设置页面元素和元素之间的距离,即定义元素周围的空间范围。语法格式如下:

margin:auto|length

CSS3新增弹性盒模型

新增属性如下表:

属性 说明
box-orient 定义盒子分布的坐标轴
box-align 定义子元素在盒子内垂直方向上的空间分配方式
box-direction 定义盒子的显示顺序
box-flex 定义子元素在盒子内的自适应尺寸
box-flex-group 定义自适应子元素群组
box-lines 定义子元素分布显示
box-ordinal-group 定义子元素在盒子内的显示位置
box-pack 定义子元素在盒子内的水平方向上的空间分配方式

盒子布局取向box-orient

该属性用于定义盒子元素内部的流动布局方向。
语法格式如下:

box-orient:horizontal|vertical|inline-axis|block-axis|inherit

参数含义如下表:

属性值 说明
horizontal 盒子元素从左到右在一条水平线上显示他的子元素
vertical 盒子元素从上到下在一条垂直线上显示他的子元素
inline-axis 盒子元素沿着内联轴显示他的子元素
block-axis 盒子元素沿着块轴显示他的子元素

盒子布局顺序box-direction

该属性是用来确定子元素的排列顺序,也可以说是内部元素的流动顺序。语法格式如下:

box-direction:normal|reverse|inherit

参数值说明如下表:

属性值 说明
normal 正常显示顺序,如果盒子元素的box-orient属性值为horizontal,则包含的子元素按照从左到右的顺序显示,即每个子元素的左边总是靠近前一个子元素的右边,如果盒子元素的box-orient属性值为vertical,则其包含的子元素按照从上到下的顺序显示
reverse 反向显示,盒子所包含的子元素的显示顺序将与normal相反
inherit 继承上级的显示顺序

盒子布局位置box-ordinal-group

该属性设置盒子中每个子元素在盒子中的具体位置。语法格式如下:

box-ordinal-group:<integer>

盒子弹性空间box-flex

该属性能够灵活的控制子元素在盒子中的显示空间,显示空间包括子元素的宽度和高度,而不是子元素所在栏目的宽度,也可以说是子元素在盒子中所占的面积。语法格式如下:

box-flex:<number>

管理盒子空间box-pack和box-align

box-pack属性可以用来设置子容器在水平轴上的空间分配方式,语法格式如下:

box-pack:start|end|center|justify

参数说明如下表:

属性值 说明
start 所有子容器都分布在父容器的左侧,右侧留空
end 所有子容器都分布在父容器的右侧,左侧留空
justify 所有子容器平均分配(默认值)
center 平均分配父容器剩余的空间(能压缩子容器的大小,并且有全局居中的效果)

box-align属性用于管理子容器在竖轴上的空间分配方式,语法格式如下:

box-align:start|end|center|baseline|stretch

属性值说明如下表:

属性值 说明
start 子容器从父容器顶部开始排列,富裕空间显示在盒子底部
end 子容器从父容器底部开始排列,富裕空间显示在盒子顶部
center 子容器横向局中,富裕空间在子容器的两侧分配,上面一半,下面一半
baseline 所有盒子沿着他们的基线排列,富余的空间可前可后显示
sretch 每个子元素的高度被调整到适合的盒子高度显示,即所有的子容器和父容器保持同一高度

空间溢出管理box-lines

该属性用来避免空间溢出的问题。
语法格式如下:

box-lines:single|multiple

single表示子元素都单行或单列显示;multiple表示子元素可以多行货=或多列显示。

  • 作者:((٩(//̀/́/)۶))
  • 原文链接:https://blog.csdn.net/qq_45400916/article/details/113619474
    更新时间:2022年6月11日12:36:24 ,共 2151 字。