css拉伸布局（css伸缩布局）

html的四种局部布局？

第一种实现方式：浮动布局

将左右的div宽度设为300px,分别左右浮动，中间盒子不设宽度。注意：先写右边盒子，再写中间盒子，否则先渲染中间盒子，中间盒子会占满该行剩下的宽度，右边盒子只能换行显示，就会出现下面的情况。

第二种：绝对定位（position:absolute）

设置父盒子position:relative（相对定位），三个子盒子position：absolute,左盒子left:0,右盒子right:0;中间盒子left:300px;right:300px。

第三种：flex布局

父盒子 display:flex，左右盒子设置宽度：300px，中间盒子flex:1(flex-grow:1 flex-shrink:1 flex-basis:0%)不考虑元素尺寸自由伸缩。

第三种：flex布局

父盒子 display:flex，左右盒子设置宽度：300px，中间盒子flex:1(flex-grow:1 flex-shrink:1 flex-basis:0%)不考虑元素尺寸自由伸缩。

拉伸边框是什么意思？

边框是基于DIV+CSS的HTML脚本语言的一种围绕元素内容和内边距的一条或多条线的元素。

可伸缩框属性（Flexible Box）是css3新添加的盒子模型属性，有人称之为弹性盒模型，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分等分布方式以及如何处理可用的空间。使该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。但是它有一定的局限性，在firefox、chrome这浏览器下需要使用它们的私有属性来定义：firefox(-moz)、chrome（-webkit）。

拉伸边框是一种可以调整边框大小的功能。在图形设计或页面布局中，边框是围绕元素（如文本框、图片框等）的一个可见框架，用来突出显示元素的边界。

拉伸边框即是指通过调整边框的大小来改变元素的外观或尺寸。例如，你可以通过拉伸边框来调整图像框的大小，使其适应不同尺寸的图片；或者通过拉伸边框来改变按钮的大小，以适应不同长度的文本。

拉伸边框通常是通过鼠标拖拽边框线条来实现的。