Maison > interface Web > tutoriel CSS > Comment utiliser CSS pour une mise en page rapide (1) - éléments de mise en page en détail

Comment utiliser CSS pour une mise en page rapide (1) - éléments de mise en page en détail

高洛峰
Libérer: 2017-02-22 13:25:45
original
1491 Les gens l'ont consulté

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 semble que ce problème n'existe que dans IE6 ?)

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

source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal