目录
一:css介绍
1.1:什么是css?
- css全称叫做CaseCading Style Sheets
- css是在hTML的基础上用来告诉浏览器html里面的内容以什么样的方式呈现给大家
- 用css来渲染html,让我们的页面看起来更有层次感,更好看。
- 最重要的是,它可以同时控制多个页面的布局,可以大量节约我们的时间。
二:css的引入(也可以说和html怎么结合在一起使用)
css引入的方式有四种,我们看看他们的区别,
2.1:第一种行内式:
行内模式就是在我们的标签身上直接添加style,直接改变他们的样式。
优点:操作简单,快捷,
缺点:每次只能改变一个标签。
<body>
<body>
<p style="color: red;background-color: pink;">我是不是一个大帅哥?</p>
</body>
</body>
2.2:第二种内嵌式:
内嵌式它的位置一般处在<head>标签里面,
优点:我们可以一次实现多个标签的修饰
缺点:只能对本页面实现装饰
2.3:第三种外链式:
外联式需要我们单独创建一个.css文件然后在<head>标签里面使用link引入
优点:创建的css文件可以同时被多个页面引用,
缺点:需要创建单独的css目录,css文件,操作有一点麻烦
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body>
<p>你好</p>
<div>我帅吗?</div>
<div>你很帅</div>
</body>
2.4 :第四种:导入式,
导入式既可以写在内嵌中,也可以写在外链中
<style type="text/css">
@import url("css/test1.css");
</style>
这里导入式平时使用的不多,@import和link不同之处:
- link 属于 XHTML 标签,除了加载 CSS 外,还能用于定义 RSS, 定义 rel 连接属性等作用;而@import 是 CSS 提供的,只能用于加载 CSS;
- 页面被加载的时,link 会同时被加载,而@import 引用的 CSS 会等到页面被加载完再加载;
- import 是 CSS2.1 提出的,只在 IE5 以上才能被识别,而 link 是 XHTML 标签,无兼容问题;
- link 支持使用 js 控制 DOM 去改变样式,而@import 不支持;
它们的权重顺序方式:行内>内嵌>外链 就近原则,最晚优先!
注意: 他们平时的顺序方式是这样的,但是有需要的话我们可以通过! important来设置权重,改变他们的优先级 看下面的例子 这里是三种方式同时存在 正常该执行,‘’行内式‘’背景颜色为yellow,但是我们在上面内嵌式里面设置了!important ,所以这里显示的red
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/test.css" />
<style type="text/css">
p{
background-color: red !important;
}
</style>
</head>
<body>
<p style="background-color: yellow">段落</p>
<!-- <p>段落</p> -->
</body>
</html>
三:选择器、
选择器我们平时正常使用分为两大种:
3.1 :基本选择器:
- 标签选择器/元素选择器: p{}
- id选择器 :在元素中定义id,在style中定义的id前面+#
- 类选择器 :在元素中定义class,在style中定义的id前面+.
<head> <style type="text/css"> /* 元素选择器 */ p{ background-color: #0000FF; } /* 类选择器: */ .a{ color: #FF0000; } .pp{ font-family: 隶书; font-size: 30px; } id选择器: #yqb{ font-weight: 900; } </style> </head> <body> <p class="a pp" id="yqb">段落1</p> <p class="a pp">段落2</p> <p class="a">段落3</p> <div> <p>段落4</p> </div> </body>
3.2 :高级选择器:
- 通配符选择器 *{}
- 并集选择器 p,div{}
- 后代选择器 E F:选择E的所有后代F E F{}
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 通配符选择器:选出所有标签 */
* {
color: red;
}
/* 并集选择器 */
div,ul {
background-color: #0000FF;
}
.active,ul {
font-size: 30px;
font-weight: 800;
}
/* 后代选择器E F:选出父元素E的所有子孙元素F */
p a {
font-family: 隶书;
font-size: 60px;
font-weight: 900;
}
ul a {
color: orange;
}
</style>
</head>
<body>
<div class="active">段落1</div>
<p><a href="#">淘宝</a></p>
<p>段落2</p>
<ul>
<li>段落3</li>
<li><a href="#">百度</a></li>
</ul>
</body>
四、css基本设置
4.1 :字体样式font:
1.font-size:大小,px/em
2.font-weight:粗细 100-900 lighter更细 bold粗 bolder更粗
3.font-style:风格 italic倾斜 normal默认 qblique 让没有倾斜的文字倾斜
4.font-family:类型 英文 中文
5.简写:font:(风格 粗细 大小 类型)
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
/*
字体风格 :
normal:正常,默认
Italic:是使用文字本身的斜体属性;
oblique:是让没有斜体属性的文字倾斜!
*/
font-style:italic;
/*
字体粗细:100-900
normal:正常,默认
lighter:比正常更细
bold/bolder:粗/更粗
*/
font-weight: normal;
/* 字体大小 */
font-size: 30px;
/* 字体类型 :如果浏览器不支持第一个,会往下自动使用第二个
中文必须放在在英文之后。
*/
font-family: "times new roman","隶书";
}
div{
color:red;
font:italic lighter 30px "times new roman","隶书";
}
</style>
</head>
<body>
<p>welcome段落1</p>
<div>段落2</div>
</body>
4.2:文本样式:text
1.color:字体颜色
2.text-indent:首行缩进 px/em
3.text-decoration:文本装饰 underline下划线/overline上划线line-through删除线 none 都没有
4.text-align:水平设置 center/left/right
5.text-transform:转换大小写 capitalize首字母大写/lowercase小写/uppercase大写
6.letter-spacing:文字或字母之间的间距
7.word-spacing:单词之间的间距
8.vertical-align:定义基线的对齐方式 常用于img td input等行内块元素
middle 该元素中线与父元素中线对齐
baseline:该元素底线与父元素基线对齐
top:该元素顶线与父元素基线对齐
9.line-heihgt:行高,设置行高和高度一致实现文本垂直居中
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
width: 500px;
height: 60px;
background-color: pink;
/* 字体颜色 */
color:red;
/* 水平设置 left right center*/
text-align: left;
/*
设置字体居中,行高和高度一致
设置段落间距
*/
line-height: 60px;
/* 文本缩进 */
text-indent: 2em;
/* 文本装饰
underline:下划线
overline:上划线
line-through:删除线
*/
text-decoration: line-through;
/* 大小写设置:
lowercase:全部小写
capitalize:首字母大写
uppercase:全部大写
*/
text-transform: capitalize;
/* 改变文字或者字母之间的间距 */
/* letter-spacing:10px; */
/* 改变英文单词之间的间距 */
word-spacing: 50px;
}
</style>
</head>
<body>
<p>hello byebye你好</p>
<p>welcome to美女</p>
</body>
4.3:文本溢出处理:
我们平时在写东西的时候肯定可以看到有的盒子太小放不下,这时候就用到了内容溢出处理
1.overflow:内容溢出处理 visible/auto/scroll/hidden
- auto:自动 一般用这个
- hidden:隐藏
- scroll:滚动条,内容是否溢出都会显示滚动栏
- overflow:水平和垂直方向都设置
- overflow-x:水平方向设置
- overflow-y :垂直方向设置
- visible:默认
2.white-space:不换行设置 normal/nowrap(去掉所有空格,不换行)/pre(保留空格)
3.text-overflow:文本溢出显示方式,clip/ellipsis:... 必须和上面两个同时设置
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: pink;
/* 盒子太小,内容溢出 */
overflow: hidden;
/* auto:自动 一般用这个
hidden:隐藏
scroll:滚动条,内容是否溢出都会显示滚动栏
overflow:水平和垂直方向都设置
overflow-x:水平方向设置
overflow-y :垂直方向设置
visible:默认 */
/* 文本不换行处理: */
white-space: nowrap;
/* nowrap:文本不换行,会自动去掉所有空格
pre:不换行,会保留空格
normal:默认
*/
/* 文本溢出的显示方式: */
text-overflow: ellipsis;
/* clip: 默认;
ellipsis:...
*/
/* overflow white-space text-overflow 他们三个必须放在一起使用 */
}
</style>
</head>
<body>
<div id="">
我是个大帅哥我是个大帅哥 我是个大帅哥我是个大帅哥 我是个大帅哥我是个大帅哥我是个大帅哥我是个大帅哥 我是个大帅哥我是个大帅哥 我是个大帅哥
我是个大帅哥我是个大帅哥我是个大帅哥 我是个大帅哥我是个大帅哥 我是个大帅哥我是个大帅哥 我是个大帅哥
</div>
</body>
4.4:超链接伪类:
- a:link:链接未访问之前的状态
- a:visited:访问之后的状态
- a:hover:鼠标悬停的状态
- a:active:鼠标激活时的状态,无法去掉下划线
设置顺序:link visited hover active 爱恨原则 lvha
4.5:边框样式:
4.5.1:常规边框:
- border-width:边框宽度 遵循上右下左原则
- border-style:边框样式 solid实线/dashed虚线/dotted点线
- border-color:边框颜色
- 单独设置某一边:border-top/right/bottom/left-
- 例子: border-bottom:1px solid red
- border:1px solid red,简化写法,没有顺序
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height:200px;
border-width: 3px;
/* 边框宽度:上 右 下 左 */
border-style:solid dashed dotted;
background-color: #FFC0CB;
/* 边框风格:solid:实线;
dashed:虚线
dotted:点线 */
/* border-color: blue yellow; */
/* 简化设置 */
/* border: 5px solid blue; */
}
</style>
</head>
<body>
<div></div>
</body>
边框三角形效果图:
4.5.2:边框制作三角形
设置一个空的div,使用行内式style,给这个div进行修饰,
宽高都设置0,给border设置一个长度,注意颜色要给白色,
三角形要那边的角,给那边设置颜色就可以了。
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 0;
height:0 ;
/* 要那边给那边设置颜色就可以*/
border: solid 100px white;
border-bottom-color: #0000FF;
}
.one{
width: 0;
height:0;
border: solid 50px white;
border-bottom-color: black;
padding-left: -20px;
}
</style>
</head>
<body>
<div>
<div class="one"></div>
</div>
</body>
4.6:背景样式
1.background-color:背景颜色
2.background-image:url(),背景图片
background-image: url('img/1.jpg');
3.background-repeat:no-repeat,
repeat:沿水平和垂直两个方向平铺
no-repeat:不平铺,只显示一次
repeat-x:只沿水平方向平铺
repeat-y:只沿垂直方向平铺 */
4.background-position:背景定位,px % left right center top bottom
background-position: 20px 20px;
5.background-size:背景尺寸,auto cover contain % px
auto:默认值,使用背景图片保持原样
percentage:当使用百分值是,不是相对于背景的尺寸大小来计算的
而是相对于元素宽度来计算的
cover:整个背景图片放大填充了整个元素,会导致图片失帧
contain:让背景图片保持本身的宽高比例。
将背景图片缩放到宽度或者高度正好适应所定义的背景的区域
background-size: 不能写在缩写里面,不能写在background后面
6.background-origin:背景渲染位置,boder-box,padding-box,content-box
7.background-attachment:local(针对元素)/fixed(不滚动,针对body)/scroll(滚动。默认)
background-attachment:定义背景图片是否固定或者随着页面的其余部分滚动,
background-attachment: local;
默认不随内容滚动 local:会随内容滚动
针对body的滚动
fixed:背景图片不随浏览器滚动条滚动
scroll:背景图片会随浏览器滚动条滚动,默认会滚动
4.7:列表
列表分为两大种 有序和无序
1.list-style-type 列表标记样式 默认是实心圆
none,无标记 square 实心方块
2.list-style-image:url(),列表标记图片
3.list-style-positon:inside/outside
标记定位:
outside:列表项目标记放置在文本以外
inside:列表项目标记放置在文本以内
简写: list-style:url(img/arrow-right.gif) inside;
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
/* padding: 0;
margin: 0; */
/* list-style-type: none; */
}
li {
border: red 1px solid;
/* 列表风格,none无标记; */
/* list-style-type:none; */
list-style-image: url(img/arrow-right.gif);
/* 标记定位:
outside:列表项目标记放置在文本以外
inside:列表项目标记放置在文本以内 */
list-style-position:outside;
/* 简写 */
/* list-style:url(img/arrow-right.gif) inside; */
}
</style>
</head>
<body>
<ul>
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
</ul>
</body>
4.8:盒子模型
1.外边距+边框+内边距+内容
2.margin:外边距
3.padding:内边距
单独设置某一方向:margin-top/right/bottom/left
元素在页面中显示成一个方块,类似一个盒子,CSS 盒子模型就是使用现实中盒 子来做比喻,助我们设置元素对应的样式。盒子模型示意图如下:
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 盒子模型:外边距+边框+内边距+内容 */
div{
/* 内容的宽高 */
width: 300px;height: 300px;
/* 遵循顺时针,上右下左 */
/* 内边距:内容于父元素变宽四周的距离 */
padding: 20px;
border:10px solid #FF0000;
}
/* body标签的margin代表内容与浏览器边框的距离
两个行内元素的margin-right和margin-left,采用“和”
两个快元素的margin-top和margin-bottom 采用 “最大值” */
.first{
margin: 10px;
}
.second{
margin: 50px;
}
span{
margin: 20px;
font-size: 50px;
color: yellow;
font-family: 隶书;
}
</style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
<span>奇斌</span><span>奇斌</span>
</body>
五、浮动流与定位流
5.1:浮动特性:
1、浮动元素脱离标准文档流,形成浮动流
2、块级元素看不到浮动元素
3、bfc元素、行内元素、行内块元素和文本全都看得见浮动元素
4、所有经过浮动的元素都会变成行内块元素包括span
5、浮动元素剩余空间不够,会自动往下一行排列,
6、不经过浮动的文本会自适应剩余空间,
经过浮动的文本不会自动换行去适应剩余空间,而是另起一行
BFC 即 Block Formatting Contexts (块级格式化上下文),
通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,
都不会影响到外部。
触发BFC的条件
1、浮动元素,float:left/right; (所有元素经过浮动会变为行内块元素(包括span))
2、display:inline-block; (行内块)
3、overflow:hidden/auto/scroll;(常用于块)
4、 position:absolute (行内块)
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.first{
width:300px;
height: 200px;
border: 1px dashed red;
float: left;
}
.second{
width:300px;
height: 200px;
border: 1px solid;
float: left;
}
.third{
border: 1px solid;
/* float: left; */
}
</style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
<div class="third">
我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥
我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥
</div>
</body>
5.2:解决父级边框塌陷:
之前也说了,元素经过浮动之后会对父级产生影响,所以这里我们简单介绍一下消除浮动带来的影响。
1、给父级设置height高度,具有不确定性
2、父级触发BFC
3、添加空元素,清除浮动,clear:both,但是改变了原有的结构
4、伪类消除
.box::after{
content: " ";
display: block;
clear: both;
}
5.3:定位流position
5.3.1、相对定位:relative:
1、使用left right top bottom进行偏移
2、相对于它本身进行定位
3、原来的位置依然保留(灵魂出窍)
4、层级提高,可以把标准文档流中的元素及浮动元素盖在下边
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
background-color: pink;
border: 1px solid;
height: 600px;
width: 600px;
}
.first{
background-color: blue;
border: #0000FF 1px dashed;
height:100px ;
width: 300px;
position: relative;
left:50px;
top: 50px
}
.second{
background-color: red;
border: 1px dotted orange;
height:150px ;
width: 200px;
}
.third{
background-color: orange;
border: 1px dotted;
height:100px ;
width: 200px;
float: left;
}
层级大小:定位流>浮动流>标准文档流
1、用left、right、top、bottom、进行偏移
2、相对于他本身进行偏移
3、原本位置还保留(灵魂出窍)
4、层级提高,可以把标准文档流的元素及浮动流元素盖在下面
</style>
</head>
<body>
<div class="box">
<div class="first"></div>
<div class="third"></div>
<div class="second"></div>
</div>
</body>
5.3.2、 绝对定位:absolute
1、如果“祖先”元素没有定位,相对于浏览器定位
2、如果“祖先”元素有定位,则相对于父亲定位
3、它原来的位置不会保留下来
4、层级更高,可以把标准文档流和浮动流压在下面
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
}
.one {
width: 600px;
height: 600px;
border: 1px solid;
position: relative;
padding: 50px;
}
.two {
width: 400px;
height: 400px;
border: 1px solid blue;
/* margin-left: 100px; */
position: relative;
}
.three {
width: 200px;
height: 200px;
border: 1px solid red;
position: absolute;
left: 100px;
top: 100px;
text-align: center;
line-height: 200px;
}
.four {
width: 200px;
height: 200px;
border: 1px solid black;
}
绝对定位:
1 如果“祖先”元素没有定位,相对于浏览器定位
2 如果“祖先”元素有定位,则相对于父亲定位
3 它原来的位置不会保留下来
4 层级更高,可以把标准文档流和浮动流压在下面
}
</style>
</head>
<body>
<div class="one">
淇滨是
<div class="two">
<div class="three">淇滨是
</div>
<div class="four">
</div>
</div>
</div>
</body>
5.3.3、fixed:固定定位特点:
1、相对于浏览器定位
2、偏移量不会随滚动条的移动而移动
3、一般在网页中被用在窗口左右两边的固定广告,返回顶部图标、吸顶导航栏等
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
height: 1200px;
background:url(img/bg.jpg) no-repeat fixed;
}
.father{
width: 300px;
height: 300px;
background-color: blue;
}
/* fixed:固定定位特点:
1、相对于浏览器定位
2、偏移量不会随滚动条的移动而移动
3、一般在网页中被用在窗口左右两边的固定广告,
返回顶部图标、吸顶导航栏等 */
.erzi{
width: 200px;
height: 200px;
background-color: red;
position: fixed;
bottom: 300px;
right: 0;
}
a{
background-color: black;
position: fixed;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="father">
<div class="erzi"></div>
</div>
<a href="#">回到顶部</a>
</body>
5.3.4、粘性定位:
当position的值为sticky时,元素会根据正常文档流进行定位,
粘性定位可以被认为是相对定位和固定定位的混合
元素在跨越特定阈值前为相对定位,之后为固定定位。
相当于word里面的冻结表格
层级大小:定位流>浮动流>标准文档流
这个感兴趣的小伙伴可以复制代码去查看一下,看一眼聪明的你就明白了
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
height: 1500px;
}
.one {
width: 200px;
height: 300px;
background-color: #0000FF;
}
/* 粘性定位:当position的值为sticky时,元素会根据正常文档流进行定位,
粘性定位可以被认为是相对定位和固定定位的混合
元素在跨越特定阈值前为相对定位,之后为固定定位。
相当于word里面的冻结表格 */
.two {
width: 200px;
height: 200px;
background-color: red;
position: sticky;
top: 50px;
left: 100px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two">我是个大帅逼</div>
</body>
5.3.5:解决父子传递
如同浮动流解决边框塌陷,定位流也有一点点小问题需要解决
margin-top传递:如果块级元素的顶线和父元素的顶部线重叠
那么这个块级元素的margin-top值会传递给父元素解决方式:
1、给父元素设置border
2、给父元素加padding值
3、给父元素BFC
5.3.6 Z-index和透明度
1、rgba a:0-1.透明度
background-color: rgba(255,0,0,0.3);
z-index: 1; 数值越大,层级越高。只可以给定位流使用
透明度:0-1,值越小越透明
opacity: 0.3;
兼容IE8一下,0-100
filter: alpha(opacity=30);
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
position: relative;
}
.erzi {
position: absolute;
left: 20px;
top: 50px;
width: 500px;
height: 30px;
/* background-color: grey; */
/* rgba a:0-1.透明度 */
background-color: rgba(255, 0, 0, 0.3);
z-index: 1;
/* 透明度:0-1,值越小越透明 */
/* opacity: 0.3; */
/* 兼容IE8一下,0-100 */
/* filter: alpha(opacity=30); */
}
</style>
</head>
<body>
<div class="box">
<img src="img/才女.jpg">
<div class="erzi"></div>
</div>
</body>
六:元素显示与隐藏
6.1.1、元素隐藏第一种 不会保留原来位置
display: none;
元素显示
display: block; 常用第一种
6.2.2、元素隐藏第二种:会保留原来位置 灵魂出窍
visibility: hidden;
元素显示
visibility: visible; 两个需要同时使用
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;height: 100px;
}
.one{
background-color: red;
/* 元素隐藏第一种 不会保留原来位置 */
/* display: none; */
/* 元素显示 */
display: block;
}
.two{
background-color: blue;
/* 元素隐藏第二种:会保留原来位置 灵魂出窍 */
visibility: hidden;
/* 元素显示 */
visibility: visible;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>