css盒子模型布局整理

心已赠人 2022-10-19 05:55 222阅读 0赞

# 浮动-float #

网页布局的本质-用css来摆放盒子。把盒子摆放到相应位置。css提供了三种传统布局方式

1.  普通流（标准流）
2.  浮动方式
3.  定位方式

## 关于标准流 ##

1.  块级元素会独占一行，从上到下顺序排列
    
    1.  常用元素： div hr p h1-h6 ul ol form table
2.  块级元素中的行内元素会从左到右顺序排列，碰到父元素边缘则自动换行
    
    1.  常用元素 span a i em等

## 浮动-float ##

### 浮动特性 ###

1.  浮动的元素会脱离标准流（脱标，位置会发生改变，飘在标准流的最上边）
2.  浮动的盒子不再保留原先的位置
3.  如果多个盒子都设置了浮动，他们会按照属性值一行内显示并且顶端对齐排列。
4.  浮动元素会具有行内块元素属性
    
    1.  任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性；
    2.  如果块级元素没有设置宽度，默认宽度和父级宽度一样宽，但是添加浮动之后，它的大小根据内容来确定。
    3.  浮动的盒子中间是没有缝隙，是紧挨着一起的
    4.  行内元素同理

为了约束浮动元素的位置，我们网页布局一般采取的策略是：

先用标准流的父元素排列上下位置，之后内部元素采取浮动排列左右位置，符合网页布局第一准则。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70 1][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            li{
                list-style: none;
            }
            .big{
                height: 600px;
                width: 1200px;
                background-color: pink;
                margin: 100px auto;
            }
            .left{
                width: 300px;
                float: left;
                height: 600px;
                background-color: gray;
            }
            .right{
                width: 900px;
                float: right;
                height: 600px;
                background-color: yellow;
            }
            .right>div{
                float: left;
                width: 211px;
                height: 293px;
                background-color: black;
                margin-left: 14px;
                margin-bottom: 14px;
            }
        </style>
    </head>
    <body>
        <div class="big">
            <div class="left">123</div>
            <div class="right">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>    
            </div>
        </div>
        
    </body>
    </html>

### **注意注意注意：** ###

> **浮动的盒子只会影响浮动盒子后面的标准流，而不会影响前面的标准流。**
> 
> 前面的标准流独占一行；
> 
> 后边的标准流在浮动的下边；
> 
> 一个元素浮动了，理论上其余的兄弟元素也要浮动。
> 
> 一个盒子里面有多个盒子，如果一个盒子浮动了，那么其他的兄弟盒子也要浮动。

## 清除浮动 ##

为什么要清除浮动？

由于父级盒子很多情况下，不方便给高度，但是子盒子的浮动又不占有位置，最后父盒子高度为0时，就会影响下边的标准流黑子，所以需要清除浮动。

子盒子浮动，就脱标，父盒子没有高度就是0，不会撑开盒子。

语法：

选择器{
        clear:属性值
    }

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>属性值</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>left</td> 
   <td>不允许左侧有浮动元素（清除左侧浮动的影响）</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>不允许右侧有浮动的元素（清除右侧浮动的元素）</td> 
  </tr> 
  <tr> 
   <td>both</td> 
   <td>同时清除左右两侧浮动的影响</td> 
  </tr> 
 </tbody> 
</table>

我们的实际工作中，几乎只用clear:both;

清除浮动的策略是：闭合浮动；

## 清除浮动的方式 ##

1.  额外标签法，是w3c推荐的方法；
2.  父级元素添加overflow:hidden；
3.  父级元素添加after伪元素；
4.  父级添加双伪元素；

### 额外标签： ###

隔离法。会在浮动元素的末尾添加一个空的标签。例如：<div style="clear:both"></div>或者是其他标签 <br/>

**清除浮动的本质：清除浮动元素脱离标准流造成的影响；**

清除浮动的策略：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。

### 父级元素添加overflow ###

可以给父元素添加overflow属性，将其属性值设置为hidden、auto或者是scroll

优点：代码简洁；

缺点：无法显示溢出的部分；

### :after伪元素 ###

:after方式是额外标签法的升级版，也是给父元素添加

.clear:after{
        content:''; /*该属性为必填项*/
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    .clearfix{ /*IE 6、7专有*/
        *zoom:1;
    }
    
    
    <div class="clearfix>

### 双伪元素清除浮动 ###

.clearfix:before,.clearfix:after{
        content:'';
        distplay:table;
    }
    .clearfix:after{
        clear:both;
    }
    .clearfix{
        *zoom:1;
    }

为什么清除浮动：

1.   父级没高度
2.  子盒子浮动了；
3.  影响下边的布局了，我们就应该清除浮动了；

# PS切图 #

图层切图；切片切图；ps插件切图（cutterman-正版才能安装，绿色版不能安装）

# css书写规范 #

建议遵循以下顺序：

1、布局定位属性：display/position/float/clear/visibility/overflow

2、自身属性：width/height/margin/padding/border/background

3、文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word

4、其他属性(css3)：content/cursor/bord-radius/box-shadow/text-shadow/        background:linear-gradient...

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70]: /images/20221005/13c523b86bd14ed48a8aca624db36b20.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70 1]: /images/20221005/13fe8f44c88c45af86ef05aaa61fdf02.png