Comment utiliser CSS pour mettre en page rapidement les éléments de mise en page en détail

Pour effectuer rapidement une mise en page Web, vous devez avoir une compréhension claire des éléments de la mise en page afin de ne pas toujours commettre des erreurs dans les détails. Cet article explique d'abord en détail les facteurs liés à la mise en page comme base de la mise en page : éléments au niveau du bloc et éléments en ligne, modèle de boîte, positionnement précis, alignement des éléments et héritage de style. Le prochain article se concentre sur la description d’idées de mise en page rapides.

1. Que sont les éléments de niveau bloc et les éléments en ligne ?

1. Les éléments de niveau bloc :

affichage : le bloc est caractérisé par le pliage. Oui, de manière générale, il peut contenir des éléments de niveau bloc et des éléments en ligne

Exception :

Les éléments P ne peuvent contenir que des éléments en ligne, pas des éléments de niveau bloc.

L'élément de bloc "form" est spécial. Il ne peut être utilisé que pour accueillir d'autres éléments de bloc.

2. Éléments en ligne :

display:inline n'affiche pas les sauts de ligne et ne peut contenir que des éléments en ligne.

Les éléments en ligne comme « span » n'ont pas leur propre espace indépendant. Ils dépendent d'autres éléments au niveau du bloc. Par conséquent, la définition d'attributs tels que la hauteur, la largeur et les marges intérieures et extérieures sur les éléments en ligne n'est pas valide. . En fait, les éléments en ligne que vous devez connaître sont span et un

3. L'élément flottant est automatiquement défini sur l'élément "block"

, qu'il soit ou non. est un bloc ou en ligne. Une fois le flottant défini, la hauteur et la largeur peuvent être définies

Normalement, la hauteur ne peut pas être définie. La largeur peut être définie, mais seule la partie texte

répond à la souris. Si float:left est ajouté, la hauteur et la largeur peuvent être définies. Le bloc entier répond à la souris, mais c'est une horizontale. menu,

Set display:inline; cette propriété peut résoudre le fameux problème de double bordure flottante d'IE. ↓(Il semblerait que ce problème n'existe que dans IE6 ?)

http://www.zzzszy.com/a/2016/0927/896160.html

élément de bloc

élément en ligne

块元素(block element)

内联元素(inline element)

* address - 地址 * blockquote - 块引用 * center - 举中对齐块 * dir - 目录列表 * p - 常用块级容易，也是css layout的主要标签 * dl - 定义列表 * fieldset - form控制组 * form- 交互表单 * h1 - 大标题 * h2 - 副标题 * h3 - 3级标题 * h4 - 4级标题 * h5 - 5级标题 * h6 - 6级标题 * hr - 水平分隔线 * isindex - input prompt * menu - 菜单列表 * noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容 * noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容） * ol - 排序表单 * p - 段落 * pre - 格式化文本 * table - 表格 * ul - 非排序列表

* a - 锚点 * abbr - 缩写 * acronym - 首字 * b - 粗体(不推荐) * bdo - bidi override * big - 大字体 * br - 换行 * cite - 引用 * code - 计算机代码(在引用源码的时候需要) * dfn - 定义字段 * em - 强调 * font - 字体设定(不推荐) * i - 斜体 * img - 图片 * input - 输入框 * kbd - 定义键盘文本 * label - 表格标签 * q - 短引用 * s - 中划线(不推荐) * samp - 定义范例计算机代码 * select - 项目选择 * small - 小字体文本 * span - 常用内联容器，定义文本内区块 * strike - 中划线 * strong - 粗体强调 * sub - 下标 * sup - 上标 * textarea - 多行文本输入框 * tt - 电传文本 * u - 下划线 * var - 定义变量

