你不知道的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

Right Sidebar

原理：利用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;

}

}

今天小的分享就到这吧！下次有时间再接着分享