盒模型、外边距合并、元素浮动问题、定位！

时间 2019-11-30

原文原文链接

盒模型

在学习css进行布局时离不开盒模型，盒模型中装的是html中的内容，咱们能够想象它是一个存在与二维平面的盒子。css

盒模型的组成：一个盒模型由外到内能够分红四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。其中咱们能够经过css改变margin、border、padding的样式，content是html内容。具体样式如图： html

盒模型的分类：浏览器

标准盒模型bash

元素实际的width = 咱们设置的width；布局

元素实际的宽 = width + padding + border；学习
怪异盒模型flex

元素实际的width + padding + border = 咱们设置的width；ui

元素的实际的宽 = width；spa
相互转化：咱们能够经过box-sizing指定盒模型的种类3d

box-sizing:content-box->标准盒模型；

box-sizing:content-border->怪异盒模型。

外边距合并

w3c中指出外边距合并指的是，当两个垂直外边距相遇时，它们将造成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出如今另外一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

当一个元素包含在另外一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

以上两种为外边距合并的并列关系和嵌套关系。

解决方法

并列关系：只给其中的某一个元素设置外边距。
嵌套关系：

给父元素设置边框
给父元素设置溢出隐藏：overflow：hidden
给父元素或子元素设置定位 :position: absolute(绝对定位)
给父元素或子元素设置浮动

元素浮动

标准文档流：（1）空白折叠现象（2）高矮不齐底边对齐（3）自动换行一行写不满，换行写。

css中有3种方法能够使一个元素脱离标准文档流：

元素浮动
固定定位
绝对定位

咱们来讲一下元素浮动:

float：left->左浮动按照html的结构顺序从左向右依此排列

float: right->右浮动按照html的结构顺序从右向左依此排列

元素在浮动后空间会释放

浮动塌陷问题解决

父元素设置溢出隐藏 overflow: hidden
给父元素设置高度
给父元素新增一个子元素（最后一个）而且清除浮动
clearfix 新增伪元素清除浮动

.clearfix::after{
        content: '';
        display: block;
        clear: both;
复制代码

定位

定位至关于给一个元素设置位置或相对于父元素、另外一个元素、甚至相对于浏览器，经常使用的定位：

position:relative;相对定位相对于元素自身进行定位定位后空间不释放；
position:absolute;绝对定位相对于最近的已经定位的祖先元素进行定位若是没有最终找到body 定位后空间释放；
position:fixed;固定定位相对于浏览器窗口进行的定位定位后空间释放；

空间释放后咱们引入层级概念 z-index：n；

值越大，越在上面。

行列布局

两列布局

左侧固定中间自适应

定位

<style>
#baba{
    width: 100%;
    height: 500px;
    background: #653232;
    position: relative;
}
.left{
    width: 200px;
    height: 500px;
    background: #445544;
    position: absolute;
    top: 0;
    left: 0;
  
}
.right{
    height: 500px;
    margin-left: 200px;
    background: #ff0036;
}
</style>
<body>
    <div id="baba">
    <div class="left">z</div>
    <div class="right">z</div>
    </div>
</body>
复制代码

flex

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100%;
            height: 500px;
            display: flex;
        }
        #box>div:nth-child(1){
            width: 200px;
            height: 400px;
            background-color: brown;
        }
        #box>div:nth-child(2){
            height: 400px;
            background-color: violet;
            flex-grow: 1;
        }
    </style>    
</head>
<body>
    <div id="box">
        <div></div>
        <div></div>
    </div>
复制代码

效果图：

2. 左右固定中间自适应

浮动

<style>
.container{
    width: 100%;
    height: 500px;
    background: #000000;
}
.left{
    width: 100px;
    height: 500px;
    background: #ffffff;
    float: left;
}
.right{
    width: 100px;
    height: 500px;
    background: #ff0036;
    float: right;
}
.center{
    margin: 0 100px;
    height: 500px;
    background: #559966;
}
</style>
</head>
<body>
<div class="container">
    <div class="left">我是左边</div>   
    <div class="right">我是中间</div>
    <div class="center">我是右边</div>
    
</div>    
复制代码

flex

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100%;
            height: 500px;
            display: flex;
        }
        #box>div:nth-child(1){
            background-color: aqua;
            flex: 0 0 200px;
        }
        #box>div:nth-child(2){
            background-color: black;
            flex: auto;
        }
        #box>div:nth-child(3){
            background-color: blue;
            flex: 0 0 200px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div>我是左边</div>
        <div>我是中间</div>
        <div>我是右边</div>
    </div>
复制代码

效果图：

上下固定中间自适应

定位

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .top{
            height: 50px;
            width: 100%;
            background: #654826;
            position: absolute;
            top: 0;
        }
        .buttom{
            height: 50px;
            width: 100%;
            background: #872387;
            position: absolute;
            bottom: 0;
        }
        .center{
            background: #821248;
            width: 100%;
            position: absolute;
            top: 50px;
            bottom: 50px;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="center"></div>
    <div class="buttom"></div>
</body>
复制代码

flex

<style>
        *{
            margin: 0;
            padding: 0;
        }
        html,
        body
        {
            width: 100%;
            height: 100%;
        }
        #box{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        #box>div:nth-child(1){
            background-color: aqua;
            height: 50px;
        }
        #box>div:nth-child(2){
            background-color: black;
            flex-grow: 1;
        }
        #box>div:nth-child(3){
            background-color: blue;
            height: 50px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
复制代码

效果图：

感谢阅读！