一篇文章彻底搞定css3布局

一篇文章彻底搞定css3布局

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

• 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; 

顶对齐:

底对齐:
居中对齐:

两端对齐:

间距相等

行平铺

当然,在伸缩布局中还有很多更多强大的属性和布局方式,强烈推荐大家可以看一下阮一峰老师写的flex布局~

如果有写的错误的地方,还望多指正~