* adresse - adresse * blockquote - citation de bloc * centre - bloc d'alignement central * dir - Liste des répertoires* p - Le niveau de bloc couramment utilisé est facile, et c'est aussi la balise principale de la mise en page CSS* dl - Liste de définitions* champs - groupe de contrôle de formulaire* formulaire - formulaire interactif* h1 - grand titre *h2 - sous-titre * h3 - titre niveau 3 * h4 - titre niveau 4 * h5 - titre niveau 5 * h6 - Niveau 6 titre * hr - Ligne de séparation horizontale * isindex - invite de saisie* menu - Liste de menus * noframes - cadres facultatifs Contenu, ( ce contenu de bloc est affiché pour les navigateurs qui ne prennent pas en charge le frame * noscript -) Contenu de script facultatif (ce contenu est affiché pour les navigateurs qui ne prennent pas en charge le script) * ol - formulaire trié* p - paragraphe* texte pré-formaté* tableau - tableau* ul - liste non triée

* a - ancre* abbr - abréviation* acronyme - mot initial* b - gras (non recommandé) * bdo - remplacement du bidi* big - grande police * br - ligne pause* citer - référence* code - code informatique (obligatoire lors de la citation du code source)* dfn - définir le champ * em - accent * police - paramètre de police (non recommandé) * i - italique * img - image* saisie - zone de saisie* kbd - définir le texte du clavier * étiquette - étiquette du tableau * q - courte citation * s - trait de soulignement (non recommandé) * samp - définition exemple de code informatique* select - sélection d'éléments* petit - texte en petite police* span - conteneur en ligne couramment utilisé, définissant le bloc de zone de texte interne* strike - tiret * fort - accent gras * sub - indice * sup - exposant * textarea - saisie de texte sur plusieurs lignes box* tt - texte télex* u - souligner

* var - définir des variables

4. Éléments variables

Les éléments variables déterminent si l'élément est un élément de bloc ou un élément en ligne en fonction du contexte. .

* applet - applet java

* bouton - bouton

* del - supprimer le texte

* iframe - cadre en ligne

* ins - texte inséré

* carte - bloc image (carte)

* objet - objet objet

* script - script client

5, display: inline-block;

Maintenir la largeur et la hauteur des éléments au niveau du bloc, mais ils peuvent également être combinés avec d'autres éléments en ligne comme les éléments en ligne Place sur une seule ligne.

2. Modèle de boîte

3.

Positionnement relatif : fait référence au positionnement par rapport à d'autres positions d'éléments définies dans le flux de documents.

static (valeur par défaut) : Si vous utilisez la valeur par défaut, les index top, left, right, bottom.z définis pour l'élément en CSS ne prendront pas effet.

relatif : Déplacement par rapport à l'élément lui-même.

Positionnement absolu : rompra avec le flux normal de documents et n'occupera plus d'espace.

absolu : Positionnement absolu par rapport à un élément parent qui n'est pas statique Si la position de l'élément parent n'est pas précisée, le positionnement absolu sera absolu par rapport à l'ensemble du document HTML. Il sera affiché en premier dans les éléments positionnés et les éléments flottants du flux de documents normal.

fixe : Positionné par rapport à la fenêtre du navigateur, l'élément reste toujours à une certaine position sur l'écran, quelle que soit la manière dont la page Web défile.

Flotteur : flotteur

Hors flux de documents - Position par rapport à la taille de l'élément parent. Si la largeur de l'élément parent est de 100 et celle des deux éléments enfants de 200 respectivement, il sera toujours affiché sous forme de hiérarchies supérieure et inférieure au lieu de gauche et de droite.

Boîte extérieure - sera affichée en premier dans les éléments de positionnement du flux de documents normal. Boîte intérieure - plus faible que les éléments de niveau bloc, plus forte que les éléments en ligne

Point clé ! La relation d'affichage entre les éléments de positionnement et le flux de documents

1. La relation d'affichage entre les cases internes et externes entre le flux de documents normal :

代码结构如下（粗略展示）<p>黄色块正方形
　　<p>红色块</p>　　<p>红色块</p></p><p>蓝色块正方形</p>

