码迷,mamicode.com
首页 > Web开发 > 详细

CSS全屏布局总结

时间:2018-11-12 11:15:02      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:属性   png   text   默认   运算   anti   www.   自动   flow   

通配样式:

*{
  padding:0;
  margin:0;
}
html,body,.content{
  height:100%;
}

效果图:

技术分享图片

一、定位内容absolute:

一句话总结】:顶部、底部等设置固定高度,内容减去去这些高度100%高即可

原理】:全局内容百分比高满屏

【缺点】:无法自适应布局,同级扩展性问题;

【例子1】:

.top,.bottom{
  position: absolute;
  height: 50px;
  background-color: red;
  left: 0;
  right: 0;
}
.top{
  top:0;
}
.bottom{
  bottom:0;
}
.center{
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 0;
  right: 0;
  background-color: antiquewhite;
  overflow: auto;
}

二、函数计算calc() 

一句话总结】:同样是顶部、底部栏等设置固定高度,内容利用calc()函数 “+”, “-“, “*”, “/” 运算达到高度100%高即可

原理】:全局内容百分比高满屏

【缺点】:无法自适应布局,还有兼容性问题

技术分享图片

 【例子2】:

.top,.bottom{
  height:50px;
  background-color:red;
}
.center{
  height: calc(100% - 100px);;
  background-color: antiquewhite;
  overflow: auto;
}

三、弹性布局flex

一句话总结】:flex常用于小范围的布局,兼容主流浏览器,可自适应内容。

原理】:类似盒子属性,父子层级具有依赖关系。

【缺点】:设置相对复杂,部分浏览器可能卡顿。

阮一峰教程:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

 【例子3】:

.content{//父
  display: flex;
  flex-direction: column;
}
.top,.bottom{//子
  height:50px;
  background-color:red;
}
.center{//子
  display: flex;
  flex: 1;
  background-color: antiquewhite;
  overflow: auto;
}

总结:

方案兼容性性能自适应
position 好(hack兼容) 部分自适应
flex 较差(ie低版本不兼容) 可自适应
grid 差(目前还是草案) 较好 可自适应

其他:

1.内容固定或隐藏,可能会使用浮动:【float:left/right】、【overflow: hidden】、【position:fix;】;

2.行块转换,内容对齐:【display: inline-block;vertical-align: top/middle;】

3.已弃用的table属性:【 display: table-cell;】、【table-layout: fixed;】

4.bootstrap:主流UI组件样式设置,但需要注意边距和固定布局设置问题:【container替换成container-fluid】内容不固定宽度并且自动适应屏幕、【padding:0;background:transparent】覆盖header默认两侧距离和底色(transparent默认值)。

参考链接:

https://blog.csdn.net/wanmeiyinyue315/article/details/79974969

http://www.cnblogs.com/xiaohuochai/p/5458068.html

http://www.cnblogs.com/pangguoming/p/5695184.html

https://blog.csdn.net/github_39457740/article/details/77962735

CSS全屏布局总结

标签:属性   png   text   默认   运算   anti   www.   自动   flow   

原文地址:https://www.cnblogs.com/wheatCatcher/p/9944442.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!