css当两个块级元素并排时怎么让他们不是整体一起移动

布局是CSS中一个十分重要的部分，下面我对CSS基础布局中的一些重点和小技巧做了一个小结，提醒自己注意，也希望可以对大家有一些帮助。

【工于利其事，必先利其器】

所以先认识一下 CSS关于布局的一些属性吧

display（显示）

display是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是“block”或“inline”。

“block”被称为块级元素，每一个块元素会各占一行，并默认宽度撑满页面

常用的块元素有：<div> <p> <form> <header> <footer> <section> 等等

“inline”被称为内联元素，一个内联元素可以在段落内添加并不会打乱段落布局

常用的内联元素有：<span> <a>等等

还有一些其他的 display 值，稍后用到时会讨论到。

width（宽度）和 max-width（最大宽度）

<div class="main-1"></div>
<div class="main-2"></div>

明显看到当窗口缩小时，红色div已经超过了页面宽度，而绿色div自适应页面宽度来调整自己的宽度

块元素<div>的默认宽度时占满整个页面，当给它指定一个宽度后，则只占据所给的宽度，但当浏览器的页面窗口宽度小于所指定长度时，则浏览器会显示一个水平滚动条来让浏览者拖动页面以便看到完整的页面，在这种情况下使用“max-width”替代“width”可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要。对于块元素来说也可以给一个外边距属性来使其水平居中

{ margin: 0 auto;}

盒模型

在我们讨论宽度的时候，我们应该讲下与它相关的另外一个重点知识：盒模型。当你设置了元素的宽度，实际展现的元素却超出你的设置，这是因为元素的边框和内边距会撑开元素。

<div>的高度和宽度都一样，让其边框变厚，加了内边距之后，所占的空间就不一样了，如果在以前，人们需要测量计算去保持一样的大小，但好在CSS出了一个新的属性，专门用来调整这样的现象：

box-sizing: border-box;

此时元素的内边距和边框不再会增加它的宽度。

可以了，无论怎么改变块元素的内部格式，只要加上这个属性，他们的宽度就保持一致。

position（位置）

为了制作更多复杂的布局，我们需要讨论一下 position 属性。它有非常多的值，让我们先一个个的过一遍，不过最好还是边实践边记忆。

static（静态）

.static {
  position: static;
}

static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性的其他值的元素表示它会被“positioned”。

relative（相对定位）

在一个相对定位的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。

fixed（固定定位）

一个固定定位元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。

一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。

移动了椭圆的位置但红色div仍旧对于窗口位置不变

absolute（绝对定位）

absolute 是最复杂的 position 值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。（一般用 relative）

相对于父元素定位

float（浮动）

左右布局

再来回忆一下前面讲的，<div>是一个块元素，每个<div>会各占一行，占满窗口，而当我们想要让两个<div>横向摆放时，就需要用到“float”浮动。

默认定位时两个 div 并列排放各占一行

使用 float 浮动之后达到左右布局的目的

但需要注意的是，一般情况下下面还会有其他的内容，此时就一定会出bug

下面的内容没有正常归入到文档流之中产生bug

正确的浮动做法是这样

①.在需要浮动的元素中加入 float: left

②.在这两个子元素的父元素属性中赋值 class=" clearfix"

③.伪元素

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

于是就不会出现bug了

如果想要三个 div 横向布局呢，就在三个子元素上都加上 float: left

左中右布局

如果想要实现这样的布局，方法其实有很多，简单来说两个，

三个子元素都加上 float: left，然后给父元素设定一个宽度，三个子元素的宽度都设置为“33.33%”（有人说加起来也只有99.99%啊，额一般浏览器不会那么精确的，不信的话可以亲自去试一试），于是就会达到左中右布局

当然除了33.33%外，也可以自行计算多少像素，当然比较麻烦

还有一种办法

前两个子元素添加 float: left，第三个元素添加 float: right，然后用外边距来让它们之间存在间隙即可

浮动能做到的事，还有一个属性也能做到

display:inline-block

需要注意的是：

①.只要有 display: inline-block 就要跟一个 vertical-align: top

②.需要设置每一列的宽度

③.如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙

水平居中

内联元素：对父元素设置 text-align:center；

定宽块状元素: 设置左右 margin 值为 auto；

不定宽块状元素: 设置子元素为 display:inline，然后在父元素上设置 text-align: center；

垂直居中

父元素一定，子元素为单行内联元素：设置父元素的 height 等于行高 line-height；

父元素一定，子元素为多行内联元素：设置父元素的 display: table-cell 或 inline-block，再设置 vertical-align: middle；

块状元素：设置子元素 position : absolute 并设置top、bottom为0，父元素要设置定位为非默认值，margin:auto ；

以上只是一些最基础的用法，对于CSS的布局还有太多太多的新知识等着我去探索~