HTMLの一部
-
DTD一部：標準の文書型宣言、ステートメントバージョン、
- ヘッダ部：機械を表示します
- ボディパーツ：ポスター
CSSのdivコントロールディスプレイ
-
これは、ブロックレベル要素です。これは、その内容が自動的に新しい行を開始することを意味します。実際には、新しい行があります形式のみ本来の性能。によってクラスまたはIDは、追加のスタイルを適用します。
- 次のコードは、幅と高さと背景色によって各CSSのDIV IDに設けられています。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#a {
width: 200px;
height: 100px;
background: red;
}
#b {
width: 200px;
height: 100px;
background: blue;
}
#c {
width: 200px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>
結果の実装：
フローティングレイアウト
我々は結果を確認するために、背景色を設定2つのdivを書きました
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#lside {
height: 200px;
background: red;
}
#rside {
height: 200px;
background: green;
}
</style>
</head>
<body>
<div id="lside">我是左边</div>
<div id="rside">我是右边</div>
</body>
</html>
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
また、コンテンツddivは、自動的に新しい行を開始しますので、私は、フローティングのdivレイアウトの周りに配置された2が実行されますしたいと述べた上記の
我々はCSSフロートプロパティに一緒にいました
<style type="text/css">
#lside {
height: 200px;
background: red;
float: left;
}
#rside {
height: 200px;
background: green;
float: right;
}
</style>
示すように、結果：
[画像ソースステーションは、セキュリティチェーン機構を有していてもよい、チェーンが失敗したダンプ、ダウン直接アップロード画像を保存することをお勧めします（IMG-X2fX1HDI-1571666262498）（https://upload-images.jianshu.io/upload_images/1102523-8225be3b4d92fefc.png ？imageMogr2 /オートオリエント/ストリップ| imageView2 / 2 /）1200 /フォーマット/ WEBP / W]
クリアフロート
DIV一般的なレイアウトと一緒に存在する浮遊するとき、それは次のような状況が発生するカバー
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#lside {
height: 200px;
background: red;
float: left;
}
#rside {
height: 300px;
background: green;
float: right;
}
#normal {
height: 400px;
background: blue;
}
</style>
</head>
<body>
<div id="lside">我是左边</div>
<div id="rside">我是右边</div>
<div id="normal">我不设置浮动</div>
</body>
</html>
所以如果不想被覆盖，就要清除浮动
在CSS中对普通元素设置clear属性
当我们增加 clear: left; 时，代表不让左边浮动盖着自己
#normal {
height: 400px;
background: blue;
clear: left;
}
此时清除左浮的div就会贴着左浮的div下边显示，如图：
对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来，编程工作第六个年头了，与大家分享一些学习方法，实战开发需要注意的细节。767-273-102 秋裙。从零基础开始怎么样学好前端。看看前辈们是如何在编程的世界里傲然前行！不停更新最新的教程和学习方法（web前端系统学习路线，详细的前端项目实战教学视频），有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入。我们会一起结伴同行前端前端前端
同样的还可设置 clear: right; 代表不让右边浮动盖着自己；设置 clear: both; 代表不让浮动盖着自己。这里不做演示