CSS development tips

A lot of CSS skills have been posted on the website, so today I will summarize the problems that I usually encounter at work, and talk about solutions using CSS. What is a multi-column equal-height layout?

Click to add text on one side, and the background on the other side will also be added.

html code:

<div id="container">
    <div class="left">haorooms多列等高布局左</div> 
    <div class="right" id="rights">多列等高布局,使用正负 margin 与 padding 相冲的方式实现。</div></div>

Method 1: Use positive and negative margins to conflict with padding

   #container{
    width:400px;
    margin:0 auto;
    background:#eee;
    overflow:hidden;}.left,.right{
    width:200px;
    float:left;
    font-size: 16px;
    line-height:24px;
    color:#333;
    padding-bottom:5000px;
    margin-bottom:-5000px;}.left{
    background-color: deeppink;}.right{
    background-color:yellowgreen;}

Give a large enough padding and negative margin

2. Use display:flex to achieve

This method is very simple. We often use it on the mobile terminal. Just set the container to display:flex and the child elements to flex:1.

3. Implementation of display:table-cell

Similar to the above method, the container is set to display:table; and the sub-element is set to display:table-cell;.

4. The implementation of setting the background color of the parent container is as follows:

#container{
    width:400px;
    margin:0 auto;
    background-color: deeppink;
    overflow:hidden;}.left,.right{
    width:200px;
    float:left;
    font-size: 16px;
    line-height:24px;
    color:#333;}.right{
    background-color:yellowgreen;}

5. Multiple background colors of the parent container - linear gradient

#container{
    width:400px;
    margin:0 auto;
    background-image:
        linear-gradient(90deg, yellowgreen 50%, deeppink 0);
    overflow:hidden;}.left,.right{
    width:200px;
    float:left;
    font-size: 16px;
    line-height:24px;
    color:#333;}

6. border Implement

   #container{
     border-left:200px solid yellowgreen;
     background-color:deeppink;
     width:200px;
     font-size: 16px;
     line-height:24px;
     color:#333;
    }
    .left{
        width:200px;
        margin-left:-200px;
        float:left;
    }

Multi-column uniform layout

Method 1: display:flex

This method is also mentioned above. It is relatively simple to implement and is suitable for mobile layout.

Method 2: Use pseudo-elements and text-align:justify

html code is as follows:

<div class="container">
    <div class="justify">
        <i>1</i>
        <i>2</i>
        <i>3</i>
        <i>4</i>
        <i>5</i>
    </div></div>

css code is as follows:

.justify{  text-align: justify;  text-align-last: justify; // 新增这一行}.justify i{  width:24px;  line-height:24px;  display:inline-block;  text-align:center;}
text-align-last兼容性不是很好，可以使用::after，
.justify{  text-align: justify;}.justify i{  width:24px;  line-height:24px;  display:inline-block;  text-align:center;  border-radius:50%;}.justify:after {  content: "";  display: inline-block;  position: relative;  width: 100%;}

List layout boundary line Question

Method 1: Negative margin

Idea:

Set width on the outer layer, set overflow to hidden, set negative margin on the inner layer, margin-left:- 1px; you can hide the left margin

html code is as follows:

<div class="ul-container">
    <ul>
        <li>haorooms</li>
        <li>测试</li>
        <li>hao测试</li>
        <li>右侧</li>
        <li>边界线</li>
        <li>消失</li>
        <li>测试</li>
    </ul></div>

css code:

ul{
    width: 300px;
    margin-left:-1px;}li{
    float:left;
    width:99px;
    line-height:30px;
    text-align:center;
    border-left:1px solid #999;
    font-size:18px;
    margin-bottom:10px;}.ul-container{
    width: 300px; 
    margin: 50px auto;
    overflow:hidden;
    background: #eee;
    padding:10px 0;}

Method 2: Use pseudo

class selector

// Use the pseudo-class selector to select the 3nth element and remove the border li:nth-child(3n){

border-right:none;}

At work There are so many common questions. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to create a butterfly flying animation with CSS3

css3 Click to display ripples Special effects

How to use CSS3 to create switching special effects for irregular images

The above is the detailed content of CSS development tips. For more information, please follow other related articles on the PHP Chinese website!