Propriétés du modèle de boîte de mise en page CSS

Cette fois, je vais vous apporter l'attribut box model de la mise en page CSS, quelles sont les notes de l'attribut box model de la mise en page CSS, ce qui suit est un cas pratique, commençons jetez un oeil.

largeur/hauteur

En CSS, vous pouvez définir une hauteur explicite pour n'importe quel élément au niveau du bloc.

Si la hauteur spécifiée est supérieure à la hauteur requise pour afficher le contenu, la hauteur excessive créera un effet visuel, comme s'il y avait un rembourrage supplémentaire

Si la hauteur spécifiée est inférieure à ; la hauteur requise pour afficher le contenu, en fonction de l'attribut overflow, la barre de défilement doit être définie sur overflow:auto.

auto

La largeur, la hauteur et la marge peuvent être définies sur auto. Pour les éléments de niveau bloc, si la largeur est définie sur auto, elle sera aussi large que possible. Plus précisément, element width = contenant la largeur du bloc - marge horizontale de l'élément - largeur de la marge horizontale de l'élément - remplissage horizontal de l'élément

Si la hauteur est définie sur auto, elle sera aussi étroite que possible ; En détail, element height = height juste assez pour contenir son contenu en ligne

[Note] Si la hauteur du bloc conteneur n'est pas explicitement déclarée, le pourcentage de hauteur de l'élément sera réinitialisé à auto

【Largeur et hauteur maximales et minimales】

min-width | min-height

　Valeur initiale : 0

Appliquer à : éléments de niveau bloc et éléments de remplacement

Pourcentage : par rapport à la largeur (hauteur) du bloc contenant

max-width | max-heightt

Valeur initiale : aucune

Appliquer à : éléments de niveau bloc et élément de remplacement

Pourcentage : par rapport à la largeur (hauteur) du bloc contenant

[Note] Lorsque la largeur (hauteur) minimale est supérieure à la largeur maximale ( hauteur), la valeur de la largeur et de la hauteur minimales est Précise

rembourrage de la marge intérieure

Par rapport à d'autres attributs du modèle de boîte (tels que les marges négatives qui sont souvent utilisées dans le positionnement), le rembourrage semble tout à fait satisfaisant et n'a aucune compatibilité. Il n'y a pas de problèmes particuliers

Pour les éléments en ligne, le remplissage gauche est appliqué au début de l'élément, le remplissage droit est appliqué à la fin de l'élément et le remplissage vertical. n'affecte pas la hauteur de la ligne, mais cela s'affecte lui-même. La taille, ainsi que la couleur d'arrière-plan sont visibles

[Remarque] Le remplissage ne peut pas être négatif

remplissage

Valeur initiale : Indéfini

Pourcentage : par rapport à la largeur du bloc contenant

[50%]

Les éléments au niveau du bloc peuvent obtenir un effet carré grâce au remplissage : 50 %, car le les valeurs en pourcentage du remplissage horizontal et vertical sont relatives au bloc conteneur Déterminées par la largeur, souvent utilisées dans les images d'en-tête mobiles

Marge

Définition de la marge margin créera un espace blanc supplémentaire à l'extérieur de l'élément. Fait généralement référence à la zone où les autres éléments ne peuvent pas être placés, et l'arrière-plan de l'élément parent peut être vu dans cette zone

marge

Valeur initiale. : non défini

S'applique à : tous les éléments

Pourcentage : par rapport à la largeur du bloc conteneur

[Note] Pour les éléments ordinaires, le bloc conteneur est le niveau du bloc élément parent. Pour les éléments positionnés, le bloc conteneur est le parent de positionnement. Par conséquent, le pourcentage de marge des éléments ordinaires est relatif à la largeur de l'élément parent au niveau du bloc, le pourcentage de marge des éléments positionnés est relatif à la largeur du parent positionné

la marge peut être définie sur des valeurs négatives, la marge, la largeur et la hauteur prennent en charge automatiquement, et les marges ont des propriétés de chevauchement très étranges.

Présentation de plusieurs éléments clés des marges, notamment le chevauchement, les conditions automatiques et invalides

1 Chevauchement

[Prémisse]

Le chevauchement des marges s'appelle à nouveau la marge. fusion. Il y a deux conditions préalables pour que cela se produise

1. Cela ne se produit que sur les éléments de bloc (à l'exclusion des éléments float, absolus et inline-block)

2. Cela ne se produit que sur les éléments verticaux Direction. (quel que soit le mode d'écriture)

[Catégorie]

et chevauchement des marges

1. Éléments frères et sœurs adjacents

<style>
p{
    line-height: 2em;
    margin: 2px 0;
    
background-color
: lightblue;
    display:inline-block;
    width: 100%;}
</style>
<p>兄弟一</p>
<p>兄弟二</p>

2. Le chevauchement de marge entre l'élément parent et le premier ou le dernier élément enfant est également appelé transfert de marge

<style>
.box{
    background-color: pink;
    height:30px;}
.inner{
    margin-top: 1em;
    background-color: lightblue;}
</style>
<div class="box">
    <div class="inner">子级</div>
</div>

Dans la mise en page Web, en raison du chevauchement des marges, nous pensons souvent à la marge comme une "question style" et utilisez-le le moins possible. Mais en fait, cela joue un grand rôle,

Par conséquent, nous devons faire bon usage du chevauchement. Nous pouvons utiliser margin-top et margin-bottom en même temps dans les éléments de la liste. . De cette façon, la structure de la page est plus robuste et la suppression ou le positionnement du dernier élément ne détruira pas la mise en page d'origine

2.auto

  Seules la largeur/hauteur et la marge peuvent être définies à l'auto.

[Pourquoi margin:auto ne peut pas réaliser le centrage vertical]

  水平方向可以居中是因为块级元素的宽度默认是撑满父级元素的，如果给宽度设置一个固定值，而左右margin设置为auto，则可以平分剩余空间

  垂直方向不可以居中是因为块级元素的高度默认是内容高度，与父级元素的高度并没有直接的关系，而上下margin设置为auto，则被重置为0

margin: 0 auto;

【为什么图片使用margin:auto不能水平居中】

  图片无法水平居中，类似于块级元素无法垂直居中。因为图片的宽度width默认是自身宽度，与父元素的宽度没有直接关系。左右margin设置为auto，会被重置为0

  所以，图片要水平居中，需要设置为display:block元素

3.无效情形

  1、行内元素垂直margin无效

  因为行内元素垂直布局主要是通过行高line-height和垂直对齐vertical-align来影响的，垂直margin并不会影响它们，所以不会影响垂直布局。而在显示方式，margin区域不会显示元素背景，所以也不会影响自身元素的显示，所以行内元素垂直margin无效。[注意]不包括inline-block

　　2、某些表格类元素margin无效

<thead>``<tbody>``<tfoot>``<tr>``<col>``<colgroup>``<td>``<th>　　不可设置margin。

　　3、BFC造成的margin看似无效

  左侧元素使用浮动，右侧元素使用overflow-hidden实现两栏自适应的布局时，右侧元素的margin-left值只有足够大，才能看到效果。这是因为margin-left是相对于父元素左侧，而不是图片右侧

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

如何解决layer.photos()异步修改图片地址后显示异常的问题

怎样监听angularJs列表数据是否渲染完毕

ES6的“类”与面向对象的关系

ES6箭头函数中的this应该如何使用

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!