Maison  >  Article  >  interface Web  >  Notes du cinquième jour HTML5

Notes du cinquième jour HTML5

黄舟
黄舟original
2016-12-28 17:17:021209parcourir

Propriétés CSS

Propriétés du paragraphe

letter-spacing:10px; la distance entre les mots

word-spacing:1px la distance entre les mots (principalement utilisé en anglais; sites Web)

text-transform:capitalize (mettre en majuscule la première lettre de chaque mot) majuscule (tout en majuscules) minuscule (tout en minuscules) (Principalement utilisé sur les sites Web en anglais)

espace blanc :normal /nowrap (pas de saut de ligne)

Modèle de boîte

Toutes les balises sont traitées comme une boîte

Traitez les éléments au niveau du bloc comme une grande boîte et en ligne L'élément est ; vu comme une petite boîte

De quelles parties se compose l'incarnation d'un modèle de boîte ?

largeur hauteur (largeur et hauteur du contenu) remplissage (marge intérieure/remplissage intérieur) bordure (bordure) marge (marge extérieure)

bordure : (bordure)

bordure -top :

border-bottom :

border-left :

border-right :

border-bottom : (bordure inférieure)
border-bottom-style : plein (ligne continue) pointillé (ligne pointillée) pointillé (ligne pointillée) double (double ligne continue) style de ligne de bordure

border-bottom-color : rouge/# fff ; La couleur de la bordure

border-bottom-width:3px;L'épaisseur de la bordure

border:3px rouge uni;

border:none/0;

border-top:none/0;

border-collapse:collapse (supprimer les bords en double)

padding : (marge intérieure, remplissage intérieur, remplissage intérieur) distance du contenu à border Relative

padding-top:

padding-left:

padding-right:

padding-bottom:

(padding affectera la largeur et la hauteur de la boîte)

padding:10px (haut, bas, gauche et droite)

padding:10px 20px (haut, bas, gauche et droite)
rembourrage : 10px 20px 30px ; (en haut à droite en bas) Gauche = Droite "Suivez le principe du sens des aiguilles d'une montre"

rembourrage : 10px 20px 30px 40px (en haut à droite, en bas à gauche)

padding: 0 0 5px 0; (ne peut être écrit que comme ceci)

margin : (marge, padding) la distance entre les étiquettes
relative

les marges supérieure et inférieure des éléments en ligne ne peuvent pas être atteint

marges supérieure et inférieure des éléments au niveau du bloc L'espacement ne peut pas être accumulé et ne peut prendre que la valeur maximale

Les marges sur les côtés gauche et droit des éléments en ligne et au niveau du bloc sont valeurs cumulées

Les marges n'affecteront pas la largeur et la hauteur de la boîte

margin:10px (haut, bas, gauche et droite)

margin:10px 20px; haut, bas, gauche et droite)

margin:10px 20px 30px; (haut, droite, bas) left=right "Suivez le principe du sens des aiguilles d'une montre"

margin: 10px 20px 30px 40px; en haut à droite, en bas à gauche)

marge : 0 0 5px 0; (ne peut s'écrire que comme ceci)

Taille réelle d'une boîte :

Largeur : la largeur de la bordure du contenu (largeur) (gauche et droite) le remplissage ((gauche et droite) la marge (gauche et droite)

Hauteur : la hauteur de la bordure du contenu (hauteur) (haut et bas) le remplissage (haut et bottom) margin( Top et bottom)

Application des marges : Centrer la boite dans le navigateur, dans la méthode de centrage de l'élément parent

margin:0 auto;

Nouveaux attributs en CSS3

box-sizing:border-box/content-box Ignorer les valeurs de border et padding

Ce qui précède est le contenu des notes du cinquième jour de HTML5 . Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

Déclaration:
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
Article précédent:Notes du troisième jour HTML5Article suivant:Notes du troisième jour HTML5