html5善于盒模型定位,面试题CSS盒子模型，左右固定宽度，中间自适应的五种死法...

面试题目 假设高度已知，请写出三栏布局，左右300px，中间自适应

有几种方法呢？

最容易的应该想到利用float来写，代码如下

css样式代码，以下五种都是用一个样式代码

float

float浮动划分左中右

css代码

.main {

height: 100px;

}

.left {

float: left;

width: 300px;

background-color: green;

}

.right {

float: right;

width: 300px;

background-color: gray;

}

.center {

background-color: gold;

}

总结 优缺点，要理解优缺点，首先要明白什么是浮动

浮动布局的原理：对元素设置float:left或者right，使元素脱离文档流，同时显示为类似display:inline-block的形式(可以定义宽高，但是又不会换行)。

优点 相比之前table布局更具有灵活性

缺点 脱离文档流，下面的元素都受影响。并且要使用clear:both 清除浮动 父类添加clearfix类。

.clearfix:after{content:"";height:0;display:block;clear:both}

.clearfix{*display:inline-block}

.clearfix{*display:block;}

2 . position 定位方法实现

代码格式如下

.position-left {

width: 300px;

background-color: green;

position: absolute;

left: 0;

}

.position-right {

width: 300px;

background-color: gray;

position: absolute;

right: 0;

}

.position-center {

background-color: gold;

position: absolute;

left: 300px;

right: 300px;

}

position 定位优缺点

优点: 每个元素的显示位置相对独立，方便每个元素的控制,使用定位属性，结合边偏移属性，可以将元素放置在任何需要的位置，这样做的好处在于，无需考虑元素本身的显示方式和页面代码中所处的位置，直接将元素分离出来进行定位。

缺点:每个元素独立控制，很难预测元素之间的相互影响，同时也可能发生元素重叠的情况，导致部分内容无法正常显示.

3.flex布局实现方法代码如下

.flex {

margin-top: 160px;

display: flex;

}

.flex-left {

width: 300px;

background-color: green;

}

.flex-right {

width: 300px;

background-color: gray;

}

.flex-center {

flex: 1;

background-color: gold;

}

样式有稍微的改动代码如下

flex

flex浮动划分左中右

flex 布局的优缺点

优点：Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 现在是主流响应式布局开发的主力，任何一个容器都可以指定为 Flex 布局。

缺点：不支持IE8及以下的浏览器

4、表格布局代码如下

.table {

width: 100%;

display: table;

margin-top: 30px;

}

.table-left {

display: table-cell;

width: 300px;

background-color: green;

}

.table-right {

display: table-cell;

width: 300px;

background-color: gray;

}

.table-center {

display: table-cell;

background-color: gold;

}

优点 表格布局的兼容性很好，在flex布局不兼容的时候，可以尝试表格布局

缺点 一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高，有时候这种效果不是我们想要的

5、网格布局

代码如下

.gird {

display: grid;

grid-template-rows: 100px;

grid-template-columns: 300px auto 300px;

margin-top: 30px;

}

.gird-left {

background-color: green;

}

.gird-right {

background-color: gray;

}

.gird-center {

background-color: gold;

}

优点

1 能大大的提高网页的规范性和可重用性。在栅格系统下，将页面模块的尺寸标准化，这对于大型网站的开发和维护来说，能节约不少成本；

2  基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验；

3  对于设计师们来说，灵活的运用栅格系统，能做出很多优秀和独特的设计。

缺点 css新技术浏览器还没有全面支持。

延伸问题

高度已知换为高度未知呢？

块内内容超出会是怎样的效果？

如果是上下高度已知，中间自适应呢？

如果是两栏布局呢？

如果是上下左右混合布局呢？

顺便打个广告 自学的前端快3个月了想找一份工作，地点北京。