关于CSS布局

本次我写的是关于CSS布局的一些方法，CSS布局就类似于排版，也是最基础的一项工作，想要写的文章让读者看的有耐心我觉得布局是必不可少的。下面我就列出一些css最基础的布局方式。

1.css的左右布局

左右布局很常见，简单来说就是左边一个容器右边一个容器，哪里都会看到它的身影，就比如我现在在里写的markdown里面的预览模式一样，它也是左右布局的模式；但是通常我都会用div这个块级元素来创造我的模块，这时候问题就来了，

这个块级元素是独自霸占一行的，它的左右只有它自己这个时候如果你在加一个

它只会出现在上一个

的下面一行是不会出现在上一个

的左边的，那么如何是这两个

变成左右布局的呢? 下面有请我们的黑科技float:left

float:left顾名思义是一种属性，它的加入给了块级元素浮动的效果 例:
html:

CSS:

.one{
  width:100px;
  height:100px;
  background: black;
  float:left;  
}
.two{
  width:100px;
  height:100px;
  background: red;
  float:left;
  }

我在两个子元素里加了float:left 之后它们脱离了文档流 ，就像内联元素一样可以在一行里显示了，自然也变成了左右布局。

2.css的水平居中

什么叫水平居中?就是一个子容器在自己的父容器中处于水平中间的位置。以文档流的形式来看就是一段文字处在这一行的最中间的位置。那如何实现它们的水平居中呢? 我们可以用margin:0 auto或者可以使用text-align:center

方法一:使用margin:0 auto从而获得水平居中 例:

.one{
  width:100px;
  height:100px;
  background: black;
  margin:0 auto;  
}

方法二 脱离文档流从而获取水平居中
给目标设置一个父元素 然后给目标div变成脱离文档流状态( 可以使用display:inline-block来实现脱离文档流) 然后我们把text-align:center写在父元素上 这样我们就也是先了水平居中状态

.all{
  border:1px solid red;
  text-align: center;
}
.one{
  width:100px;
  height:100px;
  background: black;
  display:inline-block;
}

水平居中和垂直居中的区别 :

水平居中：文字的左右两边的间距是一样的，
垂直居中:文字的上边和下边的间距是一样的。

image

3.垂直居中

垂直居中相信看了上面的图片大家就明白它和水平居中的区别了那么如何做到垂直居中呢?我是这样做的 :

.all{
  width:500px;
  height:500px;
  border:1px solid red;
  text-align: center;
  position: relative;
}
.one{
  width:100px;
  height:100px;
  background: black;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

1在普通文档流里，margin: auto; 的意思是设置元素的margin-top和margin-bottom为0;

2.设置了position: absolute; 的元素会变成块元素，并脱离普通文档流。而文档的其余部分照常渲染，元素像是不在原来的位置一样。

3.设置了top: 0; left: 0; bottom: 0; right: 0; 样式的块元素会让浏览器为它包裹一层新的盒子，因此这个元素会填满它相对父元素的内部空间，这个相对父元素可以是是body标签，或者是一个设置了position: relative; 样式的容器。

4.css的其它小技巧

1.使用border:1px solid red来显示所包裹的物体的具体位置及大小往往是很有用的。

2.比如说在做一个导航栏你想给每个链接下面鼠标罗上去都会出现一个下边框时，如果你直接加一个hover然后你面给一个border-bottom:1px solid black时，当你去点击这些标签时虽然会出现下划线但是你的导航栏会抖动 那么如何解决呢?很简单你只要在原来的标签上协商这样一段代码border-bottom:1px solid transparent这样的原理呢是在原来的标签上加上一个同名的下划线来占位 这样当我们鼠标点击的时候就不会再出现位置不足而抖动的情况了