一篇文章彻底搞定css3布局

2019-07-24 本文已影响0人诺克斯1

为了方便你的阅读,你可以先看整个文章的提纲,挑着看,选着看,这样更节省时间,如果对各类的标签都比较熟悉,阅读起来会更方便

1.了解布局必须要的基础
1.元素的三种显示模式
块级 , 行内, 行内块
2.css3的三大特性
继承,优先,层叠性
3.盒子外扩和内减模型
2.布局手段
浮动
定位布局
伸缩布局

布局的本质(个人理解) :

所有的标签都是盒子
而盒子的模式有3种不同的显示模式,有横着走的,有竖着走的
而盒子还有2种模型,内减外扩,一个变胖,一个变瘦
了解了盒子个性,再了解css3的特性就能弄明白很多了

1.布局必须要的基础

元素的三种模式

在学习的过程中呢,我一直是把三种模式当成三种不同性格的人去看待,对人说人话,对鬼说鬼话,其实跟盒子的对话也是如此,除了行内块元素和行内元素的组合不是预料之内的,其他元素的组合都还是在意料之中~

因此主要向大家说一下我对行内块和行内元素组合的理解,不过先简单的介绍下各类模式下元素显示的特点

块级元素

总是从新的一行开始
宽高,边距都可以控制
默认宽度是容器100%
可以容纳其他块元素

在这里插入图片描述

块级元素最听话的盒子,可控度极高

行内元素

靠内容撑大,不可以设置宽高,但是水平方向的padding和margin可以设置
和他相邻的兄弟一行上显示
默认宽度是自己的宽度
只能容纳文本或其他行内元素

在这里插入图片描述

我理解起来就是一句话,内容多大,我多大.一身功夫全靠撑,可控性较低,因为无法设置宽高,只可控制左右内外边距

行内块元素

和相邻的行内块元素,在一行上显示,但是之间会有空白间隙
默认宽度是自身内容的宽度
宽高,内外边距都可以控制

最典型的行内块,像img,input等等,行内块有个很有意思的特点,就是中间会有一个间隙,就像下图截屏的那个样子,原因是当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。但是如何把他去掉呢,有2比较个最简单的方法,当然直接采用浮动也是可以的,或者切换盒子的显示模式,改为块级元素

在这里插入图片描述

把相邻的行内块的代码块放在一行上显示,就可以去掉这个间隙了
套一个父盒子,设置父盒子的font-size:0

在这里插入图片描述

最容易出问题的行内与行内块组合,最让人头疼

在这里插入图片描述

这是因为像典型的input , img这些行内块标签和和行内标签在行内垂直方向默认是以基线（baseline）对齐的，图片基线在图片底部，而文字基线却在文字中点偏下的位置，所以才会显示成上图的样子。

在这里插入图片描述

解决方案

vertical-align属性,垂直对齐，它只针对于行内元素或者行内块元素，通常用来控制图片/表单与文字的对齐。


vertical-align : baseline |top |middle |bottom

//顶部对齐(设置给行内块元素)

vertical-align : top ;

//垂直居中

vertical-align : middle ;

//底部对齐

vertical-align : bottom ;

css三大特性

了解特性可以解决很多css3中出现的奇怪问题

继承性
- 子承父业,子元素会继承父元素的属性,你会继承你老爹的财产一样去理解就好
优先性
- 主要是要了解不同标签的权重不一样,这个特性会让布局的时候bug出现频次加多,通常表现为选择器不生效

一张表格足以理解各类选择器的权重问题

|继承的贡献值 |0,0,0,0 |

|--|--|

| 每个标签的贡献值(div) | 0,0,0,1 |

| 每个类,伪类的贡献值(.box) |0,0,1,0 |

