Modele de boite css

Donc, j`ai créé une page HTML très simple avec un seul élément div. div est un élément de niveau bloc. Donc, il va prendre en charge toutes les propriétés CSS du modèle de boîte. Pour sa nature, l`élément de niveau Inline traite certains aspects du modèle de boîte un peu différemment de l`élément de niveau bloc. Je mentionnerai ces exceptions en cours de route. Alors, faites attention à ça. À ce stade, nous allons sauter dans une section d`apprentissage actif et effectuer quelques exercices pour illustrer certains des détails du modèle de boîte que nous avons discuté ci-dessus. Vous pouvez essayer ces exercices dans l`éditeur en direct ci-dessous, mais il pourrait être plus facile de voir certains des effets si vous créez des fichiers HTML et CSS distincts localement et essayez-le dans une fenêtre de navigateur distincte à la place. Vous pouvez trouver l`exemple de code sur GitHub. Ce chapitre couvre les composants principaux du modèle de boîte CSS: Padding, bordures, marges, blocs et boîtes en ligne.

Vous pouvez considérer cela comme la vue «micro» des dispositions CSS, car il définit le comportement individuel des boîtes. Dans les prochains chapitres, nous allons en apprendre davantage sur la façon dont la structure HTML et le modèle de boîte CSS se combinent pour former toutes sortes de mises en page complexes. Le modèle de boîte de CSS est le fondement de la mise en page sur le Web-chaque élément est représenté comme une boîte rectangulaire, avec le contenu de la boîte, le rembourrage, la bordure et la marge construites autour les uns des autres comme les couches d`un oignon. Comme un navigateur rend une mise en page Web, il fonctionne sur ce que les styles sont appliqués au contenu de chaque boîte, la taille des couches d`oignon environnants sont, et où les cases sont assis par rapport à l`autre. Avant de comprendre comment créer des mises en page CSS, vous devez comprendre le modèle de boîte, c`est ce que nous allons examiner dans cet article. C`est probablement un très bon article. Mais je suis à la recherche d`un qui traite de la façon d`utiliser ces divs stupide. C`est, je ne les vois pas comme des boîtes du tout, je suis un graphiste. Il est facile de dessiner des boîtes rondes, même circulaires. L`idée du modèle de boîte est simplement de définir un espace, un espace qui peut être rond. Le nom même, modèle de boîte, est très contre-productif. Le «modèle de boîte de CSS» est un ensemble de règles qui déterminent les dimensions de chaque élément dans une page Web.

Il donne à chaque boîte (Inline et bloc) quatre propriétés: vous devez avoir remarqué que la largeur totale d`une boîte est la somme de sa largeur, padding-right, padding-left, border-right, et border-left propriétés. Dans certains cas, il est ennuyeux (par exemple, si vous voulez avoir une boîte avec une largeur totale de 50% avec la bordure et le rembourrage exprimés en pixels?) Pour éviter de tels problèmes, il est possible de modifier le modèle de boîte avec le dimensionnement de la boîte de propriétés. Avec la valeur border-Box, il modifie le modèle de boîte à ce nouveau: Permettez-moi de répéter: tout ce que vous voyez sur le Web est un rectangle. Vous devez vous souvenir de cela tout en concevant tout autant que vous avez besoin de se rappeler de respirer pendant que vous dormez. Ne vous inquiétez pas si ma métaphore n`a pas de sens, le modèle de boîte sera. C`est donc le modèle de boîte. Je sais, tous ces chiffres et captures d`écran causé un peu de temps de chargement supplémentaire et consommé quelques octets supplémentaires de vos données, mais j`espère vraiment qu`ils vous ont aidé à comprendre les concepts clés. Merci de rester avec moi jusqu`à la fin. J`espère que ça valait le coup. Je suis un débutant moi-même et je sais comment il se sent quand rien ne semble avoir de sens. Ne soyez pas fâché si vous ne compreniez pas tout sur le modèle de boîte de CSS.

Essayez de créer quelque chose, de lire à nouveau, faire beaucoup d`erreurs et, finalement, tout va commencer à faire sens. Tous les éléments HTML peuvent être considérés comme des boîtes. Dans CSS, le terme «modèle de boîte» est utilisé lorsque l`on parle de conception et de mise en page. Les neurosciences modernes ont découvert que l`analogie et le rappel sont deux des moyens les plus efficaces pour apprendre de nouvelles choses de la meilleure façon. Avec cela à l`esprit, j`ai volé cette image de Google images pour vous de pratiquer sur le modèle de boîte de CSS. Je pense que je devrais vérifier ce Firebug qui semble être mentionné partout, j`aime les fonctions dans la barre d`outils du développeur Web, et n`a pas vu la nécessité de vérifier Firebug.