Plusieurs propriétés de CSS display, float, clear, overflow, visibilité

http://colobu.com/2014/08/28/CSS-display-float-clear-overflow-visibility/

attribut d'affichage : block/inline/none

affichage :block (la fonction est d'afficher l'étiquette d'attribut de ligne comme étiquette d'attribut de bloc, et la largeur et la hauteur peuvent être définies
display: inline (la fonction est d'afficher l'étiquette d'attribut de bloc comme étiquette d'attribut de ligne), et la largeur et la hauteur de l'étiquette d'attribut de bloc ne peuvent pas être définies pour le moment) ; La différence entre display:none et display:none est que ce dernier n'occupera pas cette position et que l'élément suivant la couvrira directement, tandis que le premier occupera cette mise en page, mais n'affichera pas le contenu et est vide ; et lors du téléchargement, display:none Les éléments qui ne sont pas affichés ne seront pas téléchargés, mais visibilité : caché téléchargera les éléments qui ne sont pas affichés

float (flottant, toujours soumis aux restrictions de flux de documents) peut être défini après l'étiquette de la ligne float. Sa largeur et sa hauteur

float : none/left/right

aucun : L'objet ne flotte pas

gauche : flotter à gauche

droite : flotter à droite

clear(
Effacer les flotteurs

)

clear : les deux/aucun/gauche/droiteaucun : flottant les objets sont autorisés des deux côtés

les deux : les objets flottants ne sont pas autorisés

gauche : non autorisé Il y a des objets flottants à gauche
droite : les objets flottants à droite ne sont pas autorisés

débordement (débordement)

débordement : visible/auto/caché/scroll

visible : le contenu n'est pas coupé Ne pas ajouter de barre de défilement

auto : attribut par défaut

masqué : masquer le contenu en excès
scroll : Toujours afficher la barre de défilement

visibilité (visuelle)

visibilité : hériter/visible/caché

hériter : hériter de la visibilité de l'objet parent précédent

visible : objet visible

caché : Objet caché

Différences dans plusieurs formats d'image :

gif : Translucide n'est pas pris en charge

jpg : Transparent est pris en charge

png : Transparent est partiellement pris en charge et nécessite des traitement

==============

http://www.studyofnet.com/news/398.html

1. Éléments de niveau bloc : élément de bloc

chacun Par défaut, les éléments de niveau bloc occupent une ligne de hauteur une fois qu'un élément de niveau bloc est ajouté à une ligne. , d'autres éléments ne peuvent pas être ajoutés (sauf après float). Lorsque deux éléments de niveau bloc sont modifiés en continu, ils seront automatiquement renvoyés à la ligne et affichés sur la page. Les éléments de niveau bloc peuvent généralement imbriquer des éléments de niveau bloc ou des éléments en ligne ;

Les éléments de niveau bloc apparaissent généralement comme des conteneurs pour organiser les structures, mais ce n'est pas toujours le cas. Certains éléments de niveau bloc, tels que

, ne peuvent contenir que des éléments de niveau bloc. D'autres éléments de niveau bloc peuvent contenir des éléments de niveau ligne tels que

. D'autres peuvent contenir à la fois des éléments de niveau bloc et de niveau ligne.

p est l'élément de niveau bloc le plus couramment utilisé, et le style d'élément display:block est composé de tous les éléments de niveau bloc. Ils sont toujours exprimés sous la forme d'un bloc et sont disposés verticalement en séquence avec les blocs frères du même niveau, remplissant les côtés gauche et droit.

2. Élément en ligne : élément en ligne

est également appelé

en ligne Éléments

, éléments en ligne, etc. ; les éléments en ligne sont généralement basés sur des éléments de base au niveau sémantique et ne peuvent accueillir que du texte ou d'autres éléments en ligne. L'élément en ligne commun "a" est commun. Par exemple, les éléments SPAN, IFRAME et element style display: inline sont tous des éléments en ligne. Par exemple, des éléments tels que le texte sont disposés horizontalement entre les lettres et reviennent automatiquement à l'extrémité droite.

3. Caractéristiques de l'élément de bloc

①, toujours sur une nouvelle ligne Démarrer


