为了方便你的阅读,你可以先看整个文章的提纲,挑着看,选着看,这样更节省时间,如果对各类的标签都比较熟悉,阅读起来会更方便
-
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布局~
如果有写的错误的地方,还望多指正~
网友评论