Une partie très importante de la mise en page frontale est la construction du framework de page, qui est également la partie la plus basique. Dans la construction du cadre de page, il existe une mise en page centrée, une mise en page multi-colonnes et une mise en page globale. Aujourd'hui, nous allons résumer la mise en page CSS dans les informations utiles du front-end.
1) Utiliser inline-block+text-align
(1) Principe et utilisation
Principe : changez d'abord la sous-boîte d'un élément de niveau bloc en un élément de bloc en ligne, puis définissez l'élément de bloc en ligne pour qu'il soit centré pour obtenir un centrage horizontal.
Utilisation : définissez display:inline-block pour la boîte enfant et text-align:center pour la boîte parent.
(2) Exemples de code
<p class="parent"> <p class="child>DEMO</p> </p>
.child{ display:inline-block; }.parent{ text-align:center; }
(3) Avantages et inconvénients
Avantages : Compatibilité Eh bien, il est même compatible avec ie6 et ie7
Inconvénient : le texte dans l'enfant sera également centré horizontalement. Vous pouvez ajouter text-align:left dans .child restaurer<🎜; >
(1) Principe et utilisation
和 | ),再通过设置属性,使表格单元格内容垂直居中以达到垂直居中。 用法:先将父框设置为display:table-cell,再设置vertical-align:middle。 (2)代码实例 <p class="parent"> <p class="child>DEMO</p> </p> Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion .parent { display:table-cell; vertical-align:middle; } Copier après la connexion (3)优缺点
2)使用absolute+transform
(2)代码实例 <p class="parent"> <p class="child>DEMO</p> </p> Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion .parent { position:relative; }.child { position:absolute; top:50%; transform:translateY(-50%); } Copier après la connexion (3)优缺点
3)使用flex+align-items
(1)代码实例 <p class="parent"> <p class="child>DEMO</p> </p> Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion .parent { position:flex; align-items:center; } Copier après la connexion (3)优缺点
水平垂直居中1)使用absolute+transform
(2)代码实例 <p class="parent"> <p class="child>DEMO</p> </p> Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion .parent { position:relative; }.child { position:absolute; left:50%; top:50%; transform:tranplate(-50%,-50%); } Copier après la connexion (3)优缺点
2)使用inline-block+text-align+table-cell+vertical-align
(2)代码实例 <p class="parent"> <p class="child>DEMO</p> </p> Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion .parent { text-align:center; display:table-cell; vertical-align:middle; }.child { display:inline-block; } Copier après la connexion (3)优缺点
3)使用flex+justify-content+align-items
(2)代码实例 <p class="parent"> <p class="child>DEMO</p> </p> Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion .parent { display:flex; justify-content:center; align-items:center; } Copier après la connexion (3)优缺点
多列布局定宽+自适应1)使用float+overflow
(2)代码实例 <p class="parent"> <p class="left"> <p>left</p> </p> <p class="right"> <p>right</p> <p>right</p> </p></p> Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion .left { float:left; width:100px; margin-right:20px; }.right { overflow:hidden; } Copier après la connexion (3)优缺点
2)使用float+margin
(2)代码实例 <p class="parent"> <p class="left"> <p>left</p> </p> <p class="right"> <p>right</p> <p>right</p> </p></p> Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion .left { float:left; width:100px; }.right { margin-left:120px; } Copier après la connexion (3)优缺点
3)使用float+margin(改良版)
(2)代码实例 <p class="parent"> <p class="left"> <p>left</p> </p> <p class="rigth-fix"> <p class="right"> <p>right</p> <p>right</p> </p> </p></p> Copier après la connexion .left { float:left; width:100px; position:relative; }.right-fix { float:right; width:100%; margin-left:-100px; }.right { margin-left:120px; } Copier après la connexion (3)优缺点
4)使用table
(2)代码实例 <p class="parent"> <p class="left"> <p>left</p> </p> <p class="right"> <p>right</p> <p>right</p> </p></p> Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion .parent { display:table; width:100%; table-layout:fixed; }.left { width:100px; padding-right:20px; }.right,.left { display:table-cell; } Copier après la connexion 5)使用flex
(2)代码实例 <p class="parent"> <p class="left"> <p>left</p> </p> <p class="right"> <p>right</p> <p>right</p> </p></p> Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion .parent { display:flex; }.left { width:100px; margin-right:20px; }.right { flex:1; } Copier après la connexion (3)优缺点
两列定宽+一列自适应(1)原理、用法
(2)代码实例 <p class="parent"> <p class="left"> <p>left</p> </p> <p class="center"> <p>center</p> </p> <p class="right"> <p>right</p> <p>right</p> </p></p> Copier après la connexion Copier après la connexion .left,.center { float:left; width:100px; margin-right:20px; }.right { overflow:hidden; } Copier après la connexion 不定宽+自适应1)使用float+overflow
(2)代码实例 <p class="parent"> <p class="left"> <p>left</p> </p> <p class="right"> <p>right</p> <p>right</p> </p></p> Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion .left{ float: left; margin-right: 20px; }.right{ overflow: hidden; }.left p{ width: 200px; } Copier après la connexion (3)优缺点
2)使用table
(2)代码实例 <p class="parent"> <p class="left"> <p>left</p> </p> <p class="right"> <p>right</p> <p>right</p> </p></p> Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion .parent{ display: table; width: 100%; }.left,.right{ display: table-cell; }.left{ width: 0.1%; padding-right: 20px; }.left p{ width:200px; } Copier après la connexion (3)优缺点
3)使用flex
(2)代码实例 <p class="parent"> <p class="left"> <p>left</p> </p> <p class="right"> <p>right</p> <p>right</p> </p></p> Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion .parent { display:flex; }.left { margin-right:20px; }.right { flex:1; }.left p{ width: 200px; } Copier après la connexion (3)优缺点
两列不定宽+一列自适应(1)原理、用法
(2)代码实例 <p class="parent"> <p class="left"> <p>left</p> </p> <p class="center"> <p>center</p> </p> <p class="right"> <p>right</p> <p>right</p> </p></p> Copier après la connexion Copier après la connexion .left,.center{ float: left; margin-right: 20px; }.right{ overflow: hidden; }.left p,.center p{ width: 100px; } Copier après la connexion 等分布局公式转化:l = w * n + g * (n-1) -> l = w * n + g * n - g -> l + g = (w + g) * n Copier après la connexion 因此,我们需要解决两个问题:
1)使用float
(2)代码实例 <p class="parent"> <p class="column"><p>1</p></p> <p class="column"><p>2</p></p> <p class="column"><p>3</p></p> <p class="column"><p>4</p></p></p> Copier après la connexion Copier après la connexion .parent{ margin-left: -20px;//l增加g } .column{ float: left; width: 25%; padding-left: 20px; box-sizing: border-box;//包含padding区域 w+g } Copier après la connexion (3)优缺点
2)使用table
(2)代码实例 <p class="parent-fix"> <p class="parent"> <p class="column"><p>1</p></p> <p class="column"><p>2</p></p> <p class="column"><p>3</p></p> <p class="column"><p>4</p></p> </p></p> Copier après la connexion .parent-fix{ margin-left: -20px;//l+g } .parent{ display: table; width:100%; table-layout: fixed; } .column{ display: table-cell; padding-left: 20px;//w+g} Copier après la connexion (3)优缺点
3)使用flex
(2)代码实例 <p class="parent"> <p class="column"><p>1</p></p> <p class="column"><p>2</p></p> <p class="column"><p>3</p></p> <p class="column"><p>4</p></p></p> Copier après la connexion Copier après la connexion .parent{ display: flex; }.column{ flex: 1; }.column+.column{ margin-left:20px; } Copier après la connexion (3)优缺点
定宽+自适应+两块高度一样高1)使用float
(2)代码实例 <p class="parent"> <p class="left"> <p>left</p> </p> <p class="right"> <p>right</p> <p>right</p> </p></p> Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion p{ background: none!important; }.left,.right{ background: #444; }.parent{ overflow: hidden; }.left,.right{ padding-bottom: 9999px; margin-bottom: -9999px; }.left{ float: left; width: 100px; margin-right: 20px; }.right{ overflow: hidden; } Copier après la connexion (3)优缺点
2)使用table
(2)代码实例 <p class="parent"> <p class="left"> <p>left</p> </p> <p class="right"> <p>right</p> <p>right</p> </p></p> Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion .parent { display:table; width:100%; table-layout:fixed; } .left { width:100px; padding-right:20px; } .right,.left { display:table-cell; } Copier après la connexion 3)使用flex
(2)代码实例 <p class="parent"> <p class="left"> <p>left</p> </p> <p class="right"> <p>right</p> <p>right</p> </p></p> Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion Copier après la connexion .parent { display:flex; } .left { width:100px; margin-right:20px; } .right { flex:1; } Copier après la connexion (3)优缺点
4)使用display
(2)代码实例 <p class="parent"> <p class="left">left</p> <p class="right">right </p> </p> Copier après la connexion .parent { width: 100%; display: -webkit-box; } .left { width:100px; margin-right: 20px; } .right { -webkit-box-flex: 1; } Copier après la connexion (3)优缺点
全屏布局全屏布局的特点
全屏布局的方法1)使用position
(2)代码实例 <p class="parent"> <p class="top">top</p> <p class="left">left</p> <p class="right"> <p class="inner">right</p> </p> <p class="bottom">bottom</p> </p> Copier après la connexion html,body,.parent{ margin:0; height:100%; overflow:hidden; }body{ color:white; }.top{ position:absolute; top:0; left:0; right:0; height:100px; background:blue; }.left{ position:absolute; left:0; top:100px; bottom:50px; width:200px; background:red; }.right{ position:absolute; left:200px; top:100px; bottom:50px; right:0; background:pink; overflow: auto; }.right .inner{ min-height: 1000px; }.bottom{ position:absolute; left:0; right:0; bottom:0; height:50px; background: black; } Copier après la connexion (3)优缺点
2)使用flex
(2)代码实例 <p class="parent"> <p class="top">top</p> <p class="middle"> <p class="left">left</p> <p class="right"> <p class="inner">right</p> </p> </p> <p class="bottom">bottom</p> </p> Copier après la connexion Copier après la connexion html,body,.parent{ margin:0; height:100%; overflow:hidden; }body{ color: white; } .parent{ display: flex; flex-direction: column; }.top{ height:100px; background: blue; }.bottom{ height:50px; background: black; }.middle{ flex:1; display:flex; }.left{ width:200px; background: red; }.right{ flex: 1; overflow: auto; background:pink; }.right .inner{ min-height: 1000px; } Copier après la connexion (3)优缺点
1)使用flex
(2)代码实例 <p class="parent"> <p class="top">top</p> <p class="middle"> <p class="left">left</p> <p class="right"> <p class="inner">right</p> </p> </p> <p class="bottom">bottom</p> </p> Copier après la connexion Copier après la connexion html,body,.parent{ margin:0; height:100%; overflow:hidden; }body{ color:white; } .parent{ display:flex; flex-direction:column; }.top{ background:blue; }.bottom{ background:black; }.middle{ flex:1; display:flex; }.left{ background: red; }.right{ flex:1; overflow:auto; background: pink; }.right .inner{ min-height:1000px; } Copier après la connexion 全屏布局相关方案的兼容性、性能和自适应一览表
当然,最最最最最后,如果您喜欢这片文章,可以疯狂点赞!! 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! Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Erreur angulaire 14 : CSS imbriqué détecté, mais l'imbrication CSS est mal configurée
Depuis 1970-01-01 08:00:00
0
0
0
javascript - React importe les fichiers CSS et les invites Impossible de trouver le module "../../css/style.css"
Depuis 1970-01-01 08:00:00
0
0
0
Variables de couleur CSS - Des règles ou des sélecteurs sont requis lors de la définition des couleurs CSS
Depuis 1970-01-01 08:00:00
0
0
0
Rubriques connexes
Plus>
|
---|