css布局

本文版权归饥人谷和本人所有

1.单栏布局
注意点：width与max-width的区别
width:1000px表示写定宽度，容器的宽度一直为1000px;
max-width:1000px 表示最大宽度为1000px,
当浏览器的宽度大于1000px时，容器的宽度为1000px；
当浏览器的宽度小于1000px时，容器的宽度则变为由内容撑开的宽度，不再是1000px;
demo

单栏布局1

另外一种写法可以减少冗余的代码：
直接把class='layout'加在需要的div上
demo

优化代码

一般来说，头部、尾部需要全部占满空间，中间内容的宽度写定。
当中间内容的宽度写定为960px时 即width:960px时会出现一个小问题。
由于头部和尾部仅仅是内容区域写定了宽度，头部和尾部本身的div没有写宽度，所以当浏览器宽度小于960px时，header和footer的长度没有960px,因而出现空白

出现空白

解决方案：
在header和footer上直接添加一句 min-width:960px
即当浏览器宽度大于960px时，充满整个浏览器，
当浏览器宽度小于960px时，header和footer仍然为960px。

demo

2.双栏布局
即一栏固定，另外一栏自适应
采用浮动+margin
demo

3.三栏布局
两边两栏宽度固定 中间一栏自适应
核心写法是 两边两栏分别float:left;``float:right
中间一栏控制margn-left,margin-right
同时要注意html的写法
aside和menu要写在前面，content要写在后面，这跟浏览器渲染的方式有关。
当浏览器读到aside时，会读取相应css，aside左浮动，
当浏览器读到menu时，会读取相应css，menu此时看不到aside，menu右浮动，
当浏览器读到content时，会读取相应css，content此时看不到aside和menu，再加上控制了margin所以得到正确的效果。

html写法

demo

demo截图

如果先写content会有如下 结果

出了bug

4.圣杯布局
利用浮动元素+负margin
通过调整负margin使得aside和menu移动至main的上面两边
再控制父元素的padding以及通过position:relative调整aside和menu的位置
demo
但圣杯布局有一个bug就是当aside的宽度大于main的宽度时会出现错位。
因为content的宽度就是main的宽度，而aside移动的关键就是其margin-left的值为-100%即为父元素的宽度，但是由于父元素的宽度小于aside的宽度，所以其无法上移，因而错位。

4.双飞翼布局：
demo
双飞翼布局用来解决圣杯布局的那个bug.

彩蛋：
demo
居中三个button

3个button

注意点：1.在父元素上设置text-align：center.
2.在子元素上设置displai:inline-block
相当于在模仿控制文本居中。
3.边框的细节：

• 先统一设置右边框为0，为的是防止出现html和css和 js出现右边框重合的情况，再单独设置js的右边框。
• 对于圆角： 利用选择器：first-child和nth-child(n)来选择button设置圆角。
  border-radius有4个值，分别代表左上角、右上角、右下角、左下角。
  关键代码如下：

border-radius

`