Comment utiliser CSS pour une mise en page rapide (1) - é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 semble que ce problème n'existe que dans IE6 ?)

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