CSS常用布局方法及其注意事项

我们在CSS布局中,一般情况使用以下三种情况进行定位布局:

      垂直布局:

 标准流(normal flow)也叫常规流,文档流.在你使用div,span,p标签进行布局时,默认就是使用标准流进行布局.

标准流是垂直布局,是由块元素及其行内元素构成的.从上到下、从左到右按顺序摆放好默认情况下，互相之间不存在层叠现象.

      而在标准流中,常用到margin和padding元素对其定位,margin也可为负数.但是,用margin和padding定位时

通常会影响到标准流中其他元素的定位效果.

        层叠布局:

       position属性

position可以对元素进行定位,常用取值有4个,

 

• static：静态定位

• relative：相对定位
• absolute：绝对定位
• fixed：固定定位

relative-相对定位

元素按照标准流进行布局

可以通过left、right、top、bottom的数值进行定位

定位参照对象是元素自己原来的位置

相对定位的优势在于,可以在不影响其他元素位置的前提下,对当前元素进行位置上的微调.

 

 

fixed-固定定位

元素脱离标准流(简称脱标)

可以通过left、right、top、bottom的数值进行定位

不再受标准流的宽高影响,可层叠在标准流之上,

定位参照对象是视口(文档的可视区域)

画布(用于渲染文档的区域)滚动时,固定保持不动

 

 

static-静态定位

为默认值,元素按照标准流进行布局,left、right、top、bottom没有任何作用!

 

absolute-绝对定位

元素脱离标准流(脱标)

可以通过left、right、top、bottom的数值进行定位

定位参照对象是最邻近的定位祖先元素,如果找不到这样的祖先元素,参照对象是body

 

脱标元素的特点

 

• 可以随意设置宽高
• 宽高默认由内容决定
• 不再受标准流的约束
• 不再严格按照从上到下、从左到右排布
• 不再严格区分块级、行内级，块级、行内级的很多特性都会消失
• 不再给父元素汇报宽高数据
• 脱标元素内部默认还是按照标准流布局

  z-index属性

用来设置定位元素的层叠顺序(仅仅只对定位元素有效)

取值可为正负整数,0

 

比较原则

如果是兄弟关系

z-index越大，层叠在越上面

z-index相等，写在后面的那个元素层叠在上面

如果不是兄弟关系

各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较

 

而且这2个定位元素必须有设置z-index的具体数值

 

   

        水平布局

            float

 

可以通过float属性让元素产生浮动效果，float的常用取值

• none：不浮动，默认值

• left：向左浮动

• right：向右浮动

 

        元素一旦浮动后就会脱标,朝着向左或向右方向移动直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止.定位元素会层叠在浮动元素上面.

 

        浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出.

比如行内级元素、inline-block元素、块级元素的文字内容

        

        浮动存在的问题

    由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度.

    父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题.

 

那么如何解决高度坍塌问题呢?我们需要用到清浮动

        清浮动的目的

 

让父元素计算总高度的时候，把浮动子元素的高度算进去

而清浮动的方式有很多,但大多都有各式各样的不足,这里只介绍一种个人认为最为成熟的方式

.container::after {
            content: "";
            display: block;
            clear: both;
        }

        /* 为了适配以前的旧浏览器，还需要这么写 */
.container::after {
            content: "";
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
        }

这样做的好处是不会改变父元素格式,并且能够纯CSS样式解决,遵循结构与样式分离~

最后,介绍下clear属性

            clear的常用取值

left：要求元素的顶部低于之前生成的所有左浮动元素的底部

right：要求元素的顶部低于之前生成的所有右浮动元素的底部

both：要求元素的顶部低于之前生成的所有浮动元素的底部

none：默认值，无特殊要求

一般就只用在非浮动元素上，可以让非浮动元素与浮动元素不层叠.