CSS 布局

css.jpg

---

最近开始学习CSS, CSS的知识十分复杂，需要不断去发掘和完善。对于新人来说，最好的方法就是尝试，去模仿，遇到问题再去深入了解，逐渐增加对CSS的基础的理解。

1.左右布局

1.1 左右内容固定
使用 '浮动 float:left;'实现左右布局

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

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

left-right.png

1.2.左侧固定，右侧内容自适应
'right' 的宽度加上 'margin-left'
边距: margin-left:

1.3 使用position实现左右布局

position.png

父元素设置为position:relative;

left: 设置固定宽度，设定为绝对定位'position:absolute'。

right: 设置为相对定位'position:relative'。

right设置左边距，'margin-left' 为左侧栏的宽度。

2. 左中右布局

2.1.用 'float' 实现左中右布局

注意mid不能写float：right

2.2.用 'position' 实现左中右布局

2.2.png

3. 水平居中

水平居中方法有很多, 就列举几个自己较为常用的方法。
3.1 margin: 0 auto; 常用于块级元素

3.1.png

也就是让盒子左右的margin实现auto就可以水平居中了。

3.2 .行内元素水平居中
使用

text-align:center; 

或者调整它的padding和margin来达到水平居中以及垂直居中的效果。
或者使用display
我们可以把元素display：inline-block; 然后就可以在父元素里加入text-align:center;

你可以使用 inline-block 来布局。但是要注意：

• vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。
• 你需要设置每一列的宽度
• 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙

4. 垂直居中

4.1 让元素的高度等于行高及height=line-height的值；

4.1

4.2 给上下一个相同的padding值也可以实现垂直居中

等其他小技巧

• margin:0 auto; 慎用，要注意你有没有设置宽度，否则没法用。
• 对于内联元素来说，margin和padding都只有左右方向，top和bottom设置不了。解决方法是display：inline-block ;
• 最好使用max-width 替代 width 可以使浏览器自适应屏幕宽度.
• 当我们给了元素浮动属性，同时让他的宽度等于50%时，加一个padding或者margin都会使元素被挤到下一行.
  解决方法:box-sizing: border-box;使得元素的内边距和边框属于它自身的宽度了。

---

上述1，2种布局方式现已不提倡使用，属于新手练习的布局方式
这里推荐阮一峰老师的关于'flex'布局的博客