Plusieurs propriétés de CSS display, float, clear, overflow, visibilité-tutoriel CSS-php.cn

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 :

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!