前端知识整理-div+css之页面布局

奔跑的肥皂      2022-02-16     118

关键词:

终于收到了第一份面试邀请。

时间是下周一。 也是为了验证自己的修炼水平 进行一下知识整理 顺带 查漏补缺 也给后来的同学 提供一些参考

我们用实例来总结:

假设 进行三栏布局 左右300px 中间自适应 我们有几种解决方案呢?

第一种,我们用float

第二种,我们用绝对布局

以上两种过于简单 不解释了

第三种,就是flaxbox了

flexbox就是我心目中的最佳解决方案了,很多坑都是用flex来解决的 

代码如下:

<head>
html *{
display:flax;
}
.left{
width:300px;
    }
.center{
flex:1;
background:red;

}
.right{
width:300px;
}
</head>


<body>
<div class="left"></div>
        <div class="center">
          <h2>flexbox解决方案</h2>
        </div>
        <div class="right"></div>
</body>

给所有HTML加上flax  然后给中间的加flax=1就行了 没有特别写的呢 默认都是0

第四种:表格布局。

解决思路就是给三个块加一个总width:100%  然后左右各300px 中间就是剩下的也是自适应 

 

第五种 网格布局 这个我也不是很熟悉 

 

  width:100%;
          display: grid;
          grid-template-rows: 100px;
          grid-template-columns: 300px auto 300px;

  貌似这样加上所有块的cdd就行了

 

总结一下:第一种第二种有各种缺憾 flax布局就是用来解决他们俩的缺陷的 但是flax比较新 我查了一下 兼容到IE10 也是一种遗憾吧

第四种 表格布局大家都在摒弃  但是我用的挺顺手的 

第五种:网格布局 感觉很简便 但是不熟悉 刚刚查的 

大家还有什么好方法 或我哪里说的不对的请斧正

网站前端开发常用的布局方式都有哪些

...998)4、栅格与响应式(移动端的兴起,2007与2010)当前WEB前端开发使用DIV+CSS的布局方式会比较多也比较常用吧,网页布局看起来貌似简单,但是它需要综合使用很多HTML+CSS的知识,总的来说知识量是不小。如果想系统化的了解HTM... 查看详情

web前端需要学啥?

这里整理了一份web前端学习路线的思维导图,需要掌握和学习的内容如下:第一阶段:专业核心基础阶段目标:1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面布局。4.熟练应用CSS3技术... 查看详情

零基础学习前端开发要怎么开始

这里整理了一份web前端学习路线的思维导图,需要掌握和学习的内容如下:第一阶段:专业核心基础阶段目标:1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面布局。4.熟练应用CSS3技术... 查看详情

学前端都学啥比较好?

这里整理了一份系统全面的web前端学习路线,需要学习以下内容,希望能帮助各位小伙伴少走弯路。第一阶段:专业核心基础阶段目标:1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面... 查看详情

前端开发必学的技术都有哪些?

前端开发必学的技术有哪些这里给大家整理了一份系统全面的前端学习路线,主要掌握以下技术:第一阶段:专业核心基础阶段目标:1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面布... 查看详情

web开发需要学习啥?

这里整理了一份web前端学习路线,比较系统和全面,希望可以帮到你~第一阶段:专业核心基础阶段目标:1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面布局。4.熟练应用CSS3技术,动画... 查看详情

北京web前端培训机构,出来好找工作吗,需要学哪些内容?

大部分人学习一项技术肯定是以就业为目标,那么学习web前端哪些知识才能找到一份工作?小蜗这里根据行业的变化以及企业的用人需求,整理了一份web前端的学习路线,只要掌握了以下内容,找到一份工作基本不难。第一阶段... 查看详情

web前端大神整理:css布局经典问题

本文来自前端大神的整理,主要对CSS布局中常见的经典问题进行简单说明,并提供相关解决方案的参考链接,涉及到三栏式布局,负margin,清除浮动,居中布局,响应式设计,Flexbox布局,等等。 CSS基础知识 下面几个入... 查看详情

css之页面两列布局

两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度html部分<divclass="left"></div><divclass="right"></div>css部分.left{position:absolute;/*这可以换成float:left... 查看详情

前端系列之css基础知识概述

1、什么是DIV(1)、div就是html一个普通标签,进行区域划分。特性:独自占一行。独自不能实现复杂效果。必须结合css样式进行渲染。(2)、div通常其是块级元素(3)、div是定义文档中的分区或节(division/section)。(4)、div标签... 查看详情

html基础知识回顾整理

20151008~20151101所学HTML内容回顾整理HTML(标签、div+Css)+JS(js语法,dom,jquery)HTML:HyperTextMankupLanguage超文本标记语言学html,实际就是在学标签都有哪些,怎么用。如何通过标签来控制文本样式。文件后缀:html,htm一、标签:基本标... 查看详情

css之页面三列布局

左右两边宽度固定,中间自适应 第一种方法:左右两边绝对定位html代码<divclass="left"></div><divclass="middle"></div><divclass="right"></div>css代码.left{height:200px;width:300px;background-color 查看详情

网页简单布局之结构与表现原则(html/css)

结构样式行为真正的分离前端初级人员会在页面上单纯的用各个div把相关内容独立开;前端中级人员明白相关属性的设置会给元素带来什么改变,从而减少div的书写;前端高级人员会以及其简单的和稳定的方式实现相应的效果。... 查看详情

理论知识

想扩展深入了解,点击参考链接1.DIV+CSS和table布局的区别:DIV+CSS布局比table布局节省页面代码,代码也更加的清晰。DIV+CSS的页面对搜索引擎支持好,而且速度更快了,能够比Table更加快速的显示网站内容。DIV+CSS布局是网站版面布... 查看详情

前端之html知识点整理

 htypertextmarkuplanguage 即超文本标记语言  超文本:就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。  标记语言:标记(标签)构成的语言.    网页==HTML文档,由浏览器解析,用来展示的  静态网... 查看详情

前端笔记整理(css)(代码片段)

前端基础知识CSS3新特性定位常见类型`position:absolute`和`float`属性CSS盒模型`margin`塌陷浮动.clearfixBFC常见布局水平垂直居中flex布局flex属性flexitems属性两边宽度固定、中间栏自适应三栏布局怎么能让图文不可复制px... 查看详情

前端知识整理(代码片段)

 前端知识整理代码千万行,安全第一行;前端不规范,运营两行泪*HTML HTML语义化HTML语义化是指仅仅从HTML元素上就能看出页面的大致结构,比如需要强调的内容可以放在<strong>标签中,而不是通过样式设置<span>... 查看详情

007.前端开发知识,前端基础css(2020-01-28)

一、布局一列固定宽度且居中两列左窄右宽型通栏平均分布型1、一列固定宽度且居中布局<body>.top+.banner+.main+.footer按Tab键,得到下框中代码<divclass="top"></div><divclass="banner"></div><divclass="main"></div>< 查看详情