本篇文章給大家帶來的內容是關於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實現側邊固定中間調適型配置
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>padding layout demo</title> <style type="text/css"> * 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; } </style></head><body> <p id="container"> <p id="content">Main content section </p> <p id="sidebar">Right Sidebar </p> </p></body></html>
原理:利用padding佔據側邊寬度,利用側邊的margin設定-@side_width回到側邊位置
面板布局:原理類似方案一,另外modal也可參考此布局方法
html結構
<p class="panel"> <p class="panel-header"> <span class="panel-title-self">今日庭審</span> </p> <p class="panel-body"> <p class="trial"> </p> </p></p>
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; }}