Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS定位
Blogger Information
Blog 47
fans 0
comment 0
visits 21088
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS定位
P粉036614676
Original
385 people have browsed it

1.块级元素

1.1常用的块级元素

  1. div p table ul lo li h1-h6 dl dt

特点：

  • 块级元素独占一行
  • 默认的宽度占满父级元素，行内元素不会换行
  • 可以设置宽高

    1.2行级元素

    1. a img span b strong input select section
    特点：
  • 不可以设置宽高

    1.3内联元素

    特点：
    高度: 内容高度
  • 宽度: 内容宽度
  • 宽高不能自定义
  • padding有效,margin只有左右有效
  • 排列: 水平, 排不下,则换行显示

  • display: inline

    2.块级元素定位

    2.1 static

    静态布局是浏览器默认布局，由上到下布局，先写的盒子在上面，后写的盒子在下面
    样式
    `

    2.2 absolute

    绝对定位：定位根据body元素和absolute元素和relative，不会由于html排版而移动
    就是如果父级元素是定位是absolute元素和relative的盒子，就相对于父盒子，否则相对于body盒子
    样式

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8.   <style>
    9.        div{
    10.           border: 1px dotted red;
    11.        }
    12.        .father{
    13.           background-color: aqua;
    14.           position: absolute;
    15.           top: 20px;
    16.           left: 20px;
    17.        }
    18.        .child{
    19.           background-color: bisque;
    20.        }
    21.        .sty1{
    22.           background-color: blue;
    23.           height: 120px;
    24.           border: 1px solid black;
    25.           /* position: relative; */
    26.   </style>
    27. </head>
    28. <body>
    29. </body>
    30. <div class="sty1">
    31.   <div class="father">父亲</div>
    32.   <div class="child">孩子</div>
    33. </div>
    34. </html>

    2.3 relative

    和staticd定位相比可以使用top，bottom等，就这一点不同
    样式

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8.   <style>
    9.        div{
    10.           border: 1px dotted red;
    11.        }
    12.        .father{
    13.           background-color: aqua;
    14.           position: absolute;
    15.           top: 20px;
    16.           left: 20px;
    17.           position: relative;
    18.        }
    19.        .child{
    20.           background-color: bisque;
    21.        }
    22.        .sty1{
    23.           background-color: blue;
    24.           height: 120px;
    25.           border: 1px solid black;
    26.        }
    27.   </style>
    28. </head>
    29. <body>
    30. </body>
    31. <div class="sty1">
    33.   <div class="child">孩子</div>
    34. </div><div class="father">父亲</div>
    35. </html>

    2.4 fixed

    固定定位：不会由于卷轴而移动，根据body去定位
    样式

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8.   <style>
    9.        div{
    10.           border: 1px dotted red;
    11.        }
    12.        .father{
    13.           background-color: aqua;
    14.           position: absolute;
    15.           top: 20px;
    16.           left: 20px;
    17.           position: fixed;
    18.        }
    19.        .child{
    20.           background-color: bisque;
    21.        }
    22.        .sty1{
    23.           background-color: blue;
    24.           height: 120px;
    25.           border: 1px solid black;
    26.        }
    27.   </style>
    28. </head>
    29. <body>
    30. </body>
    31. <div class="sty1">
    33.   <div class="child">孩子</div>
    34. </div><div class="father">父亲</div>
    35. <div class="sty1"></div>
    36. <div class="sty1"></div>
    37. </html>

    2.5 sticky

    没有到达顶部前会随卷轴而移动，到达顶端后会一直在顶端
    没有top，left等
    样式

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8.   <style>
    9.        div{
    10.           border: 1px dotted red;
    11.        }
    12.        .father{
    13.           background-color: aqua;
    14.           /* position: absolute; */
    15.           top: 20px;
    16.           left: 20px;
    17.           position: sticky;
    18.        }
    19.        .child{
    20.           background-color: bisque;
    21.        }
    22.        .sty1{
    23.           background-color: blue;
    24.           height: 120px;
    25.           border: 1px solid black;
    26.        }
    27.   </style>
    28. </head>
    29. <body>
    30. </body>
    31. <div class="sty1">
    33.   <div class="child">孩子</div>
    34. </div><div class="father">父亲</div>
    35. <div class="sty1"></div>
    36. <div class="sty1"></div>
    37. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post