CSS折りたたみスタイル(4) - div+cssレイアウト-CSSチュートリアル-php.cn

CSS折りたたみスタイル(4) - div+cssレイアウト

黄舟

リリース： 2016-12-28 16:11:19

オリジナル

1992 人が閲覧しました

内容概要:

CSS折りたたみスタイル(4) - div+cssレイアウト

1. divとspan
(1) ブロックレベルタグ: div
(2) インラインタグ: span
図に示すように:

CSS折りたたみスタイル(4) - div+cssレイアウト

2. ボックスモデル(重要) )

注: ブラウザのデバッグツールを使用してボックスを表示できます

(1) マージン: ボックスの外側のマージン

CSS折りたたみスタイル(4) - div+cssレイアウト

(2) パディング: ボックスの内側のマージン (ブロックのサイズが変更されます) )

CSS折りたたみスタイル(4) - div+cssレイアウト

(3) border: ボックスの境界線の幅
(4) width: ボックスの幅
(5) height: ボックスの高さ

例:

①: 外マージンと内マージンの違い:

CSS折りたたみスタイル(4) - div+cssレイアウト

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配置例:

CSS折りたたみスタイル(4) - div+cssレイアウト

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】

①：固定位置とレイアウトのデモ

CSS折りたたみスタイル(4) - div+cssレイアウト

<!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>

ログイン後にコピー

②：フローティングとオーバーフローエフェクトのデモ

CSS折りたたみスタイル(4) - div+cssレイアウト

<!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) にご注意ください。