Home > Article > Web Front-end > Several techniques that can be used when implementing layout with css (code)

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

不言Original: 2018-08-09 17:38:101740browse

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

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>

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>

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

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!

css easyui bootstrap css3 html 前端框架 Float position margin padding border ui

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to achieve vertical and horizontal centering in css when the size of the element is not known (code)Next article：How to achieve vertical and horizontal centering in css when the size of the element is not known (code)

See more

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

Related articles