Web前端开发- 网页设计 课件 5.5 CSS3盒模型新特性

单元5

CSS3新特性5.5

CSS3盒模型新特性主要内容C

O

N

T

E

N

T

SPART

01盒模型box-sizing属性PART

02CSS3设置弹性盒子盒模型box-sizing属性content-box（标准盒模型）：默认值，width/height属性仅表示元素内容区（content）的宽/高，元素实际占用宽高=content+padding+border。。border-box：width/height的值即为元素实际占用总宽高，border和padding的值包含在width/height内，元素内容区（content）的宽高是width/height减去(border+padding)的值。盒模型有标准（W3C）盒模型和IE盒模型两种，所有接受width和height属性的元素均可通过box-sizing属性设置浏览器采用哪种盒模型。box-sizing：content-box

|

border-box【案例5.5.1】盒模型box-sizing属性示例一般情况下，使用border-box定义的盒子，不会随着border和padding的设置而改变实际占用大小，有利于页面布局的稳定。CSS3设置弹性盒子注意：设置为弹性盒布局以后，其中子元素的float、clear和vertical-align等属性都将失效!CSS3引入了弹性盒子FlexibleBox，也称弹性盒布局（Flexbox布局），目的是提供一种更加高效便捷的方式来对一个盒子中的各个子元素进行排列、对齐和分配空白空间等。display

：flex

|

inline-flex弹性盒子由弹性容器(Flex

container)和弹性子元素(Flex

item)组成，弹性容器内包含一个或多个弹性子元素。弹性容器通过设置其display

属性为flex或inline-flex将其定义为弹性容器。CSS3设置弹性盒子弹性容器常用属性设置属性描述指定弹性容器中子元素排列方式（

row

（默认）|

row-reverse

|

column

|

column-reverse）设置弹性盒子的子元素超出父容器时是否换行（nowrap（默认）|

wrap

|

wrap-reverse）flex-directionflex-wrapflex-flowflex-direction和flex-wrap的简写，默认值为row

nowrap。justify-content设置弹性盒子元素在主轴上的对齐方式（

flex-start（默认值）|flex-end

|center|

space-between|

space-around）align-items设置弹性盒子元素在侧轴方向上的对齐方式（stretch（默认值）|

center|

flex-start|flex-end|

baseline）align-content当flex-wrap属性为wrap,且在侧轴方向有多行时，设置各行间在在侧轴方向上的对齐方式（

flex-start（默认值）|flex-end

|center|

space-between|

space-around）CSS3设置弹性盒子弹性子元素常用属性设置属性

描述orderflex-growflex-shrinkflex-basis设置弹性子元素排列顺序。默认为0，可以为负值。空间有剩余时，设置弹性子元素相对于其他弹性子元素的扩展比例。默认为0。空间不足时，设置弹性子元素的收缩比率据flex-shrink的值。默认为1。设置弹性子元素伸缩基准值。像素或者一个百分比是flex-grow、flex-shrink和flex-bas