CSS学习三大重点:
CSS盒子模型、浮动、定位
1. CSS布局的三种机制
- 网页布局的核心——就是用CSS来摆放盒子 CSS提供了3种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位,其中:
1. 普通流(标准流)
块级元素会独占一行,从上向下顺序排列;
常用元素: div、hr、p、h1~h6、ul、ol、dl、form、table 。
行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行;
常用元素: span、a、i、em 等
2. 浮动 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
3. 定位 将盒子定在浏览器的某一个位置——CSS离不开定位,特别是后面的js特效。
2. 为什么要浮动
1.如何让多个盒子(div)水平排列成一行?
2.如何实现盒子的左右对齐?
3. 什么是浮动(float)
4. 浮动口诀
1).浮动口诀之浮
浮动—―浮 漂浮在普通流的上面。脱离标准流。俗称“脱标”
/* 设置了浮动的元素,漂浮在普通流的上面,不占位置,脱标 */
.box1 {
float: left;
width: 200px;
height: 200px;
background-color: rgba(255,0,0,0.5);
}
/* 正常标准流显示 */
.box2 {
width: 150px;
height: 300px;
background-color: skyblue;
}
小结:
float属性会让盒子漂浮在普通流的上面,但是发现第二个盒子不见了
2).浮动口诀之漏
浮动――漏 浮动的盒子,把自己原来的位置漏给下面标准流的盒子,就是不占有原来位置,是脱离标准 流的,我们俗称“脱标"。
.box1 {
/*让第1个盒子漂浮起来,不占位置*/
float: left;
width: 200px;
height: 200px;
background-color: rgba(255,0,0, 0.5);
}
.box2 {
width: 150px;
height: 300px;
background-color: skyblue;
}
所以,box2不见了其实就是跑到box1盒子下面了,被box1给压住了,遮挡起来了
3).浮动口诀之特
浮动――特性 float属性会改变元素display属性。 任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。生成的块级框和我们前 面的行内块极其相似。 体验案例——div水平排列
div {
width : 200px;
height: 200px;
background-color: pink;
/*转换为行内块元素,可以水平显示,不过div之间有间隙,不方便处理*/
/* display: inline-block; */
/*设置浮动属性,可以让div水平排列,并且没有间隙*/
float: left;
}
注意:浮动的元素互相贴靠一起的,但是如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐
5. 浮动小结
我们使用浮动的核心目的——让多个块级盒子在同一行显示。因为这是我们最常见的一种布局方式 float——浮漏特
6. 浮动(float)的应用(重要)
浮动和标准流的父盒子搭配 我们知道,浮动是脱标的,会影响下面的标准流元素,此时,我们需要给浮动的元素添加一个标准流的 父亲,这样,最大化的减小了对其他标准流的影响。
一个完整的网页,是标准流+浮动+我们后面要讲的定位一起完成的。浮动应用案例
7. 浮动(float)的扩展
1). 浮动元素与父盒子的关系
- 子盒子的浮动参照父盒子对齐
- 不会与父盒子的边框重叠,也不会超过父盒子的内边距
2). 浮动元素与兄弟盒子的关系
在一个父级盒子中,如果前一个兄弟盒子是
- 浮动的,那么当前盒子会与前一个盒子的顶部对齐
- 普通流的,那么当前盒子会显示在前一个兄弟盒子的下方。
浮动只会影响当前的或者是后面的标准流盒子,不会影响前面的标准流。
第一个浮动 第二个也浮动 在同一行 顶部对齐
第一个浮动 第二个不浮动 第二个盒子在第一个盒子下方
第一个不浮动 第二个浮动 所以想要在一排 都得浮动
建议:
如果一个盒子里面有多个子盒子,如果其中一个盒子浮动了,其他兄弟也应该浮动。防止引起问题
8. 清除浮动
1.1 为什么要清除浮动
因为父级盒子很多情况下,不方便给高度,但是子盒子浮动就不占有位置,最后父级盒子高度为0,就影 响了下面的标准流盒子。
正常标准流盒子 子盒子是标准流,父盒子虽然没有高度但是会撑开父盒子高度
1.2 清除浮动本质
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。清除浮动之后,父级就会根据浮 动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了
1.3 清除浮动的方法
在CSS中,clear属性用于清除浮动
1).额外标签法(隔墙法)
2).父级添加overflow属性方法
3).使用after伪元素清除浮动