css之布局

谁践踏了优雅 2022-09-05 00:09 207阅读 0赞

1.默认文档流：从内到外，自上而下，从左到右

2.display：none block(块级元素），inline(行内元素），inline-block(行块元素）

3.float：none  left right

4.position：定位布局  与top，right，left，bottom搭配使用

position：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>position：static</td> 
   <td> <p style="margin-left:.0001pt;text-align:justify;">静态定位：默认文档流</p> </td> 
  </tr> 
  <tr> 
   <td>position：relative</td> 
   <td>相对定位：【自己原来的位置】进行移动，不脱离文档流</td> 
  </tr> 
  <tr> 
   <td>position：absolute</td> 
   <td> <p style="margin-left:.0001pt;text-align:justify;">绝对定位：【有定位的祖先元素】进行移动，脱离文档流</p> <p style="margin-left:.0001pt;text-align:justify;">定位祖先元素：人为指定&nbsp; 父相子绝</p> </td> 
  </tr> 
  <tr> 
   <td>position：fixed</td> 
   <td> <p style="margin-left:.0001pt;text-align:justify;">固定定位：【浏览器】 脱离文档流</p> <p style="margin-left:.0001pt;text-align:justify;">Z-index值人为设置最高</p> <p style="margin-left:.0001pt;text-align:justify;">广告、客服、回到顶部、导航菜单</p> </td> 
  </tr> 
  <tr> 
   <td>position：sticky</td> 
   <td> <p style="margin-left:.0001pt;text-align:justify;">粘性定位：临界值 top/left</p> <p style="margin-left:.0001pt;text-align:justify;">position: -webkit-sticky;</p> </td> 
  </tr> 
 </tbody> 
</table>

使用条件：

1、父元素不能overflow:hidden或者overflow:auto属性。

2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

3、父元素的高度不能低于sticky元素的高度

4、sticky元素仅在其父元素内生效

5.flex弹性布局

对父元素增加display：flex

对父元素使用的属性是：flex，flex-direction（排列方向，row/column），flex-wrap是否换行），flex-shrink,flex-flow(是flex-direction和flex-wrap的简写

可以参照网址[https://blog.csdn.net/m0\_37058714/article/details/80765562][https_blog.csdn.net_m0_37058714_article_details_80765562]  了解flex-grow、flex-shrink、flex-basis

多种布局例子：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>position</title>
        <style>
            /* div {
                border: 1px solid;
            } */
            
            .header {
                height: 60px;
                background-color: #009aff;
            }
            
            .header .header_bottom {
                height: 40px;
                background-color: #0033ff;
                position: relative;
                top: 20px;
                width: 100%;
            }
            
            .main {
                margin-top: 5px;
                width: 100%;
            }
            /* .main>div {
                margin-right: 2.5%;
            } */
            
            .main>div:nth-child(2) {
                float: left;
                height: 80px;
                width: 50%;
                background-color: #8080ff;
                margin-right: 5%;
            }
            
            .main>div:nth-child(3) {
                float: right;
                height: 80px;
                width: 20%;
                background-color: #0033ff;
            }
            
            .main::after {
                content: '';
                display: block;
                clear: both;
            }
            
            .left {
                float: left;
                height: 80px;
                width: 20%;
                background-color: #0081ff;
                margin-right: 5%;
                position: relative;
            }
            
            .left1 {
                height: 40px;
                background-color: #0099cc;
            }
            
            .left2 {
                height: 30px;
                background-color: #5785d0;
                position: absolute;
                bottom: 0;
                width: 100%;
                z-index: 100;
            }
            
            .center1 {
                height: 30px;
                background-color: #33ccff;
                position: relative;
            }
            
            .center11 {
                height: 10px;
                width: 10px;
                background-color: #0033ff;
                position: absolute;
                top: 10px;
            }
            
            .center2 {
                height: 40px;
                background-color: #3366ff;
                position: relative;
                top: 10px;
            }
            
            .center22 {
                height: 10px;
                width: 10px;
                background-color: #0033ff;
                position: absolute;
                right: 0;
                bottom: 10px;
            }
            
            .footer {
                height: 20px;
                background-color: #0081ff;
                margin-top: 5px;
            }
            
            .center {
                height: 80px;
                width: 60%;
                background-color: #8080ff;
            }
            
            .right {
                height: 80px;
                width: 20%;
            }
        </style>
    </head>
    
    <body>
        <div class="header">
            <div class="header_bottom">
    
            </div>
        </div>
        <div class="main">
            <div class="left">
                <div class="left1">
    
                </div>
                <div class="left2">
    
                </div>
    
            </div>
            <div class="center">
                <div class="center1">
                    <div class="center11">
    
                    </div>
    
                </div>
                <div class="center2">
                    <div class="center22">
    
                    </div>
                </div>
    
            </div>
            <div class="right">
    
            </div>
        </div>
        <div class="footer">
    
        </div>
    
    </body>
    
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDMwOTY2_size_16_color_FFFFFF_t_70][]

[https_blog.csdn.net_m0_37058714_article_details_80765562]: https://blog.csdn.net/m0_37058714/article/details/80765562
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDMwOTY2_size_16_color_FFFFFF_t_70]: /images/20220829/2ad0b6db0b304c21b2d5b41a879459b5.png