学习目标
了解margin合并与塌陷现象(相邻块元素垂直外边距的合并,嵌套块元素垂直外边距的塌陷)
能够说出解决margin塌陷的几种方式
- 给父盒子加一个边框
- 给父盒子加 padding-top
- 给父盒子设置属性 overflow: hidden => BFC;
- 给父盒子设置浮动
- 给父盒子设置为行内块
理解浮动的作用及特点(解决上下盒子 可以水平布局的问题,脱标)
能够说出几种清除浮动的方式(额外标签法、overflow、伪元素清除浮动)
能够使用浮动完成导航案例
能够说清除浮动的目的(消除浮动对之后元素的影响)
。。。。。。
行高(line-height)(补充说明)
定义: 两行文本基线的距离
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EWK3SeNu-1572156724876)(mdImg/行高-1536495523815.png)]
应用: 将行高设置等于容器的高度,可以让文本垂直居中
注意: 行高是可以继承的
行高的单位
取值:
-
具体的像素
-
em
根据当前标签的**字体大小(font-size)**为基数计算(没有手动设置,浏览器默认设置16px)
如果当前字体大小为16px,那么 2em=32px
-
百分号(%)
根据当前标签的**字体大小(font-size)**为基数计算
如果当前字体大小为16px,那么 200% = 32px
-
不带单位的数字(倍数)
根据当前标签的**字体大小(font-size)**为基数计算
如果当前字体大小为16px,那么 2 = 32px
补充: 谷歌浏览器默认字体大小 16px;
行高与font的连写
字体连写里面还有行高(默认值:normal)
默认值为:normal,不同的文字效果不同,
完整版的font连写形式:
font: font-style font-weight font-size/line-height font-family
line-height 如果写在 font 连写前面,会被层叠掉 (连写的层叠现象)
/*line-height书写位置:*/
/*1. 写在font里 没毛病 */
font: italic bold 20px/200px '微软雅黑';
/*2. 写在font后面 没毛病*/
font: italic bold 20px '微软雅黑';
line-height: 200px;
/* 3. 写在font前面 会覆盖 */
line-height: 200px;
font: italic bold 20px '微软雅黑';
/*此时line-height为normal值*/
注意(项目中用到了line-height和font的连写):
- 把line-height写在font连写的下面
- 把line-height写进font的连写里面!
margin的两种特殊现象(了解)
marign的合并现象
当两个盒子水平布局时,左右的margin会叠加;
当两个盒子垂直布局时,上下的marign会合并-》合并之后取两者的最大值为两个盒子之间的距离
// 盒子左右排序 没毛病
margin-left 和 margin-right 叠加
// 盒子上下排序 有问题
margin-top 和 margin-bottom 合并
// 总结 :
两个div上下排序, 在进行设置 margin-top 和 margin-bottom 的时候,两个margin会产生一个合并的现象, 合并的值以大的为准
解决方案: 避免就好了
margin的塌陷现象(面试和考试必考!)
嵌套 块元素垂直外边距的塌陷(父元素一起往下移动)
两个盒子为父子关系时候,父元素的marign和子元素的margin会合并,并且父元素会往下移动
如果一个大盒子中包含一个小盒子, 给小盒子设置 margin-top 大盒子会一起向下平移
----------------------------
解决方案:
- 给父盒子加一个边框
- 给父盒子加 padding-top
- 给父盒子设置属性 overflow: hidden => BFC;
- 给父盒子设置浮动
- 给父盒子设置为行内块
浮动
浮动初体验
解决上下盒子 可以水平布局的问题
**需求:**在页面上有两个盒子,一个盒子靠着左边显示,一个盒子靠着右边显示
可以使用marign,但是浏览器宽度变化时,不能完成效果~
浮动的代码:
float: left;
float: right;
浮动的特点(了解)
重点在于使用
**标准流:**就是浏览器默认摆放盒子的顺序(从上往下、从左往右)
注意:
-
浮动的元素会脱离标准流(脱标)
- 飘起来了
- 在标准流中不占位置
如果一个元素按照正常的标准流来显示, 会在 html 中所属的位置占位, 后面的元素会紧跟着它, 但是浮动脱离了标准流, 将来在看到浮动的元素以后,就不能以正常的标准流来判断了 (浮动的元素在标准流中不占位置了)
-
浮动以后的元素,会覆盖在标准流的元素之上
- 比标准流高出半个级别
-
浮动的规则:浮动找浮动,不浮动找不浮动
-
浮动的重点:浮动的元素只会影响下面的元素
- 本质:浮动的元素受到盒子边界的限制(块级元素独占一行)
-
浮动的元素会改变显示方式效果
浮动以后的元素当做是一种特殊的显示效果: 1、一行可以显示多个 2、并且可以设置宽高 总结: 浮动以后的元素的显示方式与行内块级元素类似,但是不能使用text-align:center居中(浮动本身就是让盒子左右排布的)
记忆 :
1. 浮动的元素会脱标 ==> 飘起来了(不占位置) ==> 比标准流高半个级别 ==> 类似行内块的特点
2. 浮动的元素会被盒子的边界限制住
浮动的案例
- 使用浮动完成页面的布局
----------------------------
-
制作导航
注意:之前直接使用 a 标签 display:inline-block 制作导航是有问题的
- 导航与导航之间应该是列表关系,如果想要将这些关系通过 html 语义化表示出来,必须要用到 ul 标签
- 如果这些 a 标签不用其他的标签包裹起来,那么将来浏览器会将这些 a 标签中的文字,当做普通文本一起显示,SEO 在查看页面时,认为该页面在作弊,就是在进行关键字堆砌
所以, 导航必须要用 ul 和 li 将 a 标签包裹起来
*:项目开始前先初始化样式
ul:用于清除小圆点:list-style
li:用于浮动在水平方向布局:float:left
a:用于设置宽高(把li的大小撑起来)
注意a标签是行内元素,需要通过1.转换显示方式(不推荐转换成行内块);2.float:left 才能设置效果
清除浮动(清除浮动的影响)
浮动带来的问题:浮动元素撑不开父级容器
如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0,由于父盒子的高度为 0,下面的元素会自动补位,所以这个时候要进行浮动的清除
浮动: float: left; float: right;
清除浮动: clear: both;
额外标签法
不推荐,会产生一个多余的盒子
在浮动的盒子内部最后,再放一个块级标签,在这个标签内使用 clear:both;
来清除浮动对页面的影响
注意: 一般情况不使用这种方式清除浮动,因为这种方式会在页面中添加额外的标签
使用 overflow 清除浮动
在某些特定场景下使用不了
找到浮动盒子的父元素, 再在父元素中添加一个属性 overflow: hidden;
清除父元素中子元素浮动对页面的影响
注意: 一般情况用的也是很多也不用这种方式,因为 overflow: hidden;
有一个特点,离开了这个元素所在的区域以后会被隐藏 (后面讲这个方法就懂了)
使用伪元素清除浮动
通过css实现,推荐!
伪元素: 在页面上不存在的元素,但是可以通过 css 添加上去(默认是行内元素)
**种类:**常见的就2种
::after(在...之后)
::before(在...之前)
为了和伪类的一个冒号区别,css3的时候推荐使用两个冒号(兼容还是要使用一个冒号)
注意:
- 伪元素由css渲染,不会增加html结构
- 每个元素都可以添加自己的伪元素
- 默认伪元素是行内元素,可以通过 display 修改
伪元素清除浮动完整代码:
.clearfix::after {
content: ""; //伪元素必须给这个content=''
display: block; // 必须块级才能清除
clear: both; // 核心代码
/*保证伪元素在页面中看不到*/
height:0;
line-height:0;
visibility:hidden;
}
设置高度
简单粗暴,但是不推荐,不利于后期维护
**注意:**问题? 给谁设置,浮动的父盒子 (height=0 的)
----------------------------
浮动的意义
- 浮动最开始是做图文环绕(报纸的效果)
- 浮动的布局应用场景:让元素直接排成一排,或者一个靠左一个靠右
ヾ(๑╹◡╹)ノ"网页头部案例~
拓展
关于行内的padding和margin使用
什么时候设置margin? 什么时候设置padding?
需要在`边框内部`留有空隙 => padding
需要在`边框外部`留有空隙 => margin
ヾ(๑╹◡╹)ノ"上面两个div,下面有个p标签~
块级元素和行内块元素使用 margin 和 padding-》没毛病,但是:
- 行内元素使用margin的left 和 right可以,top和bottom无效
- 行内元素使用padding的left和right可以,top和bottom无效
注意:
- 块级元素和行内块元素的margin和padding随便使用!没问题
- 行内元素的上下margin和上下padding会失效!!开发中不要使用!!
总结
-
能说出我们为什么需要浮动(浮动的目的,最开始的目的)
目的:让垂直布局的盒子水平布局
最开始的目的:图文环绕
-
能说出我们为什么需要清除浮动
清除浮动:清除浮动带来的影响
??:当父盒子没有设置高度,此时父盒子由子盒子撑开,但是当子盒子浮动之后(脱标),此时不能撑开父盒子!!
-
能够使用浮动写出导航案例
-
能够写出至少三种清除浮动的方式
1、额外标签法
2、overflow:hidden
3、伪元素清除法
4、直接设置高度!!