CSS flex, Selection
1.実施画面
2.HTMLコード
divに領域を作成し、divを作成してテキストを挿入します.
1)概念整理
flex:柔軟なレイアウト(margin、wrapなどの組み合わせ) flexbox:パーティションを配置するときにもう少し分けますか?
absolute:親(bodyラベル)に基づいて画面を調整できます.
相対 :絶対親の役割を変える
ダミーセレクタ
e.f)nth-child(2)>nth-child(2):2番目のサブタブ->2番目のサブタブ
2)コードへの適用 flexを使用するとdivが重なるためflexbox を使用する. divに配置(テキストボックス): を絶対適用医師選択練習4色div:nth-child、区分
2.HTMLコード
divに領域を作成し、divを作成してテキストを挿入します.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" rel='stylesheet'>
<title>Document</title>
</head>
<body>
<h1>The Best Colors</h1>
<div><div class='inside'><h4>Tomato</h4><h4>FF6347</h4></div><div><div class='inside'><h4>Teal</h4><h4>008080</h4></div></div></div>
<div><div class='inside'><h4>Burlywood</h4><h4>DEB887</h4></div><div><div class='inside'><h4>Thistle</h4><h4>D7BFD7</h4></div></div></div>
</body>
</html>1)概念整理
flex:柔軟なレイアウト(margin、wrapなどの組み合わせ)
absolute:親(bodyラベル)に基づいて画面を調整できます.
相対
ダミーセレクタ
e.f)nth-child(2)>nth-child(2):2番目のサブタブ->2番目のサブタブ
body {
background-color: beige;
width: 100vw;
height: 100vh;
display: flexbox;
}
h1 {
text-align: center;
width: 100vw;
}
h4 {
margin: 15px;
}
div {
margin-top: 2vh;
margin-right: 3vw;
height: 35vh;
width: 25vw;
}
.inside {
position: absolute;
margin-top: 5vh;
height: 10vh;
width: 25vw;
background-color: white;
}
div:nth-child(2) {
background: tomato;
margin-left: 15vh;
}
div:nth-child(2) > div:nth-child(2) {
background:teal;
margin-left: 20vh;
}
div:nth-child(3) {
background: burlywood;
margin-left: 15vh;
}
div:nth-child(3) > div:nth-child(2) {
background: thistle;
margin-left: 20vh;
}Reference
この問題について(CSS flex, Selection), 我々は、より多くの情報をここで見つけました https://velog.io/@wltn39/CSS-flex-Selection-연습1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol