Problèmes de mise en page CSS résolus

1, Plusieurs éléments sont centrés horizontalement

Obtenir l'effet suivant :

Lorsque les gens ordinaires voient la question, ils ont d'abord l'impression qu'il n'est pas difficile d'obtenir l'effet sur l'image. Il suffit de définir les marges de largeur et de hauteur de. la petite boîte noire et centrez la police horizontalement et verticalement. En fait, la question devrait en fait examiner le centrage horizontal de plusieurs éléments, c'est-à-dire que quelle que soit la cardinalité des éléments (petites boîtes noires), ils peuvent être centrés horizontalement dans leur ensemble.

Dans la mise en page du site Web, plusieurs fois, des éléments en ligne tels que les balises li span ou block element sont utilisés dans les éléments enfants, et le nombre de balises est variable, et nous voulons que ce bloc ait quel que soit leur nombre (la largeur hors tout des éléments enfants est variable), ils peuvent toujours être affichés au centre. Cela nécessite de définir l'élément enfant display:inline-block. Dans le même temps, selon l'attribut display:inline-block, l'élément enfant lui-même a les caractéristiques d'inline, donc l'élément parent doit définir text-align: center pour obtenir le centrage horizontal de l'élément enfant dans son ensemble. dans l'élément parent.

main{
  text-align:center;
}p{
  display:inline-block;
  *display:inline;/*hack IE*/
  *zoom:1;/*hack IE*/}

Utilisez l'attribut display:inline-block pour créer l'élément inline ou block L'élément peut définir sa propre largeur et hauteur sans ajouter d'attributs float, et en même temps, l'élément peut être affiché au centre de l'élément parent.

Définissez l'attribut display:inline-block sur l'élément inline et constatez que l'effet d'affichage dans IE6 et IE7 est cohérent avec les autres navigateurs, mais le fait est que IE7 et les versions inférieures de IE navigue Le serveur ne prend pas en charge l'attribut display:inline-block.

Sous IE, display: inline-block déclenche uniquement la disposition de l'élément. Par exemple, définir display: inline-block sur p ne peut garantir que p a les caractéristiques d'un élément de bloc (vous pouvez définir la largeur, la hauteur, etc.), mais cela provoquera toujours des sauts de ligne. Ensuite, vous devez définir display: inline afin qu'il ne provoque pas de sauts de ligne. Écrivez display:inline-block;*display:inline; sur le même style. L'attribut inline-block ne déclenchera pas la mise en page de l'élément, nous devons donc ajouter *zoom:1 pour déclencher la mise en page.

En plus des méthodes efficaces mentionnées ci-dessus, il existe une autre méthode :

Utilisez d'abord L'affichage :inline L'attribut -block déclenche l'élément block, puis définit display:inline pour restituer l'élément block en tant qu'objet en ligne (deux affichages doivent être placés dans deux déclarations de style CSS pour être efficaces. Il s'agit d'un bug classique d'IE, si display:inline -block est défini en premier, puis l'affichage est remis en ligne ou en bloc, la mise en page ne disparaîtra pas).

p {display:inline-block;...}p {*display:inline;}

Mais il convient de noter que , Les éléments Display:inline-block produiront un espace blanc supplémentaire (non abordé dans cette question). Solution : L'élément parent définit font-size:0 pour supprimer l'espace blanc horizontal de l'élément de bloc en ligne ; l'élément enfant définit l'attribut vertical-align pour supprimer l'espace blanc vertical de l'élément de bloc en ligne.

http://codepen.io/floralam/pen/XJwWZJ?editors=110

Mise en œuvre de plusieurs éléments Centrer horizontalement et verticalement

à l'aide de flexbox

http://codepen.io/floralam/pen/MwKmGP

2, Disposition de clôture

Réaliser la disposition suivante :

http://codepen.io/floralam/pen/OPYyEE

.parent{
    display: flex;
    flex-direction: column;//上面两行等同于flex-flow：colomn
    flex-wrap: wrap;// 显示 wrap一行显示不完的时候换行
    height: 440px;
    width: 660px;
}

一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。

伸缩方向与换行(flex-flow)

伸缩容器有一个CSS属性“flex-flow”用来决定伸缩项目的布局方式。

如果伸缩容器设置了“flex-flow”值为“row”，伸缩项目排列由左向右排列。

 

如果“flex-flow”值设置为“column”，伸缩项目排列由上至下排列。

 

制作一个20%、60%、20%网格布局

.main-content {
      width: 60%;
}.main-nav,.main-sidebar {
     -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
      -moz-box-flex: 1;         /* OLD - Firefox 19- */
      width: 20%;               /* For old syntax, otherwise collapses. */
      -webkit-flex: 1;          /* Chrome */
      -ms-flex: 1;              /* IE 10 */
      flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */}

 

3，  未知高度多行文本垂直居中

方法一，使用display：inline-block+伪元素：http://codepen.io/floralam/pen/WbBrwV?editors=110

 

.container{
   position: fixed;
    left: 0;
    top:0;
    height: 100%;
    width: 100%;
    text-align: center;
}.mask:after{
    content: " ";
    display: inline-block;
    vertical-align: middle;
    height: 100%}.dialog{
    display: inline-block;
    border: 3px solid lightblue;
}

box 容器通过 after或者before 生成一个高度 100% 的「备胎」，他的高度和容器的高度是一致的，相对于「备胎」垂直居中，在视觉上表现出来也就是相对于容器垂直居中了

 方法二（感谢超级课程表胡晋哥哥的提示），使用display：table-cell：

http://codepen.io/floralam/pen/yNeMPg

通过display转化成为表格的形式，再采用垂直居中的方法得到需要的结果。

display:table    此元素会作为块级表格来显示（类似

），表格前后带有换行符。    

display:table-cell 此元素会作为一个表格单元格显示（类似

和

