5.5 CSS3盒模型新特性-高二《Web前端开发-网页设计》同步精品课堂（电工版2023）

单元5 CSS3新特性 5.5 CSS3盒模型新特性 主要内容 CONTENTS PART 01 盒模型box-sizing属性 PART 02 CSS3设置弹性盒子 2 盒模型box-sizing属性 盒模型有标准（W3C）盒模型和IE盒模型两种，所有接受width和height属性的元素均可通过box-sizing属性设置浏览器采用哪种盒模型。 content-box（标准盒模型）：默认值，width/height属性仅表示元素内容区（content）的宽/高，元素实际占用宽高= content+ padding+border。。 border-box：width/height的值即为元素实际占用总宽高，border和padding的值包含在width/height内，元素内容区（content）的宽高是width/height减去(border + padding)的值。 box-sizing：content-box | border-box 【案例5.5.1】盒模型box-sizing属性示例 一般情况下，使用border-box定义的盒子，不会随着border和padding的设置而改变实际占用大小，有利于页面布局的稳定。 CSS3设置弹性盒子 CSS3引入了弹性盒子Flexible Box，也称弹性盒布局（Flexbox布局），目的是提供一种更加高效便捷的方式来对一个盒子中的各个子元素进行排列、对齐和分配空白空间等。 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成，弹性容器内包含一个或多个弹性子元素。 弹性容器通过设置其 display 属性为 flex 或 inline-flex将其定义为弹性容器。 注意：设置为弹性盒布局以后，其中子元素的float、clear和vertical-align等属性都将失效! display ：flex | inline-flex CSS3设置弹性盒子 弹性容器常用属性设置 属性 描述 flex-direction 指定弹性容器中子元素排列方式（ row （默认）| row-reverse | column | column-reverse） flex-wrap 设置弹性盒子的子元素超出父容器时是否换行（nowrap（默认）| wrap | wrap-reverse） flex-flow flex-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设置弹性盒子 弹性子元素常用属性设置 属性 描述 order 设置弹性子元素排列顺序。默认为0，可以为负值。 flex-grow 空间有剩余时，设置弹性子元素相对于其他弹性子元素的扩展比例。默认为0。 flex-shrink 空间不足时，设置弹性子元素的收缩比率据 flex-shrink 的值。默认为1。 flex-basis 设置弹性子元素伸缩基准值。像素或者一个百分比 flex 是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性 flex: flex-grow flex-shrink flex-basis 【案例5.5.2】CSS3设置弹性盒子 感谢观看 $