Les jaunes et bleus sont les flux de documents externes, et les rouges sont les deux flux de documents internes du bloc jaune.

La boîte extérieure est un flux de documents externe, et la boîte intérieure a son propre flux de documents n'interfèrent pas les uns avec les autres, mais le flux de documents externe (et non son propre élément parent) sera affiché en premier sur le flux de documents interne.

2. La relation entre les éléments flottants internes de la boîte et les éléments internes du flux de documents :

• éléments en ligne et Priorité des éléments flottants :

Dans le flux de documents normal, les éléments

Cependant, lorsqu'il est défini sur un élément flottant, le document flow Les éléments liés cèdent la place aux éléments flottants (le résultat de la définition de avant

est le même). Comme suit :

Il y aura également un habillage du texte :

• Priorité des éléments au niveau du bloc et des éléments flottants

Quand Lorsqu'un élément de niveau bloc est défini avant un élément flottant, l'élément flottant s'enroule après lui. Lorsque l'élément flottant est défini en premier, il est séparé du flux de documents et n'affecte pas les éléments de niveau bloc du flux de documents normal.

3. La relation entre les éléments flottants de la boîte interne et les éléments internes du flux de documents externe :

Les éléments flottants couvrent les éléments du flux de documents externes, mais ne le font pas. occuper de l'espace.

Le bloc vert et l'image sont les éléments internes du bloc bleu. On peut voir que le niveau du bloc. les éléments sont affichés selon le flux de documents normal. Mais l'élément en ligne img cédera toujours la place aux éléments flottants, même s'il s'agit d'éléments flottants dans le flux de documents externe.

4. Relation prioritaire entre positionnement absolu et flottement des éléments frères

Bloc bleu Positionnez l'élément de manière absolue pour le bloc intérieur jaune et définissez p avant le bloc rouge. Le bloc rouge est un élément positionné en Float et est couvert par l'absolu.

5. La relation de priorité entre les éléments de positionnement absolu et le flux de documents et la relation de priorité entre les éléments de positionnement relatif

Position de positionnement absolu : absolue.

1, effectuez un positionnement absolu par rapport à un élément parent qui n'est pas statique. Si la position de l'élément parent n'est pas spécifiée, Absolute effectuera un positionnement absolu par rapport à l'ensemble du document HTML.

2. Si topleftbottomright n'est pas défini, ses côtés supérieur et gauche seront cohérents avec la position du flux de documents d'origine (c'est-à-dire qu'il sera le même que si la position n'était pas définie), mais ce sera le cas. couvrir les éléments flottants internes excédentaires du flux documentaire externe.

L'image ci-dessous montre la position de réglage du bloc bleu : absolu;

(Remarque : le bloc jaune (contient des sous-éléments rouges et verts ) et Le bloc bleu (contenant des sous-éléments verts) est un élément frère)

Changez l'ordre. Le bloc bleu définit d'abord p et la position sur absolus. Le bloc jaune n'a pas de position définie, ce qui signifie qu'il est statique par défaut. Parce qu'ils sont séparés du flux de documents, les éléments absolus sont affichés en premier.

Réglez la position du bloc jaune sur relative, et le bloc jaune couvre l'absolument élément positionné. Autrement dit, lorsqu'un élément positionné de manière relative est positionné après un élément positionné de manière absolue, l'élément positionné de manière relative est affiché en premier.

Résumé :

1, flux de documents normal, priorité boîte externe Affiché dans la boîte intérieure de l'élément précédemment défini (sera écrasé en cas de dépassement). Les éléments de niveau bloc et les éléments en ligne ne seront pas sur la même ligne.

 

2. Pour les flux documentaires internes et externes, les éléments flottants sont séparés du flux documentaire, et les éléments définis en premier sont affichés selon le flux documentaire normal (place au bloc level, squeeze out inline) , ce qui n'affecte pas la disposition des éléments définis ultérieurement, mais affecte l'affichage des éléments en ligne dans le flux normal du document. Les éléments en ligne seront toujours "évincés" par les éléments flottants (peu importe où ils sont en ligne). les éléments sont, ils ne seront pas écrasés) Sous les éléments flottants)