②, la hauteur, la hauteur de la ligne, les marges et le remplissage peuvent tous être contrôlés


③, la largeur par défaut est de 100 % de son conteneur, sauf si vous définissez une largeur.


④. Il peut accueillir des éléments en ligne et d'autres éléments de bloc

4. Caractéristiques des éléments en ligne

. ①, et d'autres éléments sont sur la même ligne


②, la hauteur, la hauteur de la ligne, les marges et le remplissage ne peuvent pas être modifiés


③ ; . La largeur est la largeur de son texte ou de son image et ne peut pas être modifiée

④ Les éléments en ligne ne peuvent accueillir que du texte ou d'autres éléments en ligne

Pour les éléments en ligne. éléments, veuillez noter ce qui suit :

La définition de la largeur de la largeur n'est pas valide.
Le réglage de la hauteur n'est pas valide et peut être défini via la hauteur de la ligne.
Le réglage de la marge n'est valable que pour les marges gauche et droite, pas pour le haut et le bas.
Le réglage du remplissage n'est valable que pour le remplissage gauche et droit, pas pour le haut et le bas. Notez que la portée de l'élément est augmentée, mais le contenu autour de l'élément n'est pas affecté.

5. Éléments de bloc communs

adresse – adresse

• blockquote - block quote

• center - bloc d'alignement central

• dir - liste du répertoire

• p - Le niveau de bloc couramment utilisé est facile, et c'est également la balise principale de la mise en page CSS

• dl - Liste de définitions

• champset – groupe de contrôle de formulaire

• formulaire – formulaire interactif

• h1 – titre

• h2 – Sous-titre

• h3 – Titre niveau 3

• h4 – Titre niveau 4

• h5 – Titre de niveau 5

• h6 – Titre de niveau 6

• hr – Ligne de séparation horizontale

• isindex – invite de saisie

• menu – liste de menus

• noframes – encadre le contenu facultatif (ce bloc est affiché pour les navigateurs qui le font ne prend pas en charge le contenu des frames

• noscript – contenu de script facultatif (afficher ce contenu pour les navigateurs qui ne prennent pas en charge le script)

• ol – formulaire commandé

• p – paragraphe

• texte pré-formaté

• tableau – tableau

• ul – Liste non ordonnée

6. Éléments en ligne communs

• a – Ancre

• abbr – Abréviation

• acronyme – Premier mot

• b – gras (non recommandé)

• bdo – remplacement du bidi

• big – grande police

• br – Saut de ligne

• cite – Citation

• code – Code informatique (lors de la citation du code source obligatoire)

• dfn – champ de définition

• em – emphase

• 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 - citation courte

• s - tirets (non recommandé)

• samp - définir un exemple de code informatique

• sélectionner – sélection d'éléments

• small – texte en petite police

• span – conteneur en ligne couramment utilisé, définissant des blocs dans le texte

• grève – barré

• fort – accent gras

• sous – indice

• sup – exposant

• textarea – zone de saisie de texte multiligne

• tt – texte télex

• u – souligner

7. Quelle est la différence entre les éléments en ligne et les éléments de niveau bloc ?

Différence 1 :

Niveau de bloc : Les éléments de niveau bloc occuperont automatiquement une ligne par défaut. remplir la largeur de son élément parent

Inline : Les éléments en ligne n'occuperont pas une seule ligne et les éléments en ligne adjacents seront disposés sur la même ligne. Sa largeur change avec le contenu.

Différence 2 :

Niveau de bloc : Les éléments de niveau bloc peuvent définir la largeur et la hauteur

Inline : La largeur et la hauteur des éléments en ligne ne peuvent pas être définies

Différence trois :

Niveau de bloc : Les éléments au niveau du bloc peuvent définir la marge, le rembourrage

inline : margin-left dans la direction horizontale de l'élément en ligne margin-right ; -left; padding- right peut prendre effet. Mais le margin-bottom; margin-top; padding-bottom;

Différence quatre :

Niveau de bloc : affichage:bloc;

en ligne :display:inline;

Vous pouvez changer d'éléments de niveau bloc et d'éléments en ligne en modifiant l'attribut d'affichage



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!