CSS
1.CSS介绍
现在的互联网前端分三层：
- HTML:超文本标记语言.从语义的角度描述页面结构.
- CSS:层叠样式表.从审美 的角度描述页面样式.
- JS:JavaScrpit.从交互的角度描述页面行为.
CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
HTML的缺陷:
- 不能适应多种设备
- 要求浏览器必须智能化足够庞大
- 数据和显示没有分开
- 功能不够强大
CSS优点:
- 使数据和显示分开
- 降低网络流量
- 使整个网站视觉效果一致
- 使开发效率提高(耦合性降低)
CSS语法
每个css样式由两个组成部分:选择器和声明.声明包括属性和属性值,每个声明之后用分号结束
h1{color:red;font-size:14px
选择器{css样式:样式对应的值}
2.CSS的引入方式
行内样式
在<body>标签内引入
<div>
<p style="color: green">我是一个段落</p>
</div>
内接样式
在<head>标签内引入
<style >
span{
color: yellow;
}
</style>
外界样式-链接式
在<head>标签内引入
<link rel="stylesheet" href="index.css(css文件路径)">
外接样式-导入式
在<head>标签内引入
<style>
@import url('index.css(css文件路径)');
</style>
3.CSS选择器
1.基本选择器
- 标签选择器
- 类选择器
- id选择器
- 通用选择器
标签选择器(标签名)
标签选择器可以选中所有的标签元素,比如div,ul,li,p等等,选中的是所有的,而不是某一个.
<head>
<style>
p{color:red}
</style>
</head>
<body>
<p>标签选择器</p>
</body>
类选择器(.)
类就是class,与id非常相似,任何的标签都可以加类,但是类可以重复,属于归类的概念.同一个标签中可以携带多个类,用空格分开
<head>
<style>
.lin{color:red} #按照class属性找到对应的标签
</style>
</head>
<body>
<p class = 'lin'>类选择器</p>
</body>
ID选择器(#)
同一个页面中id不能重复,任何的标签都可以设置id,id命名规范要以字母,可以有下划线(_),中划线(-),大小写严格区分
<head>
<style>
#lin{color:red} #按照id属性找到对应的标签
</style>
</head>
<body>
<p id = 'lin'>id选择器</p>
</body>
通用选择器
通用选择器就是对页面内所有标签进行的样式设计
<head>
<style>
*{color:red} #按照id属性找到对应的标签
</style>
</head>
<body>
<p id = 'lin'>id选择器</p>
<div>div标签</div>
</body>
2.高级选择器
- 后代选择器
- 子代选择器
- 毗邻选择器
- 弟弟选择器
- 组合选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
后代选择器
使用 空格 表示后代选择器.顾名思义,父元素的后代(子子孙孙)
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.c1 a{color:red}
</style>
</head>
<body>
<div class = 'c1'>
<a href = ''>葫芦娃</a>
<div>
<a href = ''>孙悟空</a>
</div>
</div>
</body>
子代选择器
使用 > 表示子代选择器,比如div>p,仅表示当前div元素选中的子代(不包含孙子..)元素p
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.c1>a{color:red}
</style>
</head>
<body>
<div class = 'c1'>
<a href = ''>葫芦娃</a>
<div>
<a href = ''>孙悟空</a>
</div>
<a href="">猪八戒</a>
</div>
</body>
毗邻选择器
使用 + 表示毗邻选择器,比如div+p,表示选择所有紧挨着div元素之后的p元素
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.c1+a{color:red}
</style>
</head>
<body>
<a href="">猪八戒</a>
<div class = 'c1'>唐僧</div>
<a href = ''>葫芦娃</a>
<div>
<a href = ''>孙悟空</a>
</div>
</body>
弟弟选择器
使用 ~ 表示弟弟选择器,比如div~p表示选择div元素下面的所有p标签
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.c1~a{color:red}
</style>
</head>
<body>
<a href="">猪八戒</a>
<div class = 'c1'>唐僧</div>
<a href = ''>葫芦娃</a>
<a href = ''>孙悟空</a>
</body>
组合选择器
- 并集选择器
- 交集选择器
并集选择器
多个选择器之间用 , 隔开,表示选中的页面中的多个标签,一些共性的元素,可以使用并集选择器,比如div,p表示选中所有div和p标签
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.c1,a{color:red}
</style>
</head>
<body>
<a href="">猪八戒</a>
<div class = 'c1'>唐僧</div>
<a href = ''>葫芦娃</a>
<a href = ''>孙悟空</a>
</body>
交集选择器
使用 . 表示交集选择器,第一个选择器必须是标签选择器,第二个必须是类选择器,比如div .active表示选择两者选中之后元素共有的特性
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div .a{color:red}
</style>
</head>
<body>
<span class = 'a'>猪八戒</span>
<div>
<div class = 'a'>葫芦娃</div>
<span class = 'b'>孙悟空</span>
</div>
</body>
属性选择器
属性选择器就是根据标签中的属性,选中对应的标签
语法:
[title]{color:red} #找到有title属性的所有标签
[titile='b']{color:red} #找到有title属性且值为b的所有标签
p[titile]{color:red} #找到有title属性的所有p标签
p[title='b']{color:red} #找到有title属性且值为b的所有p标签
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span[title='b']{color:red}
</style>
</head>
<body>
<span title = 'b'>猪八戒</span>
<div>
<span title = 'a'>葫芦娃</span>
<span title = 'b'>孙悟空</span>
</div>
</body>
伪类选择器
伪类选择器一般用在超链接a标签中.
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a:link{color:red}
/* a标签访问前显示的样式 */
a:active{color:green}
/*a标签鼠标殿下去显示的样式*/
a:visited{color:blueviolet}
/*a标签鼠标访问后显示的样式*/
a:hover{color:blue}
/*鼠标悬浮到a标签时显示的样式*/
div:hover{background-color:pink}
/* 鼠标悬浮到div标签时显示的样式*/
input:focus{background-color: brown}
/* input标签捕获光标时的演示样式*/
div{
100px;
height: 100px;
background-color: lightgray;
}
</style>
</head>
<body>
<a href="http://www.taobao.com">百度一下你就知道 </a>
<div></div>
<input type="text">
</body>
伪元素选择器
通过css造标签,主要有first-letter,before,after
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div:first-letter{
color:red;
font-size: 40px;
}
/*设置第一个首字母的样式*/
div:before{
color:pink;
content:'唉 <first>'
}
/*在文本之前添加内容和样式*/
div:after{
color:blue;
content:'<last>'
}
/* 在文本之后添加内容和样式*/
</style>
</head>
<body>
<div>
这么大的城
</div>
</body>
3.选择器的优先级
css的两大特性:继承性和层叠性
继承性:给父级设置一些属性，子级继承了父级的该属性
层叠性:权重大的标签覆盖掉了权重小的标签，谁的权重大，浏览器就会显示谁的属性
选择器优先级描述:
1.权重越高,对应选择器的样式会被优先选择
2.组合选择器,各选择器的权重相加
3.权重计算不进位.例:11个类选择器组合到一起,也没有一个id选择器优先级大
4.默认css样式是可以继承的,继承的权重为0
5.权重相同的选择器,使用最后一个
示例:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div .c1{color:red}
.c1 .c2 {color:green}
#d1{color:yellow}
div{color:green}
.c2{color:pink}
</style>
</head>
<body>
<div class = 'c2'>
假欢畅
<div class = 'c1' id = 'd1' >又何妨</div>
<div id='d1' style="color:blue"></div>
</div>
</body>
!important 的使用
！important:设置权重为无限大
!important 不影响继承来的权重，只影响选中的元素。不要随便使用!important,因为使用它会影响页面的布局
a标签设置样式需要单独选中,不能继承父级标签中的样式
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.c{color:green}
.c a{color:red}
</style>
</head>
<body>
<div class = 'c'>
<span>好聚好散</span>
<a href="">百度</a>
</div>
</body>
4.CSS样式
1.宽和高
width属性:可以为元素设置宽度
height属性:可以为元素设置高度
块级标签才能设置宽度,内联标签的宽度由内容决定
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
height:100px;
200px;
background-color: red;
}
span{
height:100px;
200px;
background-color: green;
}
</style>
</head>
<body>
<div>div标签</div>
<span>span标签</span>
</body>
2.字体属性
文字字体(font-family)
body{font-family:'宋体','楷体','微软雅黑'}
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值.
#网页中不是所有字体都能用,要看用户电脑内装没装该字体
#所有的中文字体都有英语别名
#一般将英文字体放在最前面,这样中文就会自动匹配后面的中文字体
字体大小(font-size)
p{font-size:14px}
如果设置为inherit表示继承父元素的字体大小值
字体粗细/字重(font-weight)
p{font-weight:bold}
| 值 | 描述 |
|---|---|
| normal | 默认值，标准粗细 |
| bold | 粗体 |
| bolder | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
字体颜色(color)
p{color:red}
p{color:#FF0000}
p{color:rgb(255,0,0)}
颜色属性被用来设置文字的颜色.
颜色是通过CSS最经常的指定：
1.十六进制值 - 如: ＃FF0000 #前两位是表示红，中间两位表示绿，后面两位表示蓝，F是最高级别，0表示最低级别（无色）
2.一个RGB值 - 如: RGB(255,0,0) #红绿蓝就是RGB的意思，第一个参数是红，最高255，最低0
3.颜色的名称 - 如: red
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
3.文本属性
文字对齐(text-align)
text-align 属性规定元素中的文本的水平对齐方式.
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
文字装饰(text-decoration)
text-decoration 属性用来给文字添加特殊效果.(常用的为去掉a标签下划线)
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| inherit | 继承父元素的text-decoration属性的值。 |
首行缩进(text-indent)
p{text-indent:32px} #首行缩进两个字符,每个字在页面的默认大小为16px
单位建议em p{text-indent:2em}
阴影(text-shadow)
p{text-shadow:5px 10px 15px red}
| 值 | 描述 |
|---|---|
| 5px | 水平方向偏移量 |
| 10px | 垂直方向偏移量 |
| 15px | 模糊度 |
| red | 阴影颜色 |
文字溢出(text-overflow)
<head>
<meta charset="UTF-8">
<title>text-overflow</title>
<style type="text/css">
.div0 {
300px;
border: 1px solid darkblue;
}
.div1 {
300px;
border: 1px solid red;
/*强制在一行内显示*/
white-space: nowrap;
/*超出部分隐藏*/
overflow: hidden;
}
.div2 {
300px;
border: 1px solid black;
/*强制在一行内显示*/
white-space: nowrap;
/*超出部分隐藏*/
overflow: hidden;
/*修剪超出的文本*/
text-overflow: clip;
}
.div3 {
300px;
border: 1px solid chocolate;
/*强制在一行内显示*/
white-space: nowrap;
/*超出部分隐藏*/
overflow: hidden;
/*显示省略符号来代表被修剪的文本*/
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="div0">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
<div class="div1">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
<div class="div2">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
<div class="div3">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
</body>
| 值 | 描述 |
|---|---|
| clip | 修剪文本 |
| ellipsis | 显示省略号代表被修剪文本 |
处理元素内空白(white-space)
| 值 | 描述 |
|---|---|
| normal | 默认.空白被浏览器忽略 |
| pre | 空白会被浏览器保留 |
| nowrap | 文本不换行,知道遇到<br> |
| pre-wrap | 保留空白符序列,但正常进行换行 |
| pre-line | 合并空白符序列,但是保留换行符 |
| inherit | 继承父元素white-space属性的值 |
4.背景属性
背景颜色(background-color)
设置背景色
<head>
<style>
.demo{
50px;
height: 100px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
背景图片(background-image)
设置背景图片
<head>
<style>
.demo{
2000px;
height: 1500px;
background-image: url('1.jpg');
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
发现默认的背景图片,水平方向和垂直方向都平铺
设置背景图像的平铺方式(background-repeat)
| 值 | 描述 |
|---|---|
| repeat | 默认.背景图像将在垂直方向和水平方向重复 |
| repeat-x | 背景图像将在水平方向重复 |
| repeat-y | 背景图像将在垂直方向重复 |
| no-repeat | 背景图像将仅显示一次 |
| inherit | 规定从父元素继承属性设置 |
设置背景图像的起始位置(background-position)
可以从两个维度上设置关键词
垂直位置:top center bottom
水平位置:left center right
例: background-position:right bottom
或者通过像素设置图片位置
例: background-position:10px 20px
#10px:距离左边的位置
#20px:距离上面的位置
设置固定的背景图像(background-attachment)
| 值 | 描述 |
|---|---|
| scroll | 默认值.背景图像会随着页面其余部分的滚动而滚动 |
| fixed | 当页面的其余部分滚动时,背景图像不会移动 |
| inherit | 规定从父元素继承属性设置 |
background属性的简写
background: red url('1.jpg') no-repeat right top;
5.边框属性
1.border-width 宽度
2.border-style 样式
3.border-color 颜色
#i1{
border-2px;
border-style:solid;
border-color:red
}
简写方式:
#i1{border:2px solid red}
边框样式
| 值 | 描述 |
|---|---|
| none | 无边框。 |
| dotted | 点状虚线边框。 |
| dashed | 矩形虚线边框。 |
| solid | 实线边框。 |
除了同一设置边框外还可以单独为某一个边框设置样式
#i1 {
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
}
设置圆角(border-radius)
用这个属性可以实现圆角边框的效果.将border-radius设置为长或高的一半即可得到一个圆形
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
border-style:solid ;
border-color:red;
border- 10px;
border-radius:50%;
/* border-radius:5% 实现圆角*/
200px;
height:200px;
}
</style>
</head>
<body>
<div></div>
</body>
利用border画三角
<head>
<style>
div{
0px;
height: 0px;
border-style: solid;
border- 20px;
border-color: #7ef0c2 transparent transparent transparent;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
6.display属性
行内元素:
- 与其他行内元素并排
- 不能设置宽,高.默认的宽度就是文字的宽度
块级元素:
- 独占一行,不能与其他任何元素并列
- 能设置宽,高.如果不设置宽度,那么宽度就默认变为父级的100%.
我们可以通过display属性将块级元素和行内元素进行相互转换.display即'显示模式'
块级元素可以转换为行内元素
给一个div标签设置:
display:inline
此时这个标签变为行内元素,此时它与span无异.也就是说:
1.此时这个div不能设置宽度,高度
2.此时这个div可以和其他元素并列了
行内元素转换为块级元素
给一个行内元素span设置:
display:block
那么这个标签将变为块级元素,此时它与一个div无异,也就是说:
1.此时这个span能够设置宽度,高度
2.此时这个span独占一行,不能与其他元素并排显示
3.如果不设置宽度,宽度默认为父级的100%
display属性用来控制HTML元素的显示效果
| 值 | 意义 |
|---|---|
| none | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
| block | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 |
| inline | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
| inline-block | 使元素同时具有行内元素和块级元素的特点。 |
<style>
div{
height:200px;
200px;
border:1px solid red;
display:inline;
}
span{
height:200px;
200px;
border:1px solid green;
display:block
}
</style>
</head>
<body>
<div>我是一个div标签</div>
<span>我是一个span标签</span>
</body>
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
7.盒子模型
在CSS中，"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。
盒模型示意图
盒模型的属性
width：内容的宽度
height: 内容的高度
padding：内边距，边框到内容的距离，padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域
border: 边框，就是指的盒子的宽度
margin：外边距，盒子边框到附近最近盒子的距离
盒模型的计算
内盒尺寸计算(元素大小)：
元素高度 = 内容高度 + 内边距 + 边框
元素宽度 = 内容宽度 + 内边距 + 边框
外盒尺寸计算(元素空间大小)
元素空间高度 = 内容高度 + 内边距 + 边框 + 外边距
元素空间宽度 = 内容宽度 + 内边距 + 边框 + 外边距
如果一个盒子设置了padding，border，width，height
盒子的真实宽度=width+2*padding+2*border
盒子的真实高度=height+2*padding+2*border
盒子示例:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.c1{
100px;
height:100px;
border:10px solid red;
padding:50px 50px
}
.c2{
100px;
height:100px;
border:10px solid blue;
margin: 50px;
}
.c3{
100px;
height:100px;
border:10px solid pink;
margin:60px
}
</style>
</head>
<body>
<div class = 'c1'> div1</div>
<div class = 'c2'> div2</div>
<div class = 'c3'> div3</div>
</body>
</html>
padding的设置
padding有四个方向,分别描述四个方向的padding
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
写综合属性:
/*上 右 下 左*/
padding: 20px 30px 40px 50px ;
/*上 左右 下*/
padding: 20px 30px 40px;
/* 上下 左右*/
padding: 20px 30px;
/*上下左右*/
padding: 20px;
margin的设置
margin:外边距的的意思.表示边框到最近盒子的距离.
/*表示四个方向的外边距离为20px*/
margin: 20px;
/*表示盒子向下移动了30px*/
margin-top: 30px;
/*表示盒子向右移动了50px*/
margin-left: 50px;
/*表示盒子距离右面的盒子100px*/
margin-right: 100px;
/*表示盒子距离下面的盒子100px*/
margin-bottom: 100px;
margin塌陷问题
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0
}
.father{
400px;
border:1px solid gray;
}
.box1{
300px;
height:200px;
background-color: red;
margin-bottom:20px ;
}
.box2{
400px;
height:300px;
background-color: green;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
当给标准流下的兄弟盒子,设置垂直方向上的margin时,那么以较大的为准,这种现象称为塌陷现象.所以在布局垂直方向盒子的时候注意margin的用法.
当给两个标准流下的兄弟盒子设置浮动后就不会出现margin塌陷的问题.
8.float浮动
标准文档流
web网页的制作,是个'流',要从上而下,不能随意选定位置进行设置
标准文档流下的微观现象:
1.空白折叠现象
多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。
2.高矮不齐,底边对齐
文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐。
3.自动换行,一行写不满,换行写
如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。
浮动元素会生成一个块级框，而不论它本身是何种元素。
关于浮动的两个特点：
- 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
float的三种取值:
- left:向左浮动
- right:向右浮动
- none:默认值,不浮动
float示例:
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
清除浮动的方式:
- 固定高度 :给父盒子设置高度
- 伪元素清除法(常用)
- clear清除浮动
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.c1{
100px;
height:100px;
background-color: red;
float:left
}
.c2{
100px;
height:100px;
background-color: indianred;
float:right
}
.c3{
height:100px;
background-color: pink;
/*clear:both !*clear清除浮动*!*/
}
/*1.给父盒子设置高度*/
.cc{height:100px}
/*2.伪元素清除法*/
/*.clearfix:after{*/
/* content:'';*/
/* display:block;*/
/* clear:both}*/
</style>
</head>
<body>
<div class="cc clearfix">
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="c3">div3</div>
</body>
clear清除浮动
clear属性规定元素的哪一侧不允许其他浮动元素
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
伪元素清除法
.clearfix:after{
/*必须要写这三句话*/
content: '.';
clear: both;
display: block;
}
9.overflow溢出
overflow属性规定当内容溢出元素框时发生的事情。
说明：
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 200px;
200px;
border: 1px solid red;
overflow: scroll;
}
</style>
</head>
<body>
<div class="c1">
人的心像一个匣子，里面装着一些人和一些回忆。匣子里的内容物会往复更替，这也是人会遗忘的原因。这么久没见了，我想把你从我的匣子里拿出来，晒晒太阳。
那两个本子我一直带在身边，一个珍藏，一个用来书写。说到底，记录生活这个习惯也是从那个时候开始的，身边坐着你，手里握着笔，一字一句写着青春。
本子是你送我的，很贵，很漂亮。
我几乎没有像你这样温柔的朋友，你很用心，很踏实，很努力。
你写明信片署名时总会画一颗笑脸豆，头上长叶的那种，因为你的昵称是豆子。
一说到喜欢的同人文时，你的眼睛就会发光。其实，豆子啊，你眯着眼睛笑的时候真的很可爱。
你还特别爱啃笔头，看见你傻乎乎啃笔头做题的样子我总戳你，但你说自己习惯了，估计现在都没改呢吧?
很多时候因为你的善解人意和温柔大方，别人都是依赖你的，甚至冲你撒娇。但其实，你也会对自己很熟的人撒娇，就连撒的娇也是善解人意的。我很荣幸，看见过你撒娇的样子，圆乎乎的笑脸，亮闪闪的表情，可爱极了。
我们两个老是一起比手掌大小，小小的你，肉乎乎的手在我掌心里显得很小。说句实话，那时候真的产生过要和你一起一直走下去的冲动。不瞒你说，我还吃过你发小和其它朋友的醋呢。
时钟一分一秒没有停止过转动，似乎还没适应我们分散两地的事实，转眼两年已经过去了。你叫我去你家做客，前后叫了三四遍不止，可惜我都失约了。就连买给你的生日礼物也在我家待了两年了。也许是没空，也许是没精力，渐渐的，你也不再叫我了。
</div>
10.定位(position)
无定位(static)
static 默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left,top等值是不起作用的
相对定位(relative)
相对定位是相对于自己原来的位置定位,是相对于该元素在文档流中的原始位置,即以自己原始位置左上角为参照物.但是,即使设定了元素的相对定位以及偏移值,元素还占有着原来的位置,即占据文档流空间.对象遵循正常文档流,所以不会出现像浮动那种父级标签塌陷的副作用,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义.凡是标签要进行移动,不管是float还是relative还是absolute,都是按照元素自己的左上角进行计算的.
| 值 | 描述 |
|---|---|
| 上移 | top:-100px/bottom:-100px |
| 左移 | left:-100px/right:-100px |
| 下移 | bottom:100px/top:100px |
| 右移 | right:100px/left:100px |
position:relative的一个主要用法:方便绝对定位元素找到参照物,可以将元素设置为relative,不设置任何二点top,left,right,bottom等,它还是它原来的位置
绝对定位(absolute)
定义:设置为绝对定位的元素框从文档流完全删除,也会有父级标签塌陷的问题,并相对于最近的已定位祖先元素定位,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(即body元素).元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样,元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框.
重点:如果父级设置了position属性,例如position:relative,那么子元素就会以父级的左上角为原始点进行定位,这样就能很好的解决自适应网站的标签偏离问题,即父级为自适应的,那么子元素就设置position:absolute,父元素设置position:relative,然后top,right,bottom,left用百分比宽度表示.
另外,对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位,而其层叠通过z-index属性定义.
固定(fixed)
fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动.而其层叠通过z-index属性定义.注意点:一个元素若设置了position:absolute|fixed,则该元素就不能设置float.这是一个常识性的知识点,因为这是两个不同的流,一个是浮动流,另一个是定位流.但是relative却可以,因为它原本所占的空间仍然占据文档流.
在理论上,被设置为fixed的元素会被定位与浏览器窗口的一个指定坐标,不管窗口是否滚动,它都会固定在这个位置.
绝对定位和相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.c1{
100px;
height: 100px;
background-color: red;
}
.c2{
100px;
height: 100px;
background-color: green;
/*position: relative; 相对定位,相对于自己自己原来的位置进行移动,原来的空间还占着 */
position: absolute; /* 绝对定位,不占用自己原来的位置,移动的时候如果父级标签以及祖先辈标签如果设置了相对定位,父级标签或者祖先标签进行移动 */
/* 如果父级标签都没有设置相对定位,那么就按照整个文档进行移动 */
top:20px;
left: 50px;
/*top:100px;*/
/*left:50px;*/
/*right:;*/
/*bottom:;*/
}
.cc{
position: relative;
left:100px;
}
.c3{
100px;
height: 100px;
background-color: blue;
}
.cc2{
100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="cc2"></div>
<div class="cc">
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="c3"></div>
</body>
</html>
固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1,.c3{
background-color: red;
height: 500px;
600px;
}
.c2{
background-color: green;
height: 500px;
600px;
}
#back_top{
height: 40px;
80px;
position: fixed;
right: 40px;
bottom: 40px;
background-color: black;
text-align: center;
line-height: 40px;
}
#back_top a{
color:white;
text-decoration: none;
}
</style>
</head>
<body>
<a name="xxx">这是顶部位置</a>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<span id="back_top">
<a href="#xxx">回到顶部</a>
</span>
</body>
</html>
11.z-index
z-index设置对象的层叠顺序,一般用在模态对话框上.
四大特性:
- z-index值表示层叠顺序,数值大的压住数值小的
- 只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
- z-index没有单位,就是一个正整数,默认的z-index值为0,如果都没有设置z-index值,或者z-index值一样,那么在html中,谁写在后面谁在上面
- 从父现象:父级z-index值小,子元素z-index值再大也没用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.shadow{
background-color: rgba(0,0,0,0.7); /* rgba可以设置透明度,0-1之间的数字 */
position: fixed;
top:0;
left: 0;
right: 0;
bottom: 0;
z-index: 90;
}
.mode{
440px;
height: 480px;
background-color: white;
position:fixed;
top:50%;
left: 50%;
z-index: 100;
margin-left: -220px;
margin-top: -240px;
}
.mode h2,.mode h3{
text-align: center;
}
.xxx{
text-align: right;
}
.xxx span{
}
.xxx span:hover{
cursor: pointer;
}
</style>
</head>
<body>
<h1>小米商城</h1>
<div>小米公司是一家专注于高端智能手机、互联网电视以及智能家居生态链建设的创新型科技企业。</div>
<div>
小米商城欢迎您
</div>
<div class="mode">
<div class="xxx">
<span>x</span>
</div>
<h2>登陆页面框</h2>
<h3>会员登录</h3>
<div class="i">
<div>
<label>
用户名:<input type="text">
</label>
</div>
<div>
<label>
密码:<input type="text">
</label>
</div>
</div>
</div> <!-- 对话框白框 -->
<div class="shadow"></div> <!-- 黑色阴影遮罩层 -->
</body>
</html>
12.透明度
opacity设置的是整个标签的透明度
rgba是单独给某个属性设置透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
100px;
height: 100px;
background-color: rgba(255,0,0,0.3);
}
.c2{
100px;
height: 100px;
/*background-color: rgba(255,0,0,0.3);*/
background-color: rgb(255,0,0);
opacity: 0.3; /* 0-1之间的数字,这是设置整个标签的透明底 */
}
</style>
</head>
<body>
<div class="c1">
div1
</div>
<hr>
<div class="c2">
div2
</div>
</body>
</html>