Introduction détaillée aux propriétés communes de CSS div

Cet article partage une introduction détaillée aux attributs couramment utilisés de css div

css

Sélecteur de caractères génériques *{}

Sélecteur de balises p{}

Sélecteur d'ID #ID{}

Sélecteur de classe.class{}

contient le sélecteur p a{}　a balise dans p

Sélecteur de groupe p, p{} balise p et balise p

affichage Spécifie l'élément de type bloc de boîte d'élément, aucun élément n'est affiché, inineélément en ligne Cela c'est-à-dire des éléments en ligne, des éléments de bloc en ligne noirs en ligne.

visibilité Spécifie si l'élément est visible, caché est invisible, hérite hérite de l'élément parent

La différence entre disalay et visibilité utilisée pour hide est display Il ne prend pas de place après avoir été masqué

débordement Que se passe-t-il lorsque le contenu déborde est visible et n'est pas coupé, et est présenté en dehors de la fenêtre de l'élément et du contenu masqué. est masqué, le défilement ajoute toujours des barres de défilement, auto Automatique, trim ajoute une barre de défilement et hérite de l'élément parent.

curseur Forme du curseur

flotteur Bloc-flotteur

espacement des lettres Espacement des lettres

line-height Line height height définit la hauteur du bloc entier, tandis que line-heught définit la hauteur de ligne du texte. Si une ligne est définie sur 30px, le texte sera relatif vertical. à ce 30px centré.

border-collapse Chevauchement des bordures du tableau

font-weight Définir l'épaisseur du texte

text- decoration Modification du texte

font-family Spécifie la police de l'élément

text-align L'alignement du texte en bloc est défini pour les éléments tels que le texte et les images. Lors de l'attente d'éléments en ligne, le centrage horizontal est obtenu en définissant text-align:center sur l'élément parent.

clear Les valeurs possibles sont gauche, droite, les deux. Les objets flottants ne sont pas autorisés sur les côtés gauche et droit de l'objet

z. -index Les valeurs possibles sont auto/ number, plus le nombre est grand, plus il est en avant, et il peut être négatif.

position La valeur de positionnement est un positionnement absolu. Absolu signifie que l'objet est hors du flux de documents. Il est positionné en fonction du coin supérieur gauche du navigateur ou de l'élément parent avec positionnement. fonctionne comme l'origine des coordonnées,

La valeur est un positionnement relatif. Relatif représente la position de l'objet actuel dans un flux de document pour localiser le point d'origine de la coordonnée. Après le positionnement, il est fixé dans la fenêtre et le fait. ne pas faire défiler avec la barre de défilement

ol　Ordered

ul　Unordered

list-style-type　none n'affiche pas les puces

list-style-image URL image de la liste

: lien Lien non visité

: visité Lien visité

: survol Élément sur lequel survole la souris

: actif L'élément activé (c'est-à-dire le élément cliqué)

css3

border-radius　Border arrondi coins Border-radius:5px 10px 15px 20px Représente respectivement le rayon du coin supérieur gauche, du coin supérieur droit, du coin inférieur droit et du coin inférieur gauche ; Si deux valeurs sont spécifiées pour border-radius, alors la première valeur est le coin supérieur gauche et le coin inférieur droit, et la deuxième valeur est le coin supérieur droit et le coin inférieur gauche. Si vous spécifiez trois valeurs, la première valeur correspond au coin supérieur gauche, la deuxième valeur correspond aux coins supérieur droit et inférieur gauche et la troisième valeur correspond au coin inférieur droit.

box-shadow Utilisé pour ajouter une ombre box-shadow : 10px 10px 5px blue ; le premier est la distance de mouvement horizontal, le deuxième est la distance de mouvement vertical, le troisième est la distance de flou et le quatrième est la distance de mouvement horizontal. couleur de l'ombre.

border-image　

background-image

background-size　 Lors de la définition de la taille de l'image, vous devez définir la hauteur et la largeur de p, sinon l'image ne sera pas affiché, background-size:50px 100px peut être un pourcentage, c'est-à-dire le pourcentage de l'élément parent.

backgrond-origin Définit la position de l'image d'arrière-plan sur padding-box par défaut ; border-box commence à partir du calque le plus externe, content-box commence à l'intérieur

background-clip　Coupe l'arrière-plan à la position spécifiée par rapport au précédent. L'ombre de la boîte est la même que

linear-gradient background:-moz-linear-gradient(red,blue); webkit-linear-gradient(right,red,blue) ;Syntaxe standard de gauche à droite vers droite 45deg pointe vers le coin supérieur droit, 90deg pointe vers l'arrière-plan droit :-o-linear-gradient(50deg, red, blue); Spécifiez n’importe quel angle.

linear-gradient Color transparence rgba(255,0,0,0.7); La dernière valeur de rgba représente l'opacité : 0 signifie complètement transparent, 1 signifie complètement opaque.

text-shadow L'ajout d'une ombre au texte est la même chose que l'utilisation de box-shadow

white-space Spécifie comment gérer les espaces dans l'élément. Normal (par défaut) compresse les espaces, pré-conserve tous les espaces et ne casse jamais les lignes, nowrap compresse les espaces, ne s'enroule pas, pré-envelopper conserve les espaces, s'enroule normalement, pré-ligne compresse les espaces, enveloppe, hérite.

text-overflow　Comment afficher le contenu lorsque le texte déborde

word-wrap　Autoriser les mots à revenir à la ligne lorsqu'ils sont très longs word-wrap:break-word;

word- break　Fonction Comme ci-dessus, si la valeur de l'attribut est tout garder, tous les mots seront complets, et si la valeur de l'attribut est tout casser, tous les mots qui dépassent la limite seront brisés.

p

Modèle de boîtep est très important (non-sens) donc les éléments suivants sont très importants (des photos ont été trouvées en ligne)

en haut à droite en bas à gauche représentent respectivement le positionnement en haut, à droite, en bas et à gauche. Cet ordre étrange est dû à un réglage étrange du CSS. Tous les attributs qui ne spécifient pas de direction sont dans cet ordre,

.

margin 　　　 Les marges verticalement adjacentes des éléments au niveau du bloc fusionneront, tandis que les éléments en ligne n'occupent en fait pas les marges supérieure et inférieure. Les marges des éléments flottants ne sont pas non plus fusionnées. Permet de spécifier des valeurs de marge négatives.

border Border Par exemple, border-width : 10px 5px 1px 20px signifie que la bordure supérieure est de 10 pixels, la bordure droite est de 5 pixels, la bordure inférieure est de 1 px et la bordure gauche est de 20px.

padding　Padding　　S'il y a deux valeurs, la première valeur est haut et bas, et la deuxième valeur est gauche et droite. S'il y a trois valeurs, la première valeur est en hausse, la deuxième valeur est à gauche et à droite et la troisième valeur est en baisse.

hauteur largeur　 La hauteur et la largeur du contenu interne

marge Les éléments de bloc à largeur fixe peuvent être centrés en définissant la valeur "marge gauche et droite" sur "auto ".

La largeur par défaut du calque p est de 100%

Ce n'est qu'après avoir déterminé la largeur que vous pouvez utiliser l'attribut float pour dériver

Lorsque le calque est défini avec float, dans Le calque utilisé ensuite sera affecté par la dérive et doit être défini avec clear

Lors de la définition du positionnement absolu à l'intérieur du calque, vous devez d'abord définir le positionnement relatif dans l'objet parent, sinon le le positionnement absolu sera basé sur l'objet parent du corps

.

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!