） 方法三（感谢超级课程表胡晋哥哥的提示），flexbox布局： http://codepen.io/floralam/pen/yNeMvM flexbox属性：  伸缩容器：一个设有“display:flex”或“display:inline-flex”的元素  伸缩项目：伸缩容器的子元素  主轴、主轴方向：用户代理沿着一个伸缩容器的主轴配置伸缩项目，主轴是主轴方向的延伸。  主轴起点、主轴终点：伸缩项目的配置从容器的主轴起点边开始，往主轴终点边结束。  主轴长度、主轴长度属性：伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度，伸缩项目的主轴长度属性是width或height属性，由哪一个对着主轴方向决定。  侧轴、侧轴方向：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。  侧轴起点、侧轴终点：填满项目的伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。  侧轴长度、侧轴长度属性：伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度，伸缩项目的侧轴长度属性是「width」或「height」属性，由哪一个对着侧轴方向决定。 另外，对于单行文本，设置line-height=height代码更加简洁: http://codepen.io/floralam/pen/eNJvyE 父元素设置宽度高度，然后设置属性 text-align:center; /* 水平居中 */ line-height: 300px; /* line-height = height */   4，  多栏自适应布局 对于移动设备浏览器：http://codepen.io/floralam/pen/NPVwgz?editors=110 .container{   display:-webkit-box; }.left{   -webkit-box-flex:1; }.right{   -webkit-box-flex:1; }  实现左右两侧元素，右侧元素的文字不会溢出到左侧位置。 1）让左边的图片左浮动或者绝对定位， http://codepen.io/floralam/pen/wBbPPj .right{     margin-left: 150px; } 2）让左边的图片左浮动或者绝对定位， http://codepen.io/floralam/pen/gbJogQ .right{   overflow:hidden;/*让右侧文字和左侧图片自动分栏*/ } 3）左侧图片设置为左浮动， http://codepen.io/floralam/pen/bNyaaX?editors=110 .right{   display: table-cell;/*让右侧文字和左侧图片自动分栏*/ } 两栏或多栏自适应布局的通用类语句是（block水平标签，需配合浮动）： http://codepen.io/floralam/pen/vEwpjV .cell{   padding-right:10px;   display: table-cell;   *display: inline-block;   *width: auto; }     5，  强制不换行 p{     white-space:nowrap; } 自动换行 p{　　word-wrap: break-word; //性允许长单词或 URL 地址换行到下一行 　　word-break: normal; //让浏览器实现在任意位置的换行}   word-wrap是控制换行的。break-word是控制是否断词的。 强制英文单词断行 p{ 　　word-break:break-all; }   6，  li超过一定长度，以省略号显示 http://codepen.io/floralam/pen/zxQjrK .nowrap li{    white-space:nowrap;    width:100px;    overflow:hidden;    text-overflow: ellipsis; }   7，  左侧导航 http://codepen.io/floralam/pen/ogrbXW?editors=110   { :; :;:; :; :; }{ :; :; :; }{ :; }   8，  css3文字分栏 http://codepen.io/floralam/pen/ZYdOmN?editors=110     9，  修复侧边栏 在外容器的添加导航和主内容，当导航和主内容的宽度加上内外边距的数值大于外容器的宽度减去内边距的值，会导致导航和主内容（其中一个，html代码排后面的元素）被挤下。 http://codepen.io/floralam/pen/XJLRYq?editors=110  解决方案： 1)      Section元素上使用box-sizing:border-box;模拟IE6中，使得内元素的宽度为width的值，而非width加上padding和margin的值。 2)      width:-moz-calc(75% -1rem * 2);width:-webkit-calc(75% - 1rem * 2); width: calc(75% - 1rem * 2); width属性中减去padding值 3)      http://codepen.io/floralam/pen/yydPOE 在元素内部增加一个额外的容器，并将padding放在这个新增的内部容器中，这是一种修复方法，而且得到众多浏览器支持。   10， css描绘三角形 http://codepen.io/floralam/pen/azgGmZ  很多关于使用css3来描绘特定图像，使用代码而非图片实现（多座小山包，返回顶部）的题目，都离不开描绘三角形。   11， 清除浮动的技巧     在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。 1)      添加最后一个元素 2) L'élément parent définit le débordement : caché; 3) Utiliser le pseudo-élément :after de CSS via CSS Le pseudo-élément ajoute un espace invisible "020" ou un point "." à la fin de l'élément interne du conteneur et attribue l'attribut clear pour effacer le float. Il convient de noter que pour les navigateurs IE6 et IE7, un zoom:1 doit être ajouté à la classe clearfix pour déclencher haslayout. http://codepen.io/floralam/pen/xboPXK?editors=110 Pour plus d'articles liés aux problèmes de mise en page CSS, veuillez prêter attention à PHP chinois net ! Étiquettes associées： mise en page CSS source：php.cn Article précédent：CSS : propriété Border Article suivant：Menu multi-niveaux CSS pur Déclaration de ce site Web Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn Derniers articles par auteur Exemples de paramètres HTML pour les effets de police gras, italique, souligné, barré et autres 1970-01-01 08:00:00 实现一个 Java 版的 Redis 1970-01-01 08:00:00 La démo d'applet WeChat la plus simple 1970-01-01 08:00:00 Introduction aux méthodes de fonctionnement simples de pandas.DataFrame (créer, indexer, ajouter et supprimer) en python 1970-01-01 08:00:00 WeChat Mini Program : Exemple de mise en œuvre de l'effet d'onglets 1970-01-01 08:00:00 Python construit des méthodes personnalisées pour embellir la sortie de la structure du dictionnaire 1970-01-01 08:00:00 HTML5 : utilisez Canvas pour traiter la vidéo en temps réel 1970-01-01 08:00:00 Asp.net utilise SignalR pour envoyer des images 1970-01-01 08:00:00 Tutoriel de développement de programmes WeChat Mini-App() et Page() Présentation des fonctions 1970-01-01 08:00:00 Explication détaillée de l'utilisation de Python Redis 1970-01-01 08:00:00 Derniers numéros Utiliser des grilles pour créer cette conception spécifique : un guide étape par étape J'essaie de créer une mise en page similaire à cette image, j'ai essayé d'utiliser cette g... Depuis 2024-04-06 20:29:08 0 2 492 L'actualisation forcée est une conséquence de l'accès à des chemins non définis ou à des pages d'erreur dans Next.js L'accès à un chemin non défini ou à une page d'erreur entraîne une actualisation matériell... Depuis 2024-04-05 08:32:46 0 1 400 protocole de boîte en grille en CSS Je veux que les deux premières cases montent avec une largeur maximale et que la deuxième ... Depuis 2024-04-03 16:36:04 0 2 334 Créez diverses mises en page de cartes à l'aide d'une seule grille ou de Flex : un guide pratique J'essaie de créer une mise en page de carte réactive comme celle illustrée. Ce que je fais... Depuis 2024-04-02 21:07:36 0 2 377 La mise en page dans Next.js obscurcit le contenu de la page J'essaie d'utiliser la navigation inférieure de Material-ui (https://mui.com/material-ui/r... Depuis 2024-04-02 19:42:19 0 1 275 Rubriques connexes Plus> Qu'est-ce que la recherche Spotlight ? qu'est-ce que nodejs Qu'est-ce que le fichier ESD ? Classement des dix principales plateformes de trading formelles Le rôle du masque de sous-réseau La visionneuse d'images Windows ne peut pas afficher une mémoire insuffisante Java Comment vérifier les liens morts sur votre site Web Recommandations populaires Comment configurer CSS pour dépasser les ellipses d'affichage Comment définir la taille de la police en CSS Comment utiliser le survol en CSS Comment définir l'espacement des caractères en CSS Quelles sont les nouvelles fonctionnalités de CSS3 Tutoriels populaires Plus> Tutoriels associés Recommandations populaires Derniers cours Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne) 1417010 Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine 4257592 Tutoriel vidéo JAVA pour débutants 2476399 Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle 503727 Tutoriel d'introduction PHP base zéro 844198 Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne) 1417010 temps d'étude Tutoriel vidéo JAVA pour débutants 2476399 temps d'étude Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle 503727 temps d'étude Introduction rapide au développement web front-end 215287 temps d'étude Maîtrisez les didacticiels vidéo PS à partir de zéro 877175 temps d'étude [Web front-end] Démarrage rapide de Node.js 6416 temps d'étude Collection complète de cours full-stack de développement Web étranger 5047 temps d'étude Aller au langage pratique GraphQL 4241 temps d'étude Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape 633 temps d'étude Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures 21483 temps d'étude Derniers téléchargements Plus> effets Web Code source du site Web Matériel du site Web Modèle frontal [bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery [Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3 [Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5 [bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery [Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS [effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique [Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image [Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3 [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches [Modèle frontal] Modèle Web de CV de travail créatif de concepteur [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet [Modèle frontal] Modèle de site Web de service de trading de devises de style violet [Matériau PNG] Matériau vectoriel d'éléments d'été mignons (EPS+PNG) [Matériau PNG] Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG) [image de bannière] Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS) [Matériau PNG] Matériau vectoriel de chapeau de graduation doré (EPS+PNG) [Matériau PNG] Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG) [Matériau PNG] Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes [image de bannière] Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS) [Matériau PNG] Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG) [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches [Modèle frontal] Modèle Web de CV de travail créatif de concepteur [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet [Modèle frontal] Modèle de site Web de service de trading de devises de style violet À propos de nous Clause de non-responsabilité Sitemap Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！