html 5ソースノート(三)【愛創教室専門先端訓練】
6050 ワード
一、一般的なレイアウト1.1固定レイアウト(基本的なレイアウト方式)1.2パーセントレイアウト(フローレイアウト)width、heigth、padding、margin使用パーセントレイアウト
Width、padding、marginは親要素の幅に対してパーセント設定されます.
Heightは親要素の高さに対してパーセント設定を行います
面接問題:
borderは%で書けません
絶対位置決めの要素は、%でwidth、height、paddingと書くと、それぞれ自分の位置決め参照親要素のwidth、height、widthを参照します.自分に最も近い親要素です
1
1.3固定比固定レイアウト左サイドバー固定、中間パーセンテージレイアウト
1
考える?
両側が固定され、中間が適応され、中間バーが優先的にレンダリングされます.
1.4聖杯の配置は外国a list of partの文章から出て、聖杯の外国語の意味は渇望するものの意味です
思想:floatを利用してmarginと結合して親要素paddingで真ん中に隠された内容を押し出し、最後に相対位置決めで左右の欄を調整して充填する
1
1
1.5ダブルフラップレイアウト淘宝のUEDチームがページ開発時に生み出したインスピレーションは、ページレイアウトに由来する
大体の考え方は聖杯のレイアウトと同じで、違いは中間の主要な内容の上で1層の箱をかぶって、それからmarginを使って中間欄の文字の表示の問題を解決して、もう位置決めする必要はありません
1
1.6フレックスレイアウトDisplay:flex‖inline-flex;ボックスをフレキシブルボックスコンテナとして設定できます
フレキシブルボックスは、空白空間の割り当てとサブ要素の配置方法に使用できます.
エラストマーボックス組成:エラストマーボックスコンテナとエラストマーサブエレメント
[フレックスボックス](Flex Box)サブエレメントやボックスコンテナの他のアトリビュートのレンダリングには影響しません.
1
1.7テキストを垂直方向に中央に配置する方法Line-height単行テキストを垂直方向に中央に配置する
Padding押出し
表v-align
1.8容器の垂直中央方式Padding押出しを設定する
Marin配合translate Y
位置決めtranslate Y
Align-items
Width、padding、marginは親要素の幅に対してパーセント設定されます.
Heightは親要素の高さに対してパーセント設定を行います
面接問題:
borderは%で書けません
絶対位置決めの要素は、%でwidth、height、paddingと書くと、それぞれ自分の位置決め参照親要素のwidth、height、widthを参照します.自分に最も近い親要素です
body{
margin: 0;
}
#container{
/* height: 200px;
width: 200px; */
width: 50%;
padding-top:50%;
/* padding: 100px; */
/* margin: 200px auto; */
border: solid 1px;
}
#container div{
height: 50%;
width: 50%;/* 50%*/
border: solid 1px;
}
1
1.3固定比固定レイアウト左サイドバー固定、中間パーセンテージレイアウト
1
body{
margin: 0;
}
aside,.main{
/* */
min-height: 200px;
}
aside.left{
float: left;
width: 270px;
background: yellow;
}
aside.right{
float:right;
width: 300px;
background: red;
}
.main{
/* */
min-width: 800px;
width: 100%;
background: orange;;
}
1
考える?
両側が固定され、中間が適応され、中間バーが優先的にレンダリングされます.
1.4聖杯の配置は外国a list of partの文章から出て、聖杯の外国語の意味は渇望するものの意味です
思想:floatを利用してmarginと結合して親要素paddingで真ん中に隠された内容を押し出し、最後に相対位置決めで左右の欄を調整して充填する
1
body{ margin: 0; }
.clear::after{
display: block;
height: 0;
content: '';
clear: both;
visibility: hidden;
}
.content{
padding: 0 300px 0 270px;
border: solid 1px;
}
aside,.main{
/* */
min-height: 200px;
}
.main{
/* box-sizing: border-box; */
float: left;
/* */
min-width: 800px;
width: 100%;
/* padding: 0 300px 0 270px; */
background: orange;;
}
aside.left{
float: left;
width: 270px;
margin-left: -100%;
background: yellow;
position: relative;
left: -270px;
}
aside.right{
float: left;
width: 300px;
margin-left: -300px;
background: red;
position: relative;
right: -300px;
}
1
1.5ダブルフラップレイアウト淘宝のUEDチームがページ開発時に生み出したインスピレーションは、ページレイアウトに由来する
大体の考え方は聖杯のレイアウトと同じで、違いは中間の主要な内容の上で1層の箱をかぶって、それからmarginを使って中間欄の文字の表示の問題を解決して、もう位置決めする必要はありません
body{ margin: 0; min-width: 900px;}
.clear::after{
display: block;
height: 0;
content: '';
clear: both;
visibility: hidden;
}
.content{
border: solid 1px;
}
aside,.main{
/* */
min-height: 200px;
}
.main{
float: left;
min-width: 300px;
width: 100%;
background: orange;;
}
.main div{
margin: 0 320px 0 290px;
background: pink;
}
aside.left{
float: left;
width: 270px;
margin-left: -100%;
background: yellow;
}
aside.right{
float: left;
width: 300px;
margin-left: -300px;
background: red;
}
1
1.6フレックスレイアウトDisplay:flex‖inline-flex;ボックスをフレキシブルボックスコンテナとして設定できます
フレキシブルボックスは、空白空間の割り当てとサブ要素の配置方法に使用できます.
エラストマーボックス組成:エラストマーボックスコンテナとエラストマーサブエレメント
[フレックスボックス](Flex Box)サブエレメントやボックスコンテナの他のアトリビュートのレンダリングには影響しません.
1
2
3
4
.flex-box{
/* */
display: flex;
/* row row-reverse column column-reverse*/
/* flex-direction:column-reverse; */
/* no-wrap wrap wrap-reverse*/
/* flex-wrap: wrap; */
/* flex-start flex-end center space-between space-around*/
justify-content: space-around;
border: solid 1px;
/* overflow: hidden; */
}
.flex-box div{
height: 100px;
width: 200px;
/* margin-left: 60px; */
/* float: left; */
}
.flex-box div.box1{
background: red;
}
.flex-box div.box2{
background: yellow;
}
.flex-box div.box3{
background: green;
}
.flex-box div.box4{
background: blue;
}
1
1.7テキストを垂直方向に中央に配置する方法Line-height単行テキストを垂直方向に中央に配置する
Padding押出し
表v-align
1.8容器の垂直中央方式Padding押出しを設定する
Marin配合translate Y
位置決めtranslate Y
Align-items