ホームページ > 記事 > ウェブフロントエンド > CSS折りたたみスタイル(4) - div+cssレイアウト
CSS折りたたみスタイル(4) - div+cssレイアウト
- 黄舟オリジナル
- 2016-12-28 16:11:191939ブラウズ
内容概要:
1. divとspan
(1) ブロックレベルタグ: div
(2) インラインタグ: span
図に示すように:
2. ボックスモデル(重要) )
注: ブラウザのデバッグ ツールを使用してボックスを表示できます
(1) マージン: ボックスの外側のマージン
(2) パディング: ボックスの内側のマージン (ブロックのサイズが変更されます) )
(3) border: ボックスの境界線の幅
(4) width: ボックスの幅
(5) height: ボックスの高さ
例:
①: 外マージンと内マージンの違い:
demo.html
<!doctype html>
<html>
<head>
<title>Div+Css布局(div+span以及盒模型)</title>
<meta charset="utf-8">
<style type="text/css">
body{
margin:0;
padding:0;
background:#C5C1AA;
}
div{
height:500px;
margin:60px;
padding:o;
border:solid 2px black;
background-color:rgba(255,0,0,0.7);
}
div.div1{
height:400px;
margin:0 audio;
border:solid 3px black;
background-color:rgba(0,0,255,0.7);
}
</style>
</head>
<body>
<div>
<div class="div1">
<h1 style="text-align:center;">欢迎登录系统</h1>
<h4 style="text-align:center;">账号:<input style="text"></h4>
<h4 style="text-align:center;">密码:<input style="text"></h4>
</div>
</div>
</body>
</html>②: Boxモデルのdiv配置例:
demo.html
<!doctype html>
<html>
<head>
<title>Div+Css布局(div+span以及盒模型)</title>
<meta charset="utf-8">
<style type="text/css">
body{
margin:0;
padding:0;
background-color:rgba(0,0,255,0.3);
}
div{
width:500px;
height:500px;
background-color:rgba(250,128,10,0.8);
margin:0 auto; /* 使div居中*/
border:solid black;
}
div.div1{
float:left; /* 向左排列/*
background-color:rgba(255,0,0,0.4);
border:solid blue;
height:244px;
width:244px;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div>
<div class="div1"></div>
<div class="div1"></div>
</div>
</body>
</html> 3. レイアウト関連の属性(重要)
(1) 位置の配置方法① 通常の配置。 : 相対的 ②. 親要素の位置に応じて: 絶対的 ③. ブラウザウィンドウに応じた位置: 固定 ④. 継承: 継承 (2) 位置決め: ①.left: ページの頂点からの XXpx (左) の距離。 ②.right: XXpx (右) 距離 ページ頂点からの距離 ③.top: XXpx (上) ページ頂点からの距離 ④.bottom: XXpx (下) ページ頂点からの距離 (3) z-index レイヤーのカバー順序 (優先) ① .-1,0 ,1,2,3; -1の場合、そのレイヤーは最下位レイヤーになります
(4) 表示属性(ブロックレベルラベルとインラインラベルの切り替え)
①.display: none レイヤーは表示されません
② .display: block ブロック表示、要素の後に折り返す、次のブロック要素を表示
③.display: inline インライン表示、複数ブロックを 1 行に表示可能
(5) float フローティング属性
①.left : 左 Float
②.right: 右 float
[b] (6) Clear Clear float[/b]
①.clear: Both
[b] (7) overflow オーバーフロー処理[/b]
①.hiddenレイヤーサイズの内容を隠す
②.scroll コンテンツがレイヤーサイズを超えるかどうかに関係なくスクロールバーを追加します
③.auto レイヤーサイズを超えると自動的にスクロールバーを追加します
[b]例:[/ b】
①：固定位置とレイアウトのデモ
<!doctype html>
<html>
<head>
<title>Div+Css布局(布局相关的属性)</title>
<meta charset="utf-8">
<style type="text/css">
body{
padding:0;
margin:0;
}
div.diva{
position:relative; /* 一定要添加，如没添加其子元素则不生效*/
margin:50px;
width:500px;
height:500px;
background-color:rgba(255,0,0,0.4);
}
.spanb{
position:absolute;
background-color:blue;
color:black;
top:-10px;
right:0;
}
.fixed{
padding:20px;
background:green;
position:fixed;
left:0;
top:40px;
z-index:1; /* z-index的value值可为-1,0,1,2;当为-1时，该图层为最底层 */
}
</style>
</head>
<body>
<div class="fixed">
<p>联系人：翁孟铠</p>
<p>联系电话：XXXxxxx</p>
<p>地址：XXXXXXXXXXX</p>
</div>
<div class="diva">
<span class="spanb">浏览次数：222</spn>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</body>
</html>②：フローティングとオーバーフローエフェクトのデモ
<!doctype html>
<html>
<head>
<title>Div+Css布局(浮动以及溢出处理)</title>
<meta charset="utf-8">
<style type="text/css">
body{
padding:0;
margin:0;
}
.div{
width:auto;
height:auto;
background:#f1f1f1;
margin:0 auto;
color: black;
}
.left{
width: 300px;
height: 400px;
position: inherit;
top: 60px;
background:yellow;
float: left;
color: black;
}
.right{
float: left;
width: 1049px;
height: 400px;
position: inherit;
top: 60px;
background:lavenderblush;
color: black;
}
.top{
width: auto;
height: 60px;
background: royalblue;
position: inherit;
top:0;
}
.bottom{
clear: both;
margin-top:20px;
width: 960px;
height: 20px;
background: red;
}
.jianjie{
height: 80px;
width: 200px;
background: brown;
overflow: auto;
}
</style>
</head>
<body>
<div class="div">
<div class="top">logo</div>
<div class="left">左边</div>
<div class="right">
简介:<br>
<div class="jianjie">
1、这是简介<br>
2、我们在做溢出测试<br>
3、hidden 隐藏超出层大小的内容<br>
4、scroll无论内容是否超出层大小都添加滚动条<br>
5、auto 超出时自动添加滚动条
</div>
</div>
<div class="bottom"></div>
</div>
</body>
</html> 以上がCSSの折りたたみスタイル(4) - div+cssレイアウトの内容です。関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) にご注意ください。