Several techniques that can be used when implementing layout with css (code)-CSS Tutorial-php.cn

Several techniques that can be used when implementing layout with css (code)

不言

Release： 2018-08-09 17:38:10

Original

1774 people have browsed it

The content of this article is about several techniques (code) that can be used when implementing CSS layout. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Faced with a familiar layout

The sides are fixed and the middle is adaptive, the head is fixed and the middle is adaptive, the panel component and the model component are similar in appearance

We have a front-end framework Both bootstrap and easyui provide these component plug-ins. During the use process, there are always some slight differences with the page drawn by UI, such as: font, height, background color

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

Option 1: Use positioning to implement the above fixed middle 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;
 }
}

Copy after login

Principle: Use border-top to occupy the top height, and use the top setting of position-@header_height to top the position Go back

Option 2: Use float, padding, and margin to achieve side-fixed middle adaptive layout

<!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>

Copy after login

Principle: Use padding to occupy the side width, and use the side margin setting-@side_width return Go to the side position

Panel layout: The principle is similar to option 1. In addition, modal can also refer to this layout method

html structure

<p class="panel">
    <p class="panel-header">
      <span class="panel-title-self">今日庭审</span>
    </p>
    <p class="panel-body">
      <p class="trial">
      </p>
    </p>
</p>

Copy after login

css setting

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

Copy after login

Related recommendations:

How to achieve vertical and horizontal centering in css when the size of the element is unknown (code)

How to implement a custom scroll bar style in css3? (Code)

The above is the detailed content of Several techniques that can be used when implementing layout with css (code). For more information, please follow other related articles on the PHP Chinese website!