css布局

CSS：层叠样式表（Cascading Style Sheets）

css学起来非常有意思，但有意思不代表容易，想要精通还需道远啊，作为刚刚入门学css新手，我们先不来讲更有弹性的flex布局，从最踏实的基础的看起，我们来学学float和position布局~

1. 左右布局

1.1 float

image

如图，我摆了三个盒子，想要做成这种左右布局，只要给子元素加上float：left;就可以了，而且如果两个盒子宽度加起来和父元素的宽度一致，那么我们给right盒子加上float：right;也可以实现如图所示的左右布局。

除此以外，我们给使right盒子margin-left:250px;也可以实现如图所示布局。当然，如果我们不给出right盒子的宽度，同样给出margin就可以使右边盒子宽度自适应了。

image image

小tips：当我们使用了float，子元素浮动，下面的元素就会被影响，记得给父元素添加一个伪类clearfix，在css中这样写：

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

就可以解决啦~

1.2 poistion

image

absolute 就是生成绝对定位的元素，相对于我们在父元素中的relative定位，如图我们就是利用这个进行了布局。

fixed是position中另一个绝对定位的元素，相对于浏览器窗口进行定位。

static是默认值，即无定位，元素在文档流中。

小tips：块级元素的高度由文档流决定,文档流就是文档内元素的流动方向（内联元素从左往右流，块级元素从上往下流）

2. 左中右布局

2.1 float

image

利用float布局，如左右布局相似，需要注意的就是middle不能写float：right。

right盒子可以用float：left;也可用float：right；以及margin，但注意的是middle就不可以在使用margin来进行调试了。那怎么样可以用margin呢？看下图：

image

在html里面，middle盒子是在下面的，此时在给middle左右margin的距离，就可以实现如图布局了。

2.2 position

image

css其实很自由，每一种想法可能都有很多种方法去到达它，我仅仅是分成了float和position，其实不止，布局的方法同样还有很多种。

3. 水平居中

同我上面说的一样，方法有很多，我可能并不能一一列出，那我就列举几个自己目前较为常用的方式。

3.1 行内元素水平居中

image

再复杂一点的话，可以在我们想要居中的元素外添加一个父元素，然后使他的父元素text-align:center; 就可以了。

或者也可以调整它的padding和margin来达到水平居中以及垂直居中的效果。

3.2 块级元素

image

也就是说，让盒子左右的margin实现auto就可以水平居中了。这个意思其实就好像你自己手动调左右margin使两侧距离一样来实现水平居中一样。

3.3 display

我们可以把元素display：inline-block; 然后就可以愉快的在父元素里text-align:center; 啦~

image

你问还有没有方法，当然有啦

3.4 position

image

利用绝对定位来居中，利用padding，margin来居中，利用伪元素before和after也可以，方法真的有很多种，要学会探索~

4. 垂直居中

4.1 line-height=height

通常情况下，在字体像素不是太大的状况下，基本可行。

image

4.2

块状元素:

还可以设置子元素position通过设置top、bottom来使元素垂直居中，父元素要设置定位为static以外的值。

还有设置padding，margin也可以实现垂直居中。

5. 其他小技巧

5.1 margin:0 auto; 慎用，要注意你有没有设置宽度，否则没法用。

5.2 对于内联元素来说，margin和padding都只有左右方向，top和bottom明显设置不上。直到我们设置了display：inline-block ;

5.3 我们需要给元素设置宽度时，使用max-width 替代 width 可以使浏览器更好地处理小窗口的情况。

image image

5.4 当我们给了元素浮动属性，同时让他的宽度等于50%，这样两个元素就并排在一行上占的满满当当，我们加一个padding或者margin都会使元素被挤到下一行，那么我们怎么解决呢？

box-sizing: border-box; 就派上用场了，这个元素意味着告诉浏览器，元素的内边距和边框属于它自身的宽度了。

image image

以上就是目前学习的常用css布局啦，欢迎指错~