页面布局

前端面试题 前端之家
前端之家收集整理的这篇文章主要介绍了页面布局，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

<h1 id="页面布局">1、页面布局
<h3 id="题目假设高度已知请写出三栏布局其中左栏右栏宽度为300px中间自适应">题目：假设高度已知，请写出三栏布局，其中左栏右栏宽度为300px,中间自适应？
<h3 id="浮动">1、浮动

  • 浮动布局
  • 优点:兼容性比较好
  • 缺点：浮动后，元素是脱离文档流的，需要处理清除浮动clear:both;处理好与周边元素关系

  • div是left-right-center

  • 效果图

css

* {
        margin: 0;
        padding: 0;
    }
    .layout .content div{
        min-height: 100px;
    }
    .layout .content .left{
        float: left;
        width: 300px;
        background: pink;

}
.layout .content .right{
    float: right;
    width: 300px;
    background: yellow;
}
 .layout .content .center {
    background: red;
 }</code></pre>


html


内容
内容
内容

  • 绝对定位布局
  • 优点：布局相对迅速

  • 缺点： 定位的元素脱离了文档流，意味着子元素也要脱离文档流，所以这种方式的可使用性比较差

  • 效果图

css

.layout-absolute .absolute-content {
    position: relative;
 }
 .layout-absolute .absolute-content div {
    min-height: 100px;
 }
 .layout-absolute .absolute-content .left {
    position: absolute;
    left: 0;
    width: 300px;
    background: pink;
 }
 .layout-absolute .absolute-content .right {
    position: absolute;
    right: 0;
    width: 300px;
    background: yellow;
 }
 .layout-absolute .absolute-content .center {
    position:absolute;
    left: 300px;
    right: 300px;
    background: red;
 }

html

内容

内容
内容

  • flex
  • 优点： 非常有效的解决了浮动和绝对定位的问题

  • 缺点：兼容性比较差（css3的属性），不兼容IE8及以下

  • 效果图

css

.flexBox-content {
    display: flex;
    width: 100%;

}

.flexBox-content div {

min-height: 100px;

}

.flexBox-content .left {

width: 300px;

background: pink;

}

.flexBox-content .right {

width: 300px;

background: yellow;

}

.flexBox-content .center {

flex: 1;

background: red;

}

html

Box">
    
Box-content">
        
内容

        
内容

        
内容

  • 表格布局
  • 优点：兼容性非常好，弥补了flex布局兼容的问题

  • 缺点：操作繁琐，当三栏中其中某一栏高度超出时，其他两栏的高度也会自动跟着调整（不符合某些场景）

  • 效果图

css

.table-content {
    display: table;
    width: 100%;
}
 .table-content div{
    display: table-cell;
    height: 100px;
 }
 .table-content .left {
    width: 300px;
    background: pink;
 }
 .table-content .center {
    background: red;
 }
 .table-content .right {
    width: 300px;
    background: yellow;
 }

html

Box">
    
Box-content">
        
内容

        
内容

        
内容

css

.grid-content {
    display: grid;
    width: 100%;
    grid-template-rows: 100px;
    grid-template-columns: 300px auto 300px;
 }
 .grid-content .left {
    background: pink;

}

.grid-content .center {

background: red;


}

.grid-content .right {

background: yellow;

}

html

内容

内容
内容
  • 假如把高度已知去掉或者高度超出
  • 1.flex布局高度可以自适应
  • 2.表格布局高度可以自适应
  • 3.浮动，绝对定位，网格布局不能自适应高度

猜你在找的前端面试题相关文章

前端面试题集锦-2021年前端面试题收集题库2
1.Javascript延迟加载有哪些方式 浏览器解析html全过程 解析HTML结构 遇到script脚本标签(...
前端面试题集锦-2021年前端面试题收集题库3
常见的javascript 语句基本规范 1.变量和函数的命名规则 命名规则-驼峰命名法 构造函数首字...
前端面试题集锦-2021年前端面试题收集题库1
1.说说Javascript中对象的几种创建模式 对象-继承-面向对象 创建对象第一个想到的关键字是...
WEB前端面试2014阿里旺旺
NO1.下图绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个...
web前端-经典面试整理（持续更新）【分类】
浏览器相关 浏览器最大并发量限制是多少个？及如何去突破这个限制？ 浏览器最大并发量限制...
WEB前端面试选择题解答（共36题）
第1题 A：[&quot;1&quot;, &quot;2&quot;, &quot;3&quot;] B：[1...
程序员级别鉴定书（.NET面试问答集锦）
作为一个.NET程序员，应该知道的不仅仅是拖拽一个控件到设计时窗口中。就像一个赛车手，一...
程序员Web面试之前端框架等知识
基于前面2篇博客： 程序员Web面试之jQuery 程序员Web面试之JSON 您已经可以顺利进入Web开发...
程序员Web面试之jQuery
又到了一年一度的毕业季了，青春散场，却等待下一场开幕。 在求职大军中，IT行业的程序员、...
程序员Web面试之JSON
JSON是什么？ JSON（JavaScript对象表示法）, 是在网络通信下，常用的一种数据表达格式，它...
前端面试题Java面试题PHP面试题Python面试题运维面试题
面试题答案线程池专题面试经典题数据库面试邮箱通知运维岗位网络运维必会题目运维面试一个经典实用开始丢包 的解dropping pac[转]nf_connt运维人员20道关于Linux防火xfsdump命令使mount 需要同SSM框架面试题最新Java面试Java进阶面试Java实习生面最新Java校招Java集合框架你能答上几道75道阿里JavaJava中级面试近5年常考Jav近5年常考Jav近5年常考JavJava面试题考