本篇文章给大家带来的内容是关于css实现布局时可以用的几个技巧（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
面对似曾相识的布局
侧边固定中间自适应，头部固定中间自适应，长得差不多的panel组件，model组件
我们有前端框架bootstrap,easyui都有提供这些组件插件，在使用给过程中总是和ui画出来的页面有些细微的差距比如：字体，高度，背景色
今天来总结下如何快速自定义布局，提高开发效率
方案1：利用定位实现上面固定中间自适应布局
立即学习“前端免费学习笔记（深入）”；
#section{ position: fixed; top:0; left: 0; bottom: 0; right: 0; .top{ position: fixed; top:0; left: 0; height: @header_height; width: 100%; } .main{ position:relative; top:-@header_height; left:0; height:100%; border-top:@header_height solid transparent; }}
原理：利用border-top占据top高度，利用position的top设置-@header_height将位置顶回去
方案2：利用float,padding,margin实现侧边固定中间自适应布局
padding layout demo * html #container{ height:1%; /* So IE plays nice */ } html{ height: 100%; } body{ height: 100%; margin:0; } #container{ background-color:#0ff; overflow:hidden; height: 100%; padding-right:220px; /* 宽度大小等与边栏宽度大小*/ } #content{ background-color:yellow; width:100%; float:left; height: 100%; } #sidebar{ background-color:#f00; width:220px; float:left; height: 100%; margin-right:-220px; }
Main content section
原理：利用padding占据侧边宽度，利用侧边的margin设置-@side_width回到侧边位置
面板布局：原理类似方案一，另外modal也可参考此布局方法
html结构
今日庭审
css设置
@panel-title-font-size:1rem;@panel-title-color:#fff;@panel-title-bg:#30A7FF;@panel-title-height:2.7rem;.panel-title-self{ color: @panel-title-color; font-size: @panel-title-font-size; background-color: @panel-title-bg; height: @panel-title-height;}.panel{ height: 100%; border: 1px solid #ddd; margin: 0; position: relative; box-shadow: 3px 3px 3px 3px #ddd; .panel-header{ background:@panel-title-bg; padding-left: 10px; height: @panel-title-height; line-height: @panel-title-height; display: flex; align-items: center; img{ margin: 0 5px; } } .panel-body{ height: 100%; width: 100%; box-sizing: border-box; border-top:@panel-title-height solid transparent; padding: 0; position: relative; top:-@panel-title-height; }}
相关推荐：
不知道元素大小时css如何实现垂直水平居中（代码）
css3如何实现自定义滚动条样式？（代码）
以上就是css实现布局时可以用的几个技巧（代码）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1611022.html
微信扫一扫 
支付宝扫一扫 
