元素的显示与隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #ff0101;
/* 通过display 隐藏元素 不保留位置 */
display: none;
/* visibility 能见度 可见性 hidden 隐藏 */
visibility: hidden;
/* 通过visibility 隐藏元素 保留位置 */
overflow: hidden;
/* 溢出隐藏 */
}
.smbox {
width: 200px;
height: 200px;
background-color: #eeff01;
}
</style>
</head>
<body>
<div class="box">
123123123hiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhidden123123123
</div>
<div class="smbox"></div>
</body>
</html>鼠标样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
width: 150px;
height: 150px;
border: 1px solid red;
}
.box1 {
/* 鼠标默认样式 */
cursor: default;
/* 通过css 实现阻止鼠标效果 hover active js添加的事件 */
pointer-events: none;
}
.box2 {
/* 小手 */
cursor: pointer;
/* 轮廓 所在的位置 在外边距上 不算做盒子的大小 使用方法和边框线一样 */
outline: 10px solid blue;
margin: 10px;
}
.box3 {
/* 移动 */
cursor: move;
/* 所谓的 垂直方向 就是 让图片的底部和文字的底部对齐 */
vertical-align: middle;
}
.box4 {
/* 文本 */
cursor: text;
}
.box5 {
/* 禁止 */
cursor: not-allowed;
}
li:hover {
background-color: #35f7a6;
}
</style>
</head>
<body>
<ul>
<li class="box1">默认样式</li>
<li class="box2">小手</li>
<li class="box3">移动</li>
<li class="box4">文本</li>
<li class="box5">禁止</li>
</ul>
</body>
</html>溢出文字隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 60px;
border: 1px solid red;
/* 溢出文字隐藏代码 */
/*1. 当前文本的显示模式 强制文本在一行显示 */
white-space: nowrap;
/* 2.将溢出部分隐藏 */
overflow: hidden;
/* 3.将超出的文本使用省略号代替 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="box">
“中国奥运首金呼之欲出的最新相关信息，运动健儿们正以昂扬的姿态。”
</div>
</body>
</html>BFC
BFC(Block formatting context)直译为"块级格式化上下文"。
在官方文档到中介绍：一个BFC区域包含创建该上下文元素的所有子元素，BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素。
如何创建BFC
-
html根元素
-
设置浮动,float的值是left或者right
-
设置定位
-
position不是static或者relative
-
是absoulte或者fixed
-
-
display的值是inline-block,table-cell(表格单元格)等
-
设置overflow
-
overflow的值不是visible
-
是hidden，auto，scroll
-
-
弹性布局，flex
利用BFC解决问题
-
解决外边距的塌陷问题(垂直塌陷)
-
利用BFC解决包含塌陷
-
清除浮动产生的影响
-
BFC可以阻止标准流元素被浮动元素覆盖
注意点:
-
一个BFC区域只包含其子元素，不包括其子元素的子元素。
-
并不是所有的元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域。
-
不同的BFC区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 250px;
height: 250px;
float: left;
background-color: #ff0000;
}
.box2 {
width: 150px;
height: 150px;
background-color: #04fe19;
}
.box3 {
width: 150px;
height: 150px;
background-color: #0000ff;
margin-top: 100px;
/* 父元素加上display:flow-root 没有副作用，但是兼容性差 专门用来触发BFC */
display: flow-root;
}
.box4 {
width: 50px;
height: 50px;
background-color: #ff04cd;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box4"></div>
</div>
</div>
<div class="box3"></div>
</body>
</html>