Conseils de développement CSS

De nombreuses compétences CSS ont été publiées sur le site Web, je vais donc aujourd'hui résumer les problèmes que vous pouvez rencontrer au travail et parler de solutions utilisant CSS. Qu'est-ce qu'une mise en page multi-colonnes de même hauteur ?

Cliquez pour ajouter du texte d'un côté, et l'arrière-plan de l'autre côté sera également ajouté.

Code HTML :

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

Méthode 1 : Utiliser des marges positives et négatives pour entrer en conflit avec le remplissage

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

Donner un remplissage et une marge négative suffisamment grands

2. Utilisez display:flex pour implémenter

Cette méthode est très simple Nous l'utilisons souvent sur le terminal mobile. Définissez le conteneur sur display:flex et les éléments enfants sur flex : 1.

3. Implémentation de display:table-cell

Similaire à la méthode ci-dessus, définissez le conteneur sur display:table et le sous-élément sur display:table-cell;.

4. La mise en œuvre de la définition de la couleur d'arrière-plan du conteneur parent

est la suivante :

#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. Plusieurs couleurs d'arrière-plan du conteneur parent - dégradé linéaire.

#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. Implémentation de la bordure

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

Mise en page uniforme multi-colonnes

Méthode 1 : display:flex

Cette méthode a également été mentionné ci-dessus. Il est relativement simple à mettre en œuvre et adapté à la mise en page mobile.

Méthode 2 : Utiliser des pseudo-éléments et text-align:justify

Le code html est le suivant :

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

Le code css est le suivant :

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

Problème de ligne de démarcation de mise en page de liste

Méthode 1 : marge négative

Idée :

Définir la largeur sur le calque externe, définir le débordement sur caché, définir négatif margin et margin sur le calque interne -left:-1px; vous pouvez masquer la marge gauche

le code html est le suivant :

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

code css :

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

Méthode 2 : Utiliser le pseudo Sélecteur de classe

// Utiliser le sélecteur de pseudo-classe pour sélectionner le 3ème élément et supprimer la bordure li:nth-child(3n){
border -right:none;}

Il y a tellement de problèmes courants au travail. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment créer une animation de vol de papillon avec CSS3

clic css3 pour afficher des effets spéciaux d'ondulations

Comment utiliser CSS3 pour créer des effets spéciaux de commutation pour des images irrégulières

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!