Introduction au modèle et au positionnement de la boîte CSS

Attributs associés communs du modèle de boîte et valeurs d'attribut

/*基本属性*/padding: padding-left/right/top/bottom
border: border-left/right/top/bottom  border-radiusmargin: margin-left/right/top/bottom/*定位*/position                //把一个元素放在静态的static、相对的relative、绝对的absolute、固定的fixed位置中left right top bottom   //元素距原位置的左右上下的偏移量overflow                //设置元素溢出其区域发生的事情clip                    //设置元素显示的形状vertical-align          //设置元素垂直对齐的方式z-index                 //设置元素的堆叠次序/*浮动*/float    //浮动 left right none inheritclear    //去掉浮动 left right both inherit 123456789101112131415161718

css float

Tout d'abord, vous devez savoir que div est un élément de niveau bloc et occupe son propre ligne dans la page, d'en haut. La disposition inférieure est le flux légendaire. Comme le montre l'image ci-dessous

vous pouvez voir que même si la largeur de div1 est très petite, une ligne sur la page peut accueillir div1 et div2, et div2 ne sera pas classé derrière div1 car l'élément div est sur sa propre ligne.
Notez que les théories ci-dessus font référence aux divs dans le flux standard. Quelle que soit la complexité de la mise en page, le point de départ de base est : "Comment afficher plusieurs éléments div sur une seule ligne".
Evidemment le flux standard ne peut plus répondre à la demande, il faut donc utiliser des flotteurs. Flottant peut être compris comme 让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次. Par exemple, en supposant que div2 dans l'image ci-dessus flotte, il s'éloignera du flux standard, mais div1, div3 et div4 sont toujours dans le flux standard, donc div3 se déplacera automatiquement vers le haut, occupera la position de div2 et se réorganisera. un flux. Comme le montre l'image :

Comme le montre l'image, puisque div2 est réglé pour flotter, il n'appartient plus au flux standard, et div3 se déplace automatiquement pour remplacer la position de div2, div1, div3 et div4 sont disposés afin de devenir un nouveau flux. Et comme les flotteurs flottent au-dessus du débit standard, div2 bloque une partie de div3 et div3 semble "court".

Ici, div2 utilise 左浮动(float:left;)，可以理解为漂浮起来后靠左排列, et le flotteur droit (float:right;) est bien sûr disposé à droite. Les valeurs gauche et droite font ici référence aux bords gauche et droit de la page.

Si on fait flotter div2 vers la droite, l'effet sera le suivant :

A ce moment, div2 est proche du bord droit de la page Disposé, div3 n'est plus bloqué et les lecteurs peuvent clairement voir le flux composé de div1, div3 et div4 mentionné ci-dessus.

Jusqu'à présent, nous n'avons fait flotter qu'un seul élément div (div2). Et si nous faisons flotter plusieurs div ?

Ensuite, nous ajoutons le flottement gauche à la fois à div2 et à div3. L'effet est le suivant :

De même. , parce que div2 et div3 sont flottants, ils n'appartiennent plus au flux standard, donc div4 montera automatiquement et formera un "nouveau" flux standard avec div1, et flottant flotte sur le flux standard, donc div2 bloque à nouveau div4.

Lorsque div2 et div3 sont configurés pour flotter en même temps, div3 suivra div2. Je ne sais pas si les lecteurs ont remarqué que jusqu'à présent, div2 flotte dans chaque exemple, mais c'est le cas. not Il ne suit pas après div1. Nous pouvons donc tirer une conclusion importante :

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。1

Pour aider les lecteurs à comprendre, donnons quelques exemples supplémentaires.
Si nous définissons div2, div3 et div4 pour qu'ils flottent vers la gauche, l'effet est le suivant :

D'après la conclusion ci-dessus : start avec l'analyse div4, il a constaté que l'élément supérieur div3 est flottant, donc div4 suivra div3 ; a constaté que l'élément supérieur div2 est également flottant, donc div3 suivra div2 et div2 a constaté que l'élément supérieur div1 est dans le flux standard ; élément, donc la position verticale relative de div2 reste inchangée et le haut est toujours aligné avec le bas de l'élément div1. Puisqu'il est laissé flottant, le côté gauche est proche du bord de la page, donc le côté gauche est le devant, donc div2 est à l'extrême gauche.

Si div2, div3 et div4 sont tous réglés pour flotter à droite, l'effet est le suivant :

Le principe et le float gauche sont fondamentalement les mêmes, mais vous devez faire attention à la relation correspondante. Puisqu'il flotte à droite, le côté droit est proche du bord de la page, donc le côté droit est le devant, donc div2 est à l'extrême droite.
Si on fait flotter uniquement div2 et div4 vers la gauche, l'effet est le suivant :

依然是根据结论，div2、div4浮动，脱离了标准流，因此div3将会自动上移，与div1组成标准流。div2发现上一个元素div1是标准流中的元素，因此div2相对垂直位置不变，与div1底部对齐。div4发现上一个元素div3是标准流中的元素，因此div4的顶部和div3的底部对齐，并且总是成立的，因为从图中可以看出，div3上移后，div4也跟着上移，div4总是保证自己的顶部和上一个元素div3(标准流中的元素)的底部对齐。

至此，恭喜读者已经掌握了添加浮动，但还有清除浮动，有上边的基础清除浮动非常容易理解。

经过上边的学习，可以看出：元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列，清除浮动可以理解为打破横向排列。

清除浮动：

语法： clear : none | left | right | both 

none : 默认值，允许两边都可以有浮动对象 
left : 不允许左边有浮动对象 
right: 不允许右边有浮动对象 
both : 不允许有浮动对象12345678

根据上边的基础，假如页面中只有两个元素div1、div2，它们都是左浮动，场景如下：

此时div1、div2都浮动，根据规则，div2会跟随在div1后边，但我们仍然希望div2能排列在div1下边，就像div1没有浮动，div2左浮动那样。这时候就要用到清除浮动（clear），如果单纯根据官方定义，读者可能会尝试这样写：在div1的CSS样式中添加clear:right;，理解为不允许div1的右边有浮动元素，由于div2是浮动元素，因此会自动下移一行来满足规则。而其实这种理解是不正确的，这样做没有任何效果。

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

怎么理解呢？就拿上边的例子来说，我们是想让div2移动，但我们却是在div1元素的CSS样式中使用了清除浮动，试图通过清除div1右边的浮动元素(clear:right;)来强迫div2下移，这是不可行的，因为这个清除浮动是在div1中调用的，它只能影响div1，不能影响div2。

要想让div2下移，就必须在div2的CSS样式中使用浮动。本例中div2的左边有浮动元素div1，因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。

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!