一. BFC(块级格式化上下文)
1. 什么是BFC
BFC: 块级格式化上下文 页面独立的块级渲染区域
2. 怎么生成BFC
❶. 根标签
❷. float 浮动
❸. overflow:hidden 溢出隐藏
❹. display:inline-block 转换为行内块
❺. position:absolute/fixed 绝对定位和固定定位
3. BFC特性
❶. 内部标签默认在垂直方向一个接一个放置
❷. 垂直方向的距离由margin决定(外边距塌陷)
❸. BFC区域不会和float标签区域重叠(浮动元素不占位置 清浮动)
❹.计算BFC高度时 浮动子标签也参与计算 (清除浮动后会撑开父级盒子)
❺. BFC是页面上的一个隔离独立容器 容器中的子标签不会影响外面标签 反正亦然
4. BFC解决的问题
❶. 外边距塌陷
❷. 清浮动
❸. 两栏 三栏自适应布局
二. CSS精灵图
1.精灵图使用场景
❶. 主要针对小的背景图片使用
❷. 利用背景位置属性实现 background-position
❸. 一般情况精灵图都是负值(网页坐标: x轴右为正值 左为负值 y轴同理)
2. 精灵图优点:
❶. 减少网页的http请求 从而提高网页的性能
❷. 解决图片命名的困扰
❸. 更换风格方便
三. 文本溢出用省略号显示
1. 单行文本溢出显示省略号
❶. 先强制文本在一行内显示
white-space:nowrap;
❷. 溢出部分隐藏
overflow:hidden;
❸. 用省略号代替溢出的部分
text-overflow:ellipsis;
代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 单行文本溢出省略号 */
.box {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="box">
月亮月亮月亮月亮月亮月亮月亮月亮月亮月亮月亮月亮
</div>
</body>
</html>
2. 多行文本溢出显示省略号
利用WebKit的css扩展属性(只有-webkit-内核才起作用)
代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 多行文本溢出省略号 */
.box1 {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
/* 将盒子转换为弹性伸缩盒子 */
display: -webkit-box;
/* 设置文本显示行数 */
-webkit-line-clamp: 3;
/* 设置元素排列方式 */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div class="box1">
太阳太阳太阳太阳太阳太阳太阳太阳太太阳太阳阳太阳太阳太阳太阳太阳太阳太阳
</div>
</body>
</html>
四. css小箭头制作(了解)
利用border属性 和 position属性
先利用border边框属性做两个三角形 再利用position定位属性将第二个三角形使其和第一个重叠 让其稍微偏移一点 最后将第二个三角形颜色设置为白色和页面同色即可
代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.a {
width: 500px;
height: 500px;
margin: 0 auto;
}
.box {
width: 0;
border-width: 50px;
border-style: solid;
border-color: transparent transparent #000 transparent;
position: relative;
}
.box1 {
width: 0;
border-width: 50px;
border-style: solid;
border-color: transparent transparent #fff transparent;
position: absolute;
top: 5px;
}
</style>
</head>
<body>
<div class="a">
<div class="box"> </div>
<div class="box1"></div>
</div>
</body>
</html>
