新盒模型移动端的排版

这里采用的是新盒模型来进行排版：

在CSS样式里添加如下样式

html,body{
height: 100%;
}
.mytest{
display: flex;
display: -webkit-flex;
width: 100%;
height: 100%;
flex-direction:column;
}
header{
width: 100%;
height: 20px;
background-color: blue;
}
footer{
width: 100%;
height: 44px;
background-color: red;
}
section{
flex:1;
}

这里的话大致头部和尾部的位置出来了，中间section部分有时候内容超过，则需要添加overfloat:hidden;一旦添加这个属性上去之后，就不能滑动中间部分了，这时候需要让section部分局部滚动，我们可以用iscrolljs插件，这个是网址http://iscrolljs.com/，具体的用法，网址里面都有说明啦，好啦，一个简单的移动端页面就形成了。

转载于:https://www.cnblogs.com/-EFi/p/5525432.html

新盒模型移动端的排版相关推荐

怪异盒模型/flex布局
传统盒模型(标准盒模型) 默认的都是标准盒模型;(border,padding,margin,content) box-sizing:content-box; 盒子的宽度/高度= width/heig ...
前端笔记之移动端响应式（中）视口百分比布局弹性盒模型remfillpage
一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...
【转载】前端笔记之移动端响应式（中）视口百分比布局弹性盒模型remfillpage...
一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...
【前端】【html5/css3】前端学习之路（二）（CSS3新选择器/CSS3盒模型/CSS3过渡效果）
一.CSS3新增选择器 1.结构(位置)伪类选择器 :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nt ...
2021/3/14--前端第7天盒模型
2021/3/14–前端第7天盒模型 6 盒模型盒子模型的组成:content内容.padding内边距.border边框.margin外边距. 盒子模型分类:标准的盒子模型和怪异盒子模型(IE低版 ...
了解CSS盒模型、页面布局在UI设计中的作用
我司实行UI规范已过去一段时间,页面风格已逐渐实现统一.但近期在实际业务开发中发现,在UI验收环节不断出现小数值调整情况,极大的延长验收时间. 在和UI设计人员探讨后发现设计者对前端盒模型概念不甚了解 ...
html网页改兼容模型,浏览器兼容、CSS hack、normalize.css及盒模型基础知识问答
一.问题(一).如何调试 IE 浏览器 1.对于IE7及以下版本可采用IETester(不能测脚本,模拟出来的IE6平台与真实的IE6还是有差异的,结果不完全可靠).Expression Web Su ...
flex 平铺布局_CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
”盒模型“之如何防止边框和内边距把元素撑开
在我们讨论宽度的时候,我们应该讲下与它相关的一个重点知识:盒模型.当你设置了元素的宽度,实际展现的元素却能够超出你的设置:因为元素的边框和内边距会撑开元素.看下面的例子,两个相同宽度的元素显示的实际宽 ...

新盒模型移动端的排版

新盒模型移动端的排版相关推荐

最新文章

热门文章