• css布局方式


    布局方式

    1.标准流/静态流

       默认布局方式,按照代码书写顺序及标签类型从上到下,从左到右依次显示

    2.浮动布局

       主要用于设置块元素的水平排列

      1)属性:float

      2)取值: 可取left或right,设置元素向左浮动或向右浮动.   示例:float:left/right;

      3)特点:

    • 元素设置浮动会从原始位置脱流,向左或向右依次停靠在其他元素边缘,在文档中不再占位
    • 元素设置浮动,就具有块元素的特征,可以手动调整宽高
    • "文字环绕":浮动元素遮挡正常元素的位置,无法遮挡正常内容的显示,内容围绕在浮动元素周围显示

      4)常见问题: 子元素全部设置浮动,导致父元素高度为0,影响父元素背景色和背景图片展示,影响页面布局

      5)解决:

    • 对于内容固定的元素,如果子元素都浮动,可以给父元素固定高度(例:导航栏)
    • 在父元素的末尾添加空的块元素。设置clear:both;清除浮动
    • 为父元素设置overflow:hidden;解决高度为0
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         #box{
     8             width:500px;
     9             height:500px;
    10             margin:0 auto;
    11             background:orange;
    12 
    13 
    14         }
    15         #d1,#d2,#d3{
    16             width:200px;
    17             height:200px;
    18         }
    19         #d1{
    20 
    21             background:red;
    22             float:right;
    23 
    24         }
    25         #d2{
    26             height:300px;
    27             background:green;
    28             float:right;
    29         }
    30         #d3{
    31             background:blue;
    32             float:right;
    33         }
    34         span{
    35             float:right;
    36             width:200px;
    37             height:200px;
    38             background:pink;
    39             <!--clear:both;-->
    40 
    41         }
    42     </style>
    43 </head>
    44 <body>
    45     <div id="box">box
    46         <div id="d1">d1</div>
    47         <div id="d2">d2</div>
    48         <div id="d3">d3</div>
    49         <span>span1</span>
    50 
    51     </div>
    52     <!--脱离文档流的元素在文档中不在站位,可以手动调宽高-->
    53     <span>span2</span>
    54 </body>
    55 </html>
    浮动布局演示1
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         div{
     8             width:200px;
     9             height:200px;
    10             background:red;
    11             float:left;
    12             margin-right:30px;
    13         }
    14         h1{
    15             background:green;
    16 
    17         }
    18         input{
    19         /*正常元素在文档流中找位置,浮动元素在上层中找位置*/
    20             float:left;
    21         }
    22     </style>
    23 </head>
    24 <body>
    25     <div></div>
    26     <span>行内元素</span>
    27     <input type="text">
    28     <h1>浮动元素只能遮挡元素的位置,但是不影响内容显示</h1>
    29 </body>
    30 </html>
    浮动布局演示2
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         #nav{
     8             width:900px;
     9             height:24px;
    10             background:gray;
    11         }
    12         .left{
    13             width:300px;
    14             float:left;
    15             background:green;
    16         }
    17         .right{
    18             float:right;
    19             background:red;
    20             width:300px;
    21         }
    22         ul{
    23             margin:0;
    24             passing:0;
    25             /*去掉列表符号*/
    26             list-style:none;
    27         }
    28         li{
    29             float:left;
    30             margin-right:50px;
    31         }
    32         #main{
    33             margin-top:50px;
    34             width:900px;
    35             /*解决子元素全部浮动造成父元素告诉为0的问题*/
    36             /*解决方法1:height:400px;*/
    37             /*解决方法2:overflow:hidden;*/
    38             overflow:hidden;
    39             background:pink;
    40         }
    41         .item1{
    42             width:580px;
    43             height:400px;
    44             background:gray;
    45             float:left;
    46         }
    47         .item2,.item3{
    48             width:300px;
    49             height:190px;
    50             background:gray;
    51             float:right;
    52         }
    53         .item2{
    54             margin-bottom:20px;
    55         }
    56         #i1,#i2{
    57             width:200px;
    58             height:200px;
    59             background:red;
    60         }
    61         #i1{
    62             background:green;
    63             float:left;
    64         }
    65         #i2{
    66             /*使文档中正常元素不受前面浮动元素影响*/
    67             /*clear:left/right/both*/
    68             clear:left;
    69         }
    70         .clear{
    71             clear:both;
    72         }
    73     </style>
    74 </head>
    75 <body>
    76     <div id="nav">
    77         <div class="left">
    78             <ul>
    79                 <li id="d1">首页</li>
    80                 <li id="d2">物流</li>
    81                 <li id="d3">客户</li>
    82             </ul>
    83         </div>
    84         <div class="right">右侧导航</div>
    85     </div>
    86     <div id="main">
    87         <div class="item1">1</div>
    88         <div class="item2">2</div>
    89         <div class="item3">3</div>
    90         <div class="clear">1</div>
    91     </div>
    92     <div>
    93         联系我们
    94         <div id="i1">1</div>
    95         <div id="i2">2</div>
    96     </div>
    97 </body>
    98 </html>
    浮动布局演示3

    3.定位布局

       结合偏移属性调整元素的显示位置

      1)属性: position

      2)取值: 可取relative(相对定位)/absolute(绝对定位)/fixed(固定定位)  示例:postion:relative/absolute/fixed

      3)偏移属性:设置定位的元素可以使用偏移属性调整距离参照物的位置

      top          距参照物的顶部
      right      距参照物的右侧
      bottom    距参照物的底部
      left        距参照物的左侧

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         #banner{
     8             width:300px;
     9             height:250px;
    10             /*相对定位*/
    11             position:relative;
    12         }
    13         #d1{
    14             color:#fff;
    15             /*绝对定位*/
    16             position:absolute;
    17             height:30px;
    18             right:0px;
    19             /*根据参照物对应方向的值计算偏移量(250*50%)*/
    20             top:50%;
    21             margin-top:-15px;
    22         }
    23         #d2{
    24             color:#fff;
    25             /*绝对定位*/
    26             position:absolute;
    27             height:30px;
    28             /*根据参照物对应方向的值计算偏移量(250*50%)*/
    29             top:50%;
    30             margin-top:-15px;
    31         }
    32         #fixed_{
    33             position:absolute;
    34             width:150px;
    35             top:230px;
    36             color:#fff;
    37         }
    38     </style>
    39 </head>
    40 <body>
    41     <div id="banner">
    42         <img src="northStar.jpg" class="c1" alt="">
    43         <a href="" id="d1">下一张</a>
    44         <img src="timg.gif" class="c2" alt="">
    45         <a href="" id="d2">上一张</a>
    46     </div>
    47     <div id="fixed_">
    48         固定定位
    49     </div>
    50 </body>
    51 </html>
    固定定位演示

      4)分类

      relative 相对定位(原来的位置占位)

    元素设置相对定位,可参照元素在文档中的原始位置进行偏移,不会脱离文档流

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         #d1,#d2{
     8             width:200px;
     9             height:200px;
    10             background:red;
    11             margin:0 auto;
    12         }
    13         #d1{
    14             background:green;
    15             /*相对定位,已定位的元素可以设置偏移属性,调整元素的显示位置*/
    16             position:relative;
    17             /*
    18             top:100px;
    19             left:-100px;
    20             */
    21             bottom:-100px;
    22             right:100px;
    23         }
    24     </style>
    25 </head>
    26 <body>
    27     <div id="d1"></div>
    28     <div id="d2"></div>
    29 </body>
    30 </html>
    相对定位演示

      absolute 绝对定位(原来的位置不占位)

        1. 绝对定位的元素参照离他最近的已经定位的祖先元素进行偏移,如果没有,则参照窗口进行偏移
        2. 绝对定位的元素会脱流,在文档中不占位,可以手动设置宽高 使用绝对定位 :

      "父相子绝" : 父元素设置相对定位,子元素绝对定位,参照已定位的父元素偏移.

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         #box{
     8             width:500px;
     9             margin:0 auto;
    10             background:orange;
    11             position:relative;
    12         }
    13         #d1,#d2{
    14             width:200px;
    15             height:200px;
    16             background:red;
    17 
    18         }
    19         #d1{
    20             background:green;
    21             /*绝对定位*/
    22             position:absolute;
    23             top:0;
    24             left:0;
    25 
    26         }
    27         body{
    28             /*设置为定位元素*/
    29             position:relative;
    30 
    31         }
    32     </style>
    33 </head>
    34 
    35 <body>
    36     <div id="box">
    37         <div id="d1"></div>
    38         <div id="d2"></div>
    39     </div>
    40 </body>
    41 </html>
    绝对定位演示

      fixed 固定定位(不占位) 

          1. 参照窗口进行定位,不跟随网页滚动而滚动
          2. 脱离文档流

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         #main{
     8             height:1500px;
     9             background:pink;
    10         }
    11         #chat{
    12             width:300px;
    13             height:300px;
    14             background:orange;
    15             /*固定定位:脱离文档流,参照窗口偏移;
    16             不跟随页面滚动而滚动*/
    17             position:fixed;
    18             right:0;
    19             bottom:0;
    20         }
    21     </style>
    22 </head>
    23 <body>
    24     <div id="main"></div>
    25     <div id="chat">千年传奇,值得你拥有,快注册吧,注册就送屠龙刀。</div>
    26 </body>
    27 </html>
    固定定位演示

      5)堆叠次序

      元素发生堆叠时可以使用 z-index 属性调整已定位元素的显示位置,值越大元素越靠上:
      属性 : z-index
      取值 : 无单位的数值,数值越大,越靠上
      堆叠:
        1. 定位元素与文档中正常元素发生堆叠,永远是已定位元素在上
        2. 同为已定位元素发生堆叠,按照 HTML 代码的书写顺序,后来者居上

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         div{
     8             width:200px;
     9             height:200px;
    10             background:red;
    11         }
    12         #d1{
    13             background:green;
    14             position:relative;
    15             /*只有定位元素才能使用偏移属性调位置*/
    16             /*
    17             position:relative;
    18             top:100px;
    19             left:100px;
    20             */
    21             z-index:1
    22         }
    23         #d2{
    24             /*永远定位元素在上*/
    25             position:relative;
    26             left:100px;
    27             bottom:-100px;
    28 
    29         }
    30         #d2:hover{
    31             /*调整堆叠次序,属性:z-index
    32             取值为无单位的整数,值越大越靠上
    33             只有定位元素能够使用z-index属性调整次序*/
    34             z-index:2;
    35         }
    36 
    37     </style>
    38 </head>
    39 <body>
    40     <!--正常元素与定位元素发生堆叠,永远定位元素在上方显示-->
    41     <!--同为定位元素发生堆叠,根据标签的书写顺序,后来者居上-->
    42     <div id="d2"></div>
    43     <div id="d1"></div>
    44     <h1>
    45         实现网页:
    46         上方为导航栏(包含若干导航项,包含下拉菜单)
    47         下方为轮播图区域(包含图片,图片索引,左右按钮)
    48     </h1>
    49 </body>
    50 </html>
    z-index示例

     

  • 相关阅读:
    vijos 1167 南蛮图腾(打印图案)
    noj 1413 Weight 宁波 (dp)
    noj 1173 (宁波)Birdlike Angry Pig (暴力枚举)
    [1438] Get Up, Soldier! noj(宁波)
    [1441] Babelfish noj(宁波)
    长沙理工大学oj 1486: 文本整齐度 哈理工 1476(dp)
    noj 1414 (宁波) Rectangular Parallelopiped(sort+dp)
    8.6前端之内联框架
    8.5前端之Html样式和文本格式化
    8.5前端之类和id
  • 原文地址:https://www.cnblogs.com/maplethefox/p/11179111.html
Copyright © 2020-2023  润新知