Maison > Article > interface Web > Exemple d'analyse complète du modèle de mise en page CSS

Exemple d'analyse complète du modèle de mise en page CSS

高洛峰original: 2017-03-07 13:56:101289parcourir

Le CSS est la couverture d'une page Web. Son apparence ou non dépend entièrement du style CSS, et la mise en page est une partie importante du CSS. Analysons quelques mises en page courantes.

Modèle de flux

Le modèle de flux est le mode par défaut de mise en page des pages Web et le mode de mise en page le plus courant. Il présente deux caractéristiques. :

1. Les éléments de bloc sont répartis verticalement de haut en bas dans l'élément contenant. Les éléments de bloc courants incluent : p, p, ul, ol, h1~h6, adresse, etc.

2. Les éléments en ligne seront affichés horizontalement de gauche à droite dans l'élément conteneur. Les éléments en ligne courants sont : a, span, img, input, textarea, etc.

Modèle flottant

Le modèle flottant fait référence à l'utilisation de CSS pour Les éléments de bloc sont définis comme des flotteurs. Utilisation : float:left/right/none

Modèle de calque

css définit un ensemble de propriétés de positionnement (position) pour prendre en charge le modèle de mise en page .

1. Positionnement statique Réglage de la position :statique

Pas de positionnement particulier, l'objet suit le flux normal du document. Les attributs haut, droite, bas, gauche et autres ne seront pas appliqués

2. Position de réglage du positionnement absolu : absolu

Faites glisser l'élément hors du flux de documents et puis utilisez les attributs tels que haut, droite, bas et gauche sont positionnés de manière absolue par rapport à leur bloc contenant le parent le plus proche avec un attribut de positionnement. Si aucun bloc d'attribut de ce type n'existe, il est relatif à l'élément body, c'est-à-dire par rapport à la fenêtre du navigateur.

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>Css3学习</title>
<style>
.test{position:absolute;top:0px;left:0px;width:200px;height:200px;padding:5px 10px;background:#c00;color:#fff;line-height:120%;}   
</style>
</head>
<body style="background:#ccc;">
    <p style="background:#494444; position:relative;width:300px;height:300px;">
<p class="test">我是绝对定位，在这里相对于父级p定位</p>
</p>
</body>
</html>

Exemple danalyse complète du modèle de mise en page CSS

3. Paramètres de positionnement relatif position :relative

L'objet suit le flux normal du document, mais la position peut être déterminée davantage grâce à des attributs tels que haut, droite, bas, gauche, etc. Ceci est également différent du attribut statique.

4. Position de réglage du positionnement fixe : fixe

La différence entre le positionnement fixe et le positionnement absolu est que l'élément positionné par référence fixe est toujours la vue elle-même (le Web fenêtre de page dans l'écran), tandis qu'absolu fait référence à l'élément parent avec des attributs de positionnement. Le code suivant :

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>Css3学习</title>
<style>
.test{position:fixed;top:0px;left:0px;width:200px;height:200px;padding:5px 10px;background:#c00;color:#fff;line-height:120%;}   
</style>
</head>
<body style="background:#ccc;">
    <p style="background:#494444; width:300px;height:300px;position:relative;">
<p class="test">我是固定定位，在这里相对于body定位</p>
</p>
</body>
</html>

Exemple danalyse complète du modèle de mise en page CSS

La section suivante traite du positionnement et d'autres attributs de mise en page : z-index, display, float, clear, visibilité , clip ,overflow,overflow-x,overflow-y

La compréhension complète ci-dessus du modèle de mise en page CSS est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère aussi que vous. prendra en charge le site Web chinois PHP.

Pour des exemples d'analyse plus complets de modèles de mise en page CSS et des articles connexes, veuillez faire attention au site Web PHP chinois !

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：Une brève introduction à la méthode de flottement CSSArticle suivant：Une brève introduction à la méthode de flottement CSS

Articles Liés

Voir plus