| 每个id的贡献(#box) | 0,1,0,0 |

| 每个行内样式的贡献| 1,0,0,0 |

| 每个!important的贡献 | 无穷大 |

层叠性
- 很好理解,就是css代码是从上往下执行,后面的样式如果和前面的样式重叠,那后面的样式就会覆盖前面的样式

盒子的外扩和内减模型

学习盒子模型的时候，盒子真实宽高计算方式如下：

真实宽高 = 设置宽高 + border + padding；这种方式，我们成为外扩模型。受一个属性控制：box-sizing；其实盒子主要有两种模型,一种是外扩,另外一种是内减,看代码就很好理解了

1.box-sizing：content-box;（外扩模型）


div {

    box-sizing: content-box;

width: 200px;

height: 200px;

border: 50px solid red;

}

该模型为默认值，盒子的真实宽高 = 设置的宽高 + border + padding。

2.box-sizing：border-box;（内减模型）


div {

    box-sizing: border-box;

width: 200px;

height: 200px;

border: 50px solid red;

}

该模型下，border与padding会首先去压缩内容区的空间，宽高为设置宽高。如果里面的内容全部被压缩完了,才会向外扩展

#布局手段

1.浮动

刚学浮动的时候,反正我是一脸懵逼,不知道盒子到底怎么了,是不是感冒了,不听话,各种浮动带来的影响让人错不及防,直到最后,理解了2句话,就慢慢开始了解浮动了,现在把它分享给你

浮动的目的是为了让多个盒子在一行上显示
页面是一个鱼塘,而浮动的元素像飘在水上面的鱼,没浮动的元素在水底(标准流盒子在浮动盒子底下)


//不浮动 | 左浮动 | 右浮动

选择器 { float: none | left | right; }

在这里插入图片描述

上面张图已经很形象的说明浮动了,不过还需要有一个注意的点:

float属性会隐性改变元素的display属性为inline -block(行内块) 而且中间没有间隙

当然,其实浮动的初始目的是为了做文字环绕效果的,所以避免不了浮动在做布局的时候会带来一些影响

清楚浮动

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了


方法1:给父亲添加overflow属性方法

给父级添加： overflow为 hidden| auto| scroll  都可以实现。

-----------------------------------------

方法2:使用after伪元素清除 (推荐)

.clearfix:after { 

content: ""; display: block;

height: 0;

clear: both;

visibility: hidden;

} 

.clearfix {

*zoom: 1;

}  /* IE6、7 专有 */

----------------------------------------

方法3:使用双伪元素清除浮动

.clearfix:before,.clearfix:after {

  content:"";

  display:table;

}

.clearfix:after {

clear:both;

}

.clearfix {

  *zoom:1;

}

2.定位(position)

定位 = 定位模式 + 边偏移

选择器 { position: 属性值; }

先看定位模式

1.静态定位(static)

相当于默认定位,静态定位就是没有定位,但是也算定位....好绕
没有边偏移,没法用position属性动来动去

2.相对定位(relative)

相对定位的边偏移,相对于自己原来在标准流中位置来移动的 , 这个定位的盒子还是标准流,在鱼塘底下的
后面的盒子仍然以标准流的方式对待它。

3.绝对定位(需要搭配父亲一起使用)(absolute)

绝对定位是元素以带有定位的父级元素来移动位置, 父元素没有定位，则以浏览器为准定位
完全脱标 —— 完全不占位置 , 也就是浮在鱼塘最上面的盒子

4.固定定位(fixed)

完全脱标 —— 完全不占位置,也是浮起来的
只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性来设置元素的位置；
跟父元素没有任何关系；单独使用的
不随滚动条滚动
IE 6 等低版本浏览器不支持固定定位

子绝父相

子绝父相的搭配使用是比较多的,子级是绝对定位,脱标,浮在水面上
父级是相对定位,标准流占有位子,老老实实躺在池塘底部
理解:子元素在标准流的父亲的怀里随心所欲~

再看边偏移

简单来说就是上下左右

在这里插入图片描述

3.盒模型Flex布局

盒模型也叫弹性布局,这个布局的手段就就很牛逼了,虽然布局手段没有谁强谁弱,主要看适用的场景(但是弹性布局真的是心中的老大哥)

他主要做了啥了?

加buff , 加buff , 加buff , 让盒子变得异常的强大和听话,就像是一位将军,在指挥上千个将士排兵布阵一样~

强大到他可以合理的去分配每一个盒子,就像是在战场上让士兵合理的分配站位一样

伸缩布局三要素:

子元素
主轴
次轴

在这里插入图片描述

举几个简单的例子

我要你们每个人宽度一样,占满盒子


.box{

            width: 1000px;

            height: 200px;

            margin: 50px auto;

            border: 2px solid #000;

            /* 伸缩布局(弹性布局)：给盒子加buff */

            display: flex;

        }

.box>div{

            flex: 1;

            /* 子元素宽度比例为1  */

        }

在这里插入图片描述

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
主轴与次轴一定是垂直的，如果把主轴方向改为垂直，次轴方向自动变成水平
默认主轴向右

主轴排列方向:(flex-direction)


row:默认值：  主轴水平 ，从左往右

flex-direction: row;

主轴水平 ，从右往左

flex-direction: row-reverse;

主轴垂直 ，从上往下

flex-direction: column;

主轴垂直 ，从下往上

flex-direction: column-reverse;

主轴排列方式


默认：左对齐

justify-content: flex-start;

右对齐

justify-content: flex-end;

居中对齐

justify-content: center;

两端对齐：每一个盒子中间的间距相同

justify-content: space-between;

每一个盒子两边间距相同（平均）

justify-content: space-around;

主轴换行(flex-wrap)

生效前提: 子元素一行放不下
默认是不换行,如果一行放不下,会把子元素进行等比例缩放


  <div class="box">

        <div style="background-color:green;font-size: 20px">1</div>

        <div style="background-color:pink">2</div>

        <div style="background-color:hotpink">3</div>

        <div style="background-color:purple">4</div>

        <div style="background-color:blue">5/div>

        <div style="background-color:yellowgreen">6</div>

        <div style="background-color:gold">7</div>

        <div style="background-color:skyblue">8</div>

    </div>



.box{

            width: 1000px;

            height: 300px;

            margin: 50px auto;

            border: 2px solid #000;

            display: flex;

        }

  .box>div{

            width: 200px;

            height: 100px;

        }

执行效果:(等比例缩放)

在这里插入图片描述

换行:

a.默认值：不换行

flex-wrap: nowrap;



允许换行：第一行在上方

flex-wrap: wrap;



反向换行：第一行在下方

flex-wrap: wrap-reverse;

换行(wrap)

在这里插入图片描述

次轴排列方式

注意点：主轴与次轴一定是垂直的，如果把主轴方向改为垂直，次轴方向自动变成水平


顶部对齐

align-items: flex-start;

底部对齐

align-items: flex-end;

居中对齐

align-items: center;

默认值：平铺铺满. 前提是不能设置高度

align-items: stretch;

文字基线对齐

align-items: baseline;

多行排列方式(align-content)

注意点：一行不起作用，只对多行起作用

直接上代码演示


.box{

            width: 1000px;

            height: 250px;

            margin: 50px auto;

            border: 2px solid #000;

            display: flex;

            flex-direction: row;

            justify-content: flex-start;

            align-items: flex-start;

            flex-wrap: wrap; 

            //添加的align-content 放这里

            }

.box>div{

            width: 200px;

            height: 100px;

        }



  <div class="box">

        <div style="background-color:green;font-size: 20px">1</div>

        <div style="background-color:pink">2</div>

        <div style="background-color:hotpink">3</div>

        <div style="background-color:purple">4</div>

        <div style="background-color:blue">5</div>

        <div style="background-color:yellowgreen">6                                                                                                                                    </div>

        <div style="background-color:gold">7</div>

        <div style="background-color:skyblue">8</div>

    </div>


顶部对齐

align-content: flex-start;

底部对齐

align-content: flex-end;

居中对齐

align-content: center;

两端对齐：中间间距相等

align-content: space-between;

间距相等： 中间行的间距就是边缘的2倍

align-content: space-around;

行平铺

align-content: stretch;

顶对齐: