【全面系统讲解CSS】学习笔记-第四章 CSS布局

一、CSS布局过渡历程

二、常用布局方法

2.1、表格布局

2.1.1、使用table实现表格布局

2.1.2、另一种实现表格布局

2.2、布局属性

1. width，height的设置只对内容区content生效，即蓝色部分。
2. padding指的是内容区和border边框之间的距离。
3. margin指的是元素和元素之间的距离。
   
   注意点： inline元素是不可以指定宽高的，即指定了宽高也无效。
   元素默认是按照static布局的，可以理解为静态布局，或者说是按文档流布局的。
   
   relative的偏移是相对于元素本身的，偏移的时候不会影响本来的占位。
   fixed是指相对于可视区域的对齐的。
   absolute是相对于最近的absolute或者relative来定位的。
   通过z-index可以确定显示的层级。定义为relative，fixed，absolute的元素可以设置z-index。
   

2.3、flexbox布局

如果要设置某一块div的宽度为固定px；可以直接写width：30px；

2.4、float布局

如下图所示的，p1是一个左浮动的效果，看上去像是浮动在p2上面，但是p2上的文字是被挤到了右侧开始的，这个属性本来是被用来做图文的混排的。

2.4.1、对自身的影响

下图中，span元素为inline元素，理论上是不可以设置宽高的，但是这里却可以设置宽高。是因为float自动将inline元素格式化为block元素。

2.4.2、对兄弟的影响

如果宽度增加，则右边的这个float会被挤到下一行上去。

如果宽度调小后，又会挤到同一行。

2.4.3、对父级元素的影响

从下图中可以看到，红色块的高度，和蓝色块的高度，分别用红色框标识了。然后，绿色的float部分是脱离了红色块的。这个其实就是高度塌陷的表现。

可以给父级元素添加下面的这个overflow： 属性；让父元素去关注内部元素的加载情况。

2.4.4、清除浮动影响

消除浮动的影响主要是用来消除背景图的高度问题。如果不加overflow属性，可以添加一个伪元素，通过伪元素来撑开背景图。

2.4.5、使用float的两栏布局

主要使用到了左侧的float：left；然后右侧的，margin-left：200px；height：100%；

2.4.6、使用float的三栏布局

如上图所示，但是发现右侧的蓝色div并没有和前面的对齐，而是挂在中间的div下面。浮动的元素会尽量向上靠，但是绕不过中间一些不是浮动的元素，既然这样，可以将right部分的div往上移动一层。

2.5、inline-block布局

从上图中可以看到，设置了inline-block但是，还是上下显示，明显是宽度的问题。

调整后，显示在同一行。但是出现了空隙。inline-block可以想象成一个文字，文字之间是有间隙的。

当给外部设置font-size：0；的时候就会消除间隙，但是会出现另一个问题，就是红色和蓝色块中的文字没有了。这就要求我们，需要给内部元素设置字体大小。

通过观察，可以看到，这里的这个间隙也是来源于div之间的间隙。（PS：这个是怎么观察出来的不清楚）

这样处理了之后，同样可以达到消除间隙的效果。或者通过下图中的注释的方式。

推荐还是使用字体的方式来处理这个间隙的问题。如果是定宽的问题，可以使用这个inline-block的方式来处理布局。

2.6、响应式设计和布局

2.6.1、案例一

如下图，如果要适配不同分辨率首先要加的是这个viewport。
再是在下面加了一个@media媒体查询。并在这里设置了，如果宽度小于640px的情况下。则影藏左侧部分的内容。

2.6.2、案例二

2.6.2.1、使用媒体查询适配

效果图，如下图展示

切换到移动端的时候，显示得不是很好。

添加媒体查询，来做适配。设置居中，并且设置了display：block；使得元素垂直排布。

2.6.2.2、使用viewport适配（等比例变换效果）

动态计算width的值的方式。

2.6.2.3、使用rem单位适配

html元素默认有一个font-size属性，默认为16px；为了方便计算，我们可以设置这个font-size的值为20px（或者10px都行）；设置之后，1rem=20px。

2.6.2.4、使用rem单位适配

从上图中可以看到，我们在使用了rem之后但是还是出现了另一个问题，就是在不同的显示屏大小下，边框变宽了，要解决这个问题，就需要我们随着屏幕尺寸大小去更新html的font-size的大小。

在原来的css样式中增加如上图的的媒体查询。这里需要注意的是需要把大的统配媒体查询写在上面，范围小的放下面。
这里还有一个问题是rem由于是经过计算的，所以精确性上没有px精确。

2.7、主流网站使用的布局方式

2.8、CSS面试题