⼀篇⽂章彻底搞定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 {
div border属性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)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。