网站界面设计案例教程,库尔勒市第六小学地址,计算机网站php设计代做,设计行业网站建设题目
假设高度已知#xff0c;请写出三栏布局#xff0c;其中左、右栏宽度各为300px#xff0c;中间自适应。
五种解决方式代码
浮动解决方式 绝对定位解决方式 flexbox解决方式 表格布局 网格布局
源代码
!DOCTYPE html
html langen
…题目
假设高度已知请写出三栏布局其中左、右栏宽度各为300px中间自适应。
五种解决方式代码
浮动解决方式 绝对定位解决方式 flexbox解决方式 表格布局 网格布局
源代码
!DOCTYPE html
html langen
head
meta charsetUTF-8
titleLayout/title
style
html *{padding: 0;margin: 0;
}
.layout{margin-top: 20px;
}
.layout article div{min-height: 100px;
}
/style
/headbody
section classlayoutarticle classleft-right-centerdiv classleft/divdiv classright/divdiv classcenter/div/article
/section!-- 浮动解决方式 --
!-- 就浮动模式HTML的写法是左右中其他的都可以是左中右 --
style
.layout .left{float: left;width: 300px;background: red;
}
.layout .right{float: right;width: 300px;background: blue;
}
.layout .center{background: yellow;
}
/style!-- 绝对定位解决方式 --
style
.layout .left-center-rightdiv{position: absolute;
}
.layout .left{left: 0;width: 300px;background: red;
}
.layout .center{left: 300px;right: 300px;background: yellow;
}
.layout .right{right: 0;width: 300px;background: blue;
}
/style!-- flexbox解决方式 --
style
.layout .left-center-right{display: flex;
}
.layout .left{width: 300px;background: red;
}
.layout .center{flex: 1;background: yellow;
}
.layout .right{width: 300px;background: blue;
}
/style!-- 表格布局 --
style
.layout .left-center-right{width: 100%;display: table;height: 100px;
}
.layout .left-center-rightdiv{display: table-cell;
}
.layout .left{width: 300px;background: red;
}
.layout .center{background: yellow;
}
.layout .right{width: 300px;background: blue;
}
/style!-- 网格布局 --
style
.layout .left-center-right{display: grid;width: 100%;grid-template-rows: 100px;grid-template-columns: 300px auto 300px;
}
.layout .left{background: red;
}
.layout .center{background: yellow;
}
.layout .right{background: blue;
}
/style
/body展示效果 知识拓展
上述5中解决方式是比较常⻅的但是我们 不能只局限于为了问答而问答我们应该从此基础上升华一下问题。 答完了这5种常⻅方式并不代表我们⻚面布局这一话题就结束了面试官可能还会延伸我们的问题比如 这5种布局方式各自有什么优点和缺点 如果 高度已知 条件去掉考虑纵向那么对于中间内容过多导致中间格子撑开此时需要左右跟着撑开以上5种方式哪几种还能使用 这5中方式的兼容性如何如果让你选择一种最优的去应用于业务你会选择哪种方式 那么接下来就来围绕这三个问题来讲解
1、各自的优缺点
① 对于浮动 优点 兼容性比较好把清除浮动和其它浮动周边元素的关系处理好的话那么它的兼容性是挺不错的。 缺点 设置浮动之后脱离了文档流处理不好的话会带来很多问题这是它本身的局限性。 ② 对于绝对定位 优点 快捷不容易出问题 缺点 本身脱离了文档流就会导致子元素跟着脱离文档流。因此导致绝对定位的 有效性 、 可使用性 比较差。 ③ 对于flexbox css3中推出的flex布局就是为了解决上述两种方式不足而出现的算是比较完美的一种方式尤其是对于移动端。 ④ 对于表格布局 优点 尽管多数人吐槽表格布局但其实表格布局在很多场景都适用的。比如上文写的三栏布局设计当中表格布局是不是很轻松就实现了呢 同时表格布局的兼容性是非常好的当用 flex 解决不了问题的时候对于PC端 IE8 是不支持 flex 的此时就可以尝试表格布局。 缺点 除开历史上一些诟病外还有一个 比如我们把三栏理解成为三个小单元格那么当其中某一个单元格高度超出的时候其余两侧也会跟着调整于是对于有些场景是不合适的。因此对于不同场景我们可以在 flex 和 表格 布局进行选优操作 ⑤ 对于网格布局 这一块的话算是新热点也是经历了一段时间的演变从上文代码来看的话通过网格布局我们能让代码更加简单、方便实现逻辑。在面试的时候提到也可以说明你比较关注新的事物主动学习能力不错。 当然以上表述有部分个人思考也有现常说的优缺点大家可以根据研究布局方式进行深入思考学习更多的使用场景以及优缺点其次欢迎提出新的解决方案及相关知识点后续进行补充。
