レイアウトとは何ですか
- 全体的な構造やスケルトンhtmlページ
- コンテンツのレイアウトは、技術が、デザインのアイデアではありません
[レイアウト]
- 水平中心のレイアウト
- 上下中央にレイアウト
- 中央レイアウト（垂直+水平）
どのような水平方向中央に配置されたレイアウト
ページレイアウト要素の水平中心相対/親要素レベル要素をセンタリング
[実装]
- を用いて、インラインブロック+テキスト-alignプロパティ
注：[効果]ブラウザより良い互換性[欠点]テキスト整列特性は、中心原因テキストサブレベル要素継承されている
解決策：子要素のテキスト-alignプロパティ上書き親要素をリセットテキストベースプロパティを揃えます
<style>
*{
margin: 0;
padding: 0;
}
.parent {
width: 100%;
height: 200px;
background-color: #00ffff;
/* 方法一： inline-block + text-align 属性配合使用 为父元素 添加 text-align 属性 为子元素添加 display 属性
- text-align 属性 为文本内容设置对其方式
+ left: 左对齐
+ center: 居中对齐
+ right: 右对齐
*/
text-align: center;
}
.child {
width: 300px;
height: 200px;
background-color: #ff0000;
/* display 属性:
- block: 块级元素
- inline: 内联元素 (text-align 有效)
+ width 和 height 属性无效
- inline-block: 行内块元素 (块级 + 内联 )
*/
display: inline-block;
}
</style>
<body>
<!-- 居中布局 -->
<!-- 方法一： inline-block + text-align 属性配合使用 -->
<div class="parent">
<div class="child"></div>
</div>
</body>
- テーブル+マージン属性の組み合わせ
注：水平に配置された中心要素をwhouldのみ必要[効果]を達成することができる[欠点]不良マージン特性が得られる文書フロー、から子要素場合
ソリューション：第1又は第3の検討ソリューション
ドキュメントフローの邪魔にならないようにCSS操作要素を[拡大]
- 浮動要素のフロートの提供
- 絶対：絶対位置決め要素が位置に設定されています
- 固定された位置に要素を配置する：固定
<style>
*{
margin: 0;
padding: 0;
}
.parent {
width: 100%;
height: 200px;
background-color: #00ffff;
}
.child {
width: 300px;
height: 200px;
background-color: #ff0000;
/* 方法二： gtable + margin 属性配合使用 */
/* display的值 为 table 或 block */
display: table;
/* margin 属性： 外边距
- 一个值： 上下左右
- 两个值： 上下，左右
+ auto 根据浏览器自动分配
- 三个值： 上，左右，下
- 四个值： 上，右，下，左
*/
margin: 0 auto;
}
</style>- 絶対+を使用してプロパティを変換します
注：[利点]かかわらず、文書の流れからか、親要素の子要素が水平方向にセンタリングされる効果には影響しません[欠点]はtransformプロパティをCSS 3つのプロパティブラウザのサポートの場合、悪いで新しく追加された
ソリューション：検討する第一又は第二の溶液
<style>
* {
margin: 0;
padding: 0;
}
.parent {
width: 100%;
height: 200px;
background-color: #00ffff;
/* 相对定位 */
position: relative;
}
.child {
width: 300px;
height: 200px;
background-color: #ff0000;
/* 当把当前元素设置为绝对定位以后
- 如果父级元素没有设置定位，当前元素是相对于页面定位的
- 如果父级元素设置了定位，当前元素是相对于父级元素定位的
*/
position: absolute;
left: 50%;
/* 水平方向平移 */
transform: translateX(-50%);
/* margin-left: -50%; */
}
</style>- ... ...
どのような垂直方向に中央揃えされたレイアウト
垂直中心レイアウト：ページ/親要素にこの要素相対の垂直方向の中央に
[実装]
- テーブルセル+プロパティを使用して垂直-揃える
注：テキスト中心の子要素が表示されている原因の互換性[効果]ブラウザが優れている[欠点]垂直整列のプロパティが継承されている
親要素が含まれている場合は、子要素に加えて、この方法以外のテキストは適用されません。
<style>
* {
margin: 0;
padding: 0;
}
.parent {
/*方法一： table-cell + vertical-align 属性配合使用 */
width: 200px;
height: 600px;
background-color: #00ffff;
/* display 属性：
- table: 设置当前元素为<table>元素
- table-cell：设置当前元素为<td>元素 单元格
- 设置完成以后 作为子级元素的div就相当于单元格中的内容了，设置对齐方式即可
*/
display: table-cell;
/*
vertical-align 属性: 用于设置文本内容的垂直方向的定对齐方式
- top： 顶部对齐
- middle: 居中对齐
- bottom: 底部对齐
*/
vertical-align: middle;
}
.child {
width: 200px;
height: 300px;
background-color: #ff0000;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>- 組み合わせて使用する絶対+ transformプロパティ
注：[欠点]はtransformプロパティを[利点]かかわらず、文書の流れから親要素は、子要素垂直方向の中央効果には影響を与えないかどうかのではないCSS 3つのプロパティブラウザのサポートのケースで新たに追加されました
解決は：最初の解決策を検討
<style>
* {
margin: 0;
padding: 0;
}
.parent {
width: 200px;
height: 600px;
background-color: #00ffff;
position:relative;
}
/* 方法二： absolute + transform 属性配合使用 */
.child {
width: 200px;
height: 300px;
background-color: #ff0000;
position: absolute;
top: 50%;
/* 垂直方向 */
transform: translateY(-50%);
}
</style>センターのレイアウトとは何ですか
+ :(水平レイアウトが垂直中心）を中心
[実装]
- 表示：ブロック+マージン特性水平センタリングを達成するために、テーブル・セル+垂直整列垂直中心プロパティの実装
注：[効果]ブラウザより良い互換性[欠点]親要素および子要素は、コードを増大させるために必要とされます
<style>
* {
margin: 0;
padding: 0;
}
.parent {
width: 1000px;
height: 600px;
background-color: #00ffff;
/* 实现垂直居中 */
/* <td> */
display: table-cell;
vertical-align: middle;
}
.child {
width: 200px;
height: 300px;
background-color: #ff0000;
/* 实现水居中 */
/* <table> */
/* display: table; */
display: block;
margin: 0 auto;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
- +絶対的な水平および垂直のセンタリングを達成するためにプロパティを変換
[かかわらず、文書の流れからか、親要素の、効果がより優れ、ブラウザの互換性を考慮せず、垂直中心子要素に影響を及ぼさない第一の実施形態では、[効果]：注意親要素の子は、コードが増加している一方、短所] transformプロパティはCSS 3つのプロパティブラウザのサポート悪い状況で新たに追加されました
<style>
* {
margin: 0;
padding: 0;
}
.parent {
width: 1000px;
height: 600px;
background-color: #00ffff;
/* 相对定位 不脱离文档流*/
position:relative;
}
.child {
width: 200px;
height: 300px;
background-color: #ff0000;
/* 绝对定位 ———— 子绝父相 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* transform: translateX(-50%);
transform: translateY(-50%); */
}
</style>