3. Les éléments positionnés de manière absolue sont affichés en premier sur les éléments flottants.

 

4, les éléments positionnés de manière absolue qui ne définissent pas de valeur spécifique seront disposés selon le flux de documents normal, mais seront séparés du flux de documents et n'affecteront pas le éléments définis ultérieurement.

5, si l'élément frère est défini sur position:relative; lorsqu'il est défini avant l'élément positionné de manière absolue, l'élément positionné de manière absolue sera affiché en premier sur l'élément positionné de manière relative.

Lorsqu'il est défini après un élément en position absolue, l'élément en position relative a priorité sur l'élément en position absolue.

4. Comment centrer l'alignement

Centrage horizontal :

1. Implémentation Centrage des éléments en ligne. Méthode : Ajouter : text-align:center;

2. Pour obtenir un centrage horizontal des éléments de niveau bloc dans le style de l'élément de bloc en dehors de l'élément en ligne.

Méthode 1 : margin:0 auto;

Remarque : Si l'élément de niveau bloc est un élément enfant direct du corps et que la largeur ne l'est pas défini, la valeur par défaut est 100% , aucun effet n'est visible ; si la hauteur n'est pas définie et qu'il n'y a pas de contenu dans p, la hauteur par défaut est 0. Par conséquent, assurez-vous de définir simultanément la largeur et la hauteur des éléments au niveau du bloc pour voir l’effet. Cette méthode peut également être utilisée si un autre p dans un p veut être centré, car la marge à ce moment est relative à son élément parent.

　

　Méthode 2 : Utiliser le positionnement absolu et les marges négatives.

Position:absolute;

left:50%; ——Déplacer 50% de la largeur vers la gauche par rapport à l'élément parent La moitié de sa propre largeur

Centrage vertical

1. Centrage vertical des éléments en ligne

　

Méthode 1 :

Centrez la police verticalement et définissez la hauteur de ligne à la hauteur de l'élément parent. 　

Méthode 2 :

Définissez le remplissage pour le centrer verticalement.

Méthode 3 :

Définissez la hauteur de ligne sur l'élément parent et définissez vertical-align:middle sur l'élément en ligne.

2. Centrage vertical des éléments au niveau du bloc.

　

Méthode 1 :

Utiliser le positionnement absolu et les marges négatives.

Méthode 2 :

Ajoutez display:flex;align-items:center; à l'élément parent pour obtenir un centrage vertical.

Réaliser un centrage horizontal et vertical

Méthode 1 :

Utiliser le positionnement absolu et les marges négatives

Méthode 2 :

Utilisez display: flex　　　Ajoutez display: flex; align-items:center pour obtenir un centrage vertical et justifier-content:center pour obtenir un centrage horizontal

dans le style de l'élément parent.

Méthode 3 :

Utilisez également display:flex.Définissez display:flex dans l'élément parent ; définissez margin:auto dans l'élément enfant.

Méthode 4 :

Utiliser l'attribut CSS3 - fonction de transformation translation() position : top : 50 % ; gauche : 50 % ; (-50%,-50%);

5. À propos de l'héritage de style

Les styles de modèle de boîte ne sont pas héritables, comme la largeur et la hauteur (largeur et hauteur) , border (border), margin (margin), padding (padding) et background, etc.

l'alignement vertical n'est pas héritable

attributs hérités

couleur

curseur

direction

police

espacement des lettres

hauteur de ligne

liste- style

text-align

text-indent

text-shadow

text-transform

whitewhite-space

saut de mots

espacement des mots

retour à la ligne

mode d'écriture

Plus d'informations sur l'utilisation du CSS pour mise en page rapide — Pour les éléments de mise en page détaillés, veuillez faire attention au site Web PHP chinois pour les articles connexes !