A few tricks (code) that CSS can use to implement layout

This article gives you the content is about the CSS implementation of the layout can be used in a few tricks (code), there is a certain reference value, a need for friends can refer to, I hope to help you.

Face the familiar layout

Side-Fixed middle-adaptive, head-fixed middle-adaptive, nearly-growing panel component, model component

We have front-end framework Bootstrap,easyui all have to provide these components plug-ins, in the use of the process is always and the UI to draw out the page some subtle differences such as: font, height, background color

Today to summarize how to quickly customize the layout, improve development efficiency

Scenario 1: Using positioning to achieve the upper fixed intermediate adaptive layout

#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; }}

Principle: Use Border-top to occupy top height, use the top setting of position-@header_height put the position back

Scenario 2: Using Float,padding,margin to achieve side-fixed intermediate adaptive layout

<!     DOCTYPE html>
Principle: Use the padding to occupy the side width, using the margin setting of the side-@side_width back to the side position

Panel layout: The principle of similar scheme one, the other modal can also refer to this layout method

HTML structure

<p class= "Panel" >    <p class= "Panel-header" >      <span class= "Panel-title-self" > Today's trial </span >    </p>    <p class= "Panel-body" >      <p class= "trial" >      </p>    </p> </p>
CSS Settings

 @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-heade  r{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; }}