css是对网页进行的一种渲染
1.内嵌式优先级最高
<p style='color:red'>wkx</p>
2.嵌入式
<style>
css的代码
</style>
3.外部引用
<link rel="stylesheet" href="css代码链接">
内联式：少用
维护难,重复多
不会产生额外的请求
嵌入式：
代码复用不方便，适合单页面引用
不会产生额外的请求
外部式：
方便维护
可以重复使用
会产生额外的请求(技术的更新不影响)
优先级：
与先后顺序有关
内联式 > 嵌入式 > 外部式
嵌入式 > 外部式 link 是写在style 上面还是下面
<link rel="stylesheet" href="index.css">
<style type="text/css">
p{
color: red;
}
</style>
那么 style 就会覆盖 link 标签的样式
如果 link 在下面，就会覆盖style的样式css的选择器
签基本选择器
根据标签名字进行的选择
可以控制全部的选中的标签
1.标签选择器
div {
css代码
}
<div>内容</div> 标签名
2.id选择器
#i1 {
css代码
}
<div id="i1">内容</div> 标签内部的id值
3.class选择器
.c1{
css代码
}
<div class="c1">内容</div>
4.通配符选择器
*代表通配符，整个页面的全部标签
*{
css代码
}
<div>内容</div>
....
....类选择器与id选择器
<span id='span'></span>
<div class='active'></div>
#span{ # id选择器
color: blue;
}
选择网站中独有的特性的标签 id 就像身份证号一样，全网页只能出现一个独特的存在
.active{ # 类选择器
color: gray;
}组合选择器
后代和子代选择器
针对多层嵌套标签进行选择
1.后代选择器
<span id='span'></span>
<div class='active'>
<div>
111
</div>
</div>
.active div{
// 当前active 标签下的div全部都会赋予当前样式
}
2.子代选择器（会更加准确）
<div class="c1">
<div class="c2">
</div>
.c1 > .c2{ // 找到c1父级的c2子级进行选择
css代码
}
与或选择器
1.与选择器
div.c1{ 当两个class都是c1，使用与选择器指定c1是什么
css代码
}
<div class="c1"> item1</div>
<p class="c1">item2</p>
<div> item3</div>
2.或选择器
div.c1,#i1{ 根据条件可以选择class 和id 选中标签
css代码
}
<div class="c1" > item1</div>
<p class="c1" id="i1">item2</p>
<div> item3</div>兄弟选择器
1.毗邻兄弟选择器
.c2+.c3{ 根据条件找到标签的下一个兄弟发生变化 c3变化
css代码
}
<div class="c1"> item1 </div>
<div class="c2"> item2 </div>
<div class="c3"> item3 </div>
<div class="c4"> item4 </div>
<div class="c5"> item5 </div>
2.普通兄弟选择器
根据条件，除了选中的标签的下面兄弟发生变化 c2不发生变化 一下的发生变化
.c2 ~ .c5{
css代码
}
<div class="c1"> item1 </div>
<div class="c2"> item2 </div>
<div class="c3"> item3 </div>
<div class="c4"> item4 </div>
<div class="c5"> item5 </div>组合选择器交际选择器
1.组合选择器
<span>测试</span>
<span>测试吧</span>
<h3>6666</h3>
span,h3{ // 标签名称使用逗号隔开,是标签使用同一个样式
color: blue;
}
2.交集选择器
就是将两个样式重合的部分
a{
color: blue;
}
p{
color: blue;
}
可以写成
ap{
color: blue;
}
属性选择器
根据标签的属性进行选择
1.属性选择器
[type]{ 根据标签的所带属性进行选择
css代码
}
<input type="text">
<input type="password">
2.带名属性选择器
input[type="text"]{ 根据标签的所带属性和标签的名字进行选择（更准确）
css代码
}
<input type="text">
<input type="password">
3.模糊匹配选择器（和正则re差不多）
^= 以什么开头查询
$= 以什么形式结尾
*= 包含全部的值
[href$=".png"]{ 以.png结尾全部选中
css代码
}
<a href="1.png">click1</a>
<a href="2.png">click2</a>伪类选择器
设置鼠标在点击，悬浮，进入的标签颜色状态
1.设置标签本身的颜色
a:link{
color: red;
}
2.设置访问标签后的颜色
a:visited{
color: red;
}
3.设置鼠标悬浮时标签的颜色
a:hover{
color: red;
}
4.设置鼠标点击时标签的颜色
a:active{
color: red;
}
<a href="">文本</a>添加标签块级标签和内联标签
1.添加一个块级标签
#i1:after{
content: "这是一个伪类构造的块级标签";
display: block;
}
display设置block时就是块级标签
content: 设置标签的文本
2.添加一个内联标签
#i1:before{
content: "这是一个伪类构造的内联标签";
display: inline;
}
display设置inline时就是内联标签
content: 设置标签的文本
<div id="i1">aiv标签</div>样式继承与选择器优先级
指当父标签下面的子标签没有设置颜色时，父标签设置颜色，子标签也会继承父标签设置的颜色。
不是全部的都会继承，只有一部分继承。选择器的优先级
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
1 内联样式表的权值最高 style="" 1000；
2 统计选择符中的ID属性个数。 #id 100
3 统计选择符中的CLASS属性个数。 .class 10
4 统计选择符中的HTML标签名个数。 标签名 注意事项：
1、有!important声明的规则高于一切。
2、如果!important声明冲突，则比较优先权。
3、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
4、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
5、用数字表示只是说明思想，一万个class也不如一个id权值高文本操作
1.设置字体倾斜
font-style:italic;
font-style:oblique;
2.设置文字的粗细
font-weight: bolder; 100-900 设置数值
3.设置字体大小em为单位1em=16像素px
px 是页面的绝对单位
em 是页面的相对单位 如果字体为10px 那么 1em=10px默认字体大小16px
font-size: 1em;
4.设置字体族（字体样式）确认电脑中是否安装了这个字体
font-family:sans-serif ;
5.设置字体的颜色
color:颜色；
color:rgb(255,255,255) # rgb设置
rgba(255,255,255,0.4) # 将透明程度调整0.4 可以调整透明程度
color:#fff; # 16进制设置
6.文本在区域内居中
text-align: center 居中对齐
text-align: right; 右对齐
text-align: justify; 两端对齐
text-align: left; 左对齐
7.文本属性上下线
文本默认 text-decoration: none;
text-decoration: line-through; 对字体设置中间线
text-decoration: overline; 对字体设置上划线
text-decoration: underline; 对字体设置下划线
a标签一般会将下划线进行设置取消
text-decoration: none; 使用这个属性可以实现取消
8.文本的缩进
假如 文本为16px 那么1em = 16px
text-indent: 2em;
9.文本的行高(文本自动垂直居中)
无论设置多少的行高，文本永远在垂直居中的位置
字体的大小一定要小于行高，不然就会溢出
line-height: 60px; 设置行高60px、
10.文本字间距
letter-spacing: 5px; 只对字符和中文有效果 h间距e间距l间距l间距o
word-spacing: 100px; 设置文字距离，对英文单字的距离 hello 间距 word
清除某些html元素的默认样式
1.body 标签默认是存在一个外边距样式
默认margin:8px; 的样式
margin: 0; 将8px清楚为0
2.p 标签默认存在外边距样式
margin:16px;
margin: 0; 将16px清楚为0
3.ul ol dl 都是存在默认样式
margin:0;
padding:0;
list-style:none; # 清楚默认样式的.
4.input默认样式 自带边框样式与外线样式
border:none;
outline:none;
5.a标签去除下划线样式
text-decoration:none;标签背景设置
.c1{
background-image: url(图片路径);
background-repeat:图片背景参数；
background-position:图片背景的起始位置
}
<div class="c1">文本</div>
background-repeat属性参数
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。取消默认填充
background-position属性设置
x%
y%
默认参数0,0
center center 居中设置
background-size 属性
length
如果只设置一个值，则第二个值会被设置为 "auto"。
20px 30px 第一个值设置宽度，第二个值设置高度
percentage
以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
contain
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
cover
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
body{
height: 100%;
width: 100%;
background-image:url('./R\ -\ 副本.jfif') ;
background-repeat:no-repeat;
background-size:cover;
}补充属性
列表（默认格式取消）
ul {
list-style-type: none; 设置将列表的默认格式取消
}
<ul>
<li>内容</li>
</ul>设置属性设置一个元素的垂直对齐方式
img{
vertical-align: 修改进行对齐底部;
}
<img src="" alt="" class="c1">标签悬浮小手
cursor: pointer; 文本标签在鼠标悬浮时是一条杠 使用这个属性可以变为小手与a标签相似display属性
修改标签的属性
文本标签
h1-h6
p
strong
em
a
span
img
排版标签
br/hr
ul/ol/dl
li
div
input
table
select
form
option
块级元素
div ul ol p h table form
特点
1.独占一行
2.可以设置宽高，如果不设置宽度那么就是父级元素的100%
行内元素
a span em strong label
特点
1.在一行内显示
2.不能设置宽高，默认的宽高为文本内容占据的宽高(文本就是撑起标签的宽高)
行内块
input img
特点 既有行内元素也有块级元素的特性
1.在一行内显示
2.可以设置宽高
可以进行标签的属性转换
display中对块/行/行内块的对应竖向
控制元素的显示特性
display:block; # 显示块级元素
display:inline; # 显示行内元素
display:inline-block; # 显示行内块元素
display: none; # 隐藏当前标签(设置元素的隐藏)
使用的最多的 是行内转为行内块盒模型
盒子模型是什么：
css model 属于用来设计和布局时使用的
所有的html元素可以看做一个盒子
他包括 外边距 边框 内填充 和实际内容
实际内容： 文本 图片 或者其他标签
例如：
将月饼盒 与 月饼的距离 ： 内填充 padding
月饼盒1 与 月饼盒2的距离 ： 外边距 margin
月饼盒外面的一圈 ： 边框 border
块级元素都具备盒子模型的特征属性
1.padding ： 内边距 盒子边框到内容的的距离
作用:设置盒子与内容之间的距离
padding: 上下左右 4个方向
padding-bottom:下;
padding-top:上;
padding-left:左;
padding-right:右;
例如：
内边距的 50px 上下左右 实际300px * 300px
height:200px
width:200px
padding: 50px;
如果还是想要200*200的盒子那么就需要进行计算，真正的内容设置为100*100
height:100px
width:100px
padding: 50px;
2.border: 盒子的边框
border: none; /*清楚标签的默认边框*/
outline: none; /*清除外线默认样式*/
边框3要素：粗细(width) 样式(style) 颜色(color)
border-width:10px ;
border-style: solid ; solid实线 dotted点线 double双线 deshed虚线
border-color: red;
例如：
边框宽度3px 实线 颜色为green
border: 3px solid green;
3.margin: 盒子与盒子之间的外边距
margin-right: 10px; # 盒子外边距左 水平方向
margin-left: 10px; # 盒子外边距右 水平方向
margin-top: 10px; # 盒子上方10px 垂直方向
margin-bottom: 10px; # 盒子外边距下方10px 垂直方向
在垂直方向上 会出现外边距合并的现象，小的会被大的合并 外边距塌陷
尽量只设置一个方向的距离，防止外边距塌陷
注意：设置height 与 width 宽高是内容的宽高，而不是盒子模型的宽高
可以使用padding 来填充行内元素 只要填充的高度 = 设置的行高就可以盒子剧中
*{
padding: 0;
margin: 0;
}
.class{
width: 100%;
height: 40px;
background-color: black;
}
.content{
width: 1200px;
height: 100%;
background-color: antiquewhite;
/* 只显示左右居中,上下不显示 */
margin: 0 auto;
}
</style>
</head>
<body>
<div class="class">
<div class="content"></div>
</div>
</body>
</html>浮动属性
介绍
1.正常文档流 从上到下，用左到右逐一加载
块级元素，随着浏览器读取文档的顺序，自上而下垂直分布，一行一个形式
行内元素，晦涩者浏览器文档的顺序，从左往右水平分布，一行多个形式占据页面的位置，行内元素满一行才会
接着排列
2.浮动文档流
浮动元素的特性
1. 任何申明为float 的元素都会自动被设置为一个行内块状元素，具有行内块状元素的特性。
2. 假如某个元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
3. 在标准浏览器中如果浮动元素a脱离了文档流，那么排在浮动元素a后的元素将会往回排列占据浮动元素a本来所处的位置，使页面布局产生变化。
4. 如果水平方向上没有足够的空间容纳浮动元素，则转向下一行。
5. 字围效果：文字内容会围绕在浮动元素周围。
6. 浮动元素只能浮动至左侧或者右侧。
7. 浮动元素只能影响排在其后面元素的布局，却无法影响出现在浮动元素之前的元素。
css提供的浮动特性float属性
浮动就是漂浮的意思，当设置浮动是就漂浮在上空。
假设有三个元素ABC
1.当A未设置浮动，B设置浮动，C未设置浮动。
呈现的效果就是A第一行，C在第二行，B在C上面漂浮进行覆盖
2.当A设置浮动，B未设置浮动，C设置浮动。
A在第一行浮动，B在第一行，A覆盖B，B占据了第一行。C在第二行浮动格式
浮动的属性：
float:none; 不浮动 默认情况下
left 左浮动
right 右浮动
inherit 继承父元素的浮动效果
实现多列的排版布局字围
float浮动的字围效果
在设置浮动是，不会对文本进行覆盖（图片浮动，文字不会被覆盖，会被围到，）
环绕图片显示
只需要对图片进行设置浮动，那么文字就会围绕着图片
因为当浮动时，会出现盒子收缩的现象
img{
float:left;
}
.div{
height: 500px;
width: 500px;
}
<div class="div">
<img> 图片
<p>文字p>
</div>浮动元素现象
正常网页属于流式网页，从左往右，从上往下 被称为标准文档流
当盒子设置了float 浮动时，那么这个盒子就脱离了标准的文档流。
浮动的现象：
1.脱离标准的文档流
2.浮动元素的互相贴靠
3.浮动的盒子有收缩现象
要浮动就一起浮动，要是不浮动那么就浮动
浮动具有破坏性：父级塌陷的情况
父级元素内的子元素浮动，子元素无法撑起父级元素
浮动脱离了标准文档流，浮动的元素会飘在文档流之上父级塌陷
float浮动的父级塌陷
1.在设置父级是没有设置宽和高，
2.使用子级的宽和高撑起来了父级的高度
3.当子级使用float浮动特性是，子级浮在空中，父恢复原先的状态，没有高度和长度
4.当其他父设定内容是，就会和上一层父贴合，浮空的子级覆盖其他父的高宽塌陷的解决方式
1.给父盒子设置固定高度
缺点：不灵活，后期不好维护
应用：网页中的固定高度区域，比如固定的导航栏
2.内墙法
在浮动的div下设置一个div 设置属性
clear:both
<div style='float:left'></div>
<div style="clear:both"></div>
规则就是在最后一个浮动元素后面加上一个空的块级元素，并且设置该属性clear:both
缺点：结构冗余
3.伪元素(选择器)清除法
标签/类/id::after 是一个伪元素：主要作用创建一个伪元素，作为选中的元素内的最后一个子元素
主要内部的属性就是一个content:'对应创建的文本内容'
父类标签::after{
结合内墙法
content: ''; # 设置一个元素空的
display: block; # 块级标签
clear: both; # 设置clear 属性清除浮动，将设置浮动的元素当做没有设置浮动元素来看待
}
.div::after{
content: '';
display: block;
clear: both;
}
<div class='div'>
<div style='float:left'></div>
</div>
4.overflow:
overflow: visible; 默认属性 超出的部分进行可见
overflow: hidden; 超出部分隐藏
overflow: scroll; 超出的部分 用滚动条进行显示
overflow: auto; 超出部分由浏览器进行决定
overflow: inherit; 继承父级的overflow
在存在浮动的的父标签属性中 设置overflow: hidden;形成bfc
<div class="div" style="overflow: hidden">
<div class="div1" style='float: left;'></div>
</div>
清除塌陷的最好方式：给浮动元素的父标签设置高度解决父级塌陷的代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.top_bar{
border: 1px solid red;
/*方式1的属性清除浮动，给父设置相同的高度*/
/*height: 200px;*/
/*方式4 overflow
存在一个规则:计算bfc(块级盒子)的高度时，浮动的元素也会计算在内
形成bfc条件:除了overflow:visitable的属性 其他的都会形成bfc区域
*/
overflow: hidden;
}
.child1 {
background-color: #747070;
float:left;
height: 200px;
width: 200px;
}
.child2 {
/*width: 300px;*/
background-color: red;
float:right;
height: 200px;
width: 200px;
}
.her{
height: 40px;
width: 1800px;
background-color: #111515;
}
.clear{
/*方式2的属性*/
/*clear: both;*/
}
/*.top_bar::after{*/
/* !*方式3 设置伪元素,结合内墙法清除浮动效果*!*/
/* content: '';*/
/* display: block;*/
/* clear: both;*/
/* overflow: inherit;*/
/*}*/
</style>
<body>
<div class="top_bar">
<div class="child1">左盒子</div>
<div class="child2">右盒子</div>
<!--方式2 内墙法-->
<!-- <div class="clear"></div>-->
</div>
<div class="her">
</div>
</body>
</html>清除浮动
清除悬浮属性
设置的float的属性，只会影响自己块状元素，不会影响其他块状元素
clear: left;左边不能有浮动元素
clear: right;右边不能有浮动元素
clear: both; 两边都不能有浮动元素position定位
position属性（重要）
1. 相对定位
参数 relative，position: relative;
相对定位，在正常的的文档流中，可以使用正常的left、right、top、bottom 进行调整
相对定位：
按照自己的位置进行偏移，下面的元素不会进行补位（只会空出来）
2.绝对定位
参数 absolute，position: absolute;
绝对定位，脱离正常文档流，可以使用正常的left、right、top、bottom 进行调整，只能根据最近的父级模块 进行绝对的定位调整
父级相对定位，子级绝对定位，两个模块进行覆盖
绝对定位：
它会按照自己的父级定位进行移动，如果父级没有定位，那么他就会按照body进行移动，并且，下面的元素块会进行补（占据原先它的位置）
3.固定定位
参数 fixed，position: fixed;
完全脱离文档流，参照物窗口
固定定位与绝对定位有点相似，但是固定定位是使用left、right、top、bottom属性相对于整个浏览器的窗口进行定位，而不再相对于某个HTML页面元素了，所以当元素使用了固定定位以后，就算页面的滚动条滚动了，固定定位的元素也不会变化位置。也就是说固定定位是相对于窗口的定位，不受文档流的影响了。
固定定位：
按照窗口进行定位,根据上下左右设置与窗口的距离.(固定不动)相对定位
设置了position:relative
可以使用top left right bottom 对盒子进行移动
简单微调元素的位置
1.不脱离标准文档流，可以调整元素
2.移动的参考点，是当前盒子原来的位置进行参考进行移动(自己原来的位置)
重点：移动的位置按照原位置最为参照 进行top left...
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div {
width: 200px;
height: 200px;
}
.x1{
background-color: #747070;
position: relative;
left: 100px;
bottom:100px;
}
.x2{
background-color: red;
}
.x3{
background-color: blue;
}
</style>
<body>
<div class="x1">1</div>
<div class="x2">2</div>
<div class="x3">3</div>
</body>
</html>绝对定位
position:absolute
可以使用top left right bottom 对盒子进行移动
特定：
1.脱离了标准的文档流，不在页面上占位置，与float类似，没有文本环绕的效果
2.存在压盖现象，层级提高，覆盖其他盒子
参考点：
单独给盒子设置绝对定位，会根据跟body元素为参考点
以父盒子位置为参考点
相对定位于最近的static祖先元素定位，如果没有非static祖先元素，那么以跟页面元素左上角进行定位
按照子绝对定位，父相对定位(不脱离文档流)，让子元素根据父元素进行调整
重点:
1.脱离标准文档流 与浮动相似
2.使用top left的标准按照 当前绝对定位的父盒子作为标准(如果没有父盒子就会以body作为top0移动)
子绝对 父相对 可以实现盒子的剧中垂直显示
子绝对 父相对 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
form {
width: 500px;
height: 50px;
/*父相对定位*/
position: relative;
background-color: #111515;
}
input{
height: 100%;
width: 100%;
}
div .wb{
/*子绝对定位*/
position: absolute;
top: 16px;
right: 45px;
}
div .wb .span1{
background-color: blue;
}
div .wb .span2{
background-color: red;
}
div .wb span:hover{
cursor: pointer;
background-color: #111515;
}
</style>
<body>
<div>
<form action="">
<input type="text">
<div class="wb">
<span class="span1">小米9</span>
<span class="span2">小米10</span>
</div>
</form>
</div>
</body>
</html>固定定位
position:fixed
可以使用top left right bottom 对盒子进行移动
特点：
1.脱离固定文档流
2.一旦设置固定定位，在页面中进行滚动，位置永远不会变化
参考点：
按照浏览器的左上角范围为参考点，也可以理解为按照html(跟参考点
例如： 这个盒子就永远不会变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div{
background-color: red;
width: 100px;
height: 100px;
position: fixed;
top: 0;
right: 0;
}
</style>
<body>
<div>我就固定在这里不动了</div>
</body>
</html>侧边栏固定案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定导航栏</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.site-ber ul li{
height: 50px;
width: 50px;
padding-bottom: 5px;
}
img{
height: 100%;
width: 100%;
}
.site-ber{
position: fixed;
width: 50px;
border: 1px solid red;
bottom: 150px;
right: 0;
margin-right: 10px;
}
</style>
</head>
<body style="height: 2000px">
<div class="site-ber">
<ul>
<li>
<a href="">
<img src="" alt="">
</a>
</li>
<li>
<a href="">
<img src="" alt="">
</a>
</li>
<li>
<a href="">
<img src="" alt="">
</a>
</li>
<li>
<a href="">
<img src="" alt="">
</a>
</li>
<li>
<a href="">
<img src="" alt="">
</a>
</li>
</ul>
</div>
</body>
</html>浮动和定位对行内元素的影响
对行内元素设置了浮动，是可以设置宽高的，当前行内元素就脱离的标准文档流
与 display: block; 还是有区别的 这个是设置变为块级元素
设置定位
position:absolute; 绝对定位
position:fixed; 固定定位
脱离了标准文档流，可以设置宽高z-index层级 属性
默认出现压盖现象时
z-index:auto; 只能用于定位元素上，可以进行设置值越大就会压盖越小的
z-index:正整数 越大就会压盖越小的
z-idnex 比较的是父级，父级牛逼 儿子就牛逼，不管儿子大小
注意：
1.z-index只能使用在定位上面
2.如果父级存在z-index 就会按照父级的进行对比，不管内部子级是否存在这个属性
以父级的为基准
实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.a {
position: relative;
height: 100px;
width: 100px;
background-color: #747070;
border: 1px solid aliceblue;
z-index: 1;
}
.b {
position: relative;
height: 100px;
width: 100px;
background-color: red;
border: 1px solid aliceblue;
top: -30px;
left: 50px;
z-index: 10;
}
.c {
position: relative;
height: 100px;
width: 100px;
background-color: peru;
border: 1px solid aliceblue;
top: -50px;
left: 100px;
z-index: 20;
}
</style>
<body>
<div style="position:relative;z-index: 30">
<div class="a">1</div>
</div>
<div style="position:relative;z-index: 10">
<div class="b">2</div>
</div>
<div style="position:relative;z-index: 5;">
<div class="c">3</div>
</div>
</body>
</html>css背景属性
最常用的背景属性
background-color
可以按照直接设置颜色 yellow
可以按照RGB模式 rgb(255,0,0)
可以按照16进制设置 #00ff00
可以按照RGBA模式 rgba(255,255,255,0.5) # 最后一个参数为颜色的透明程度0.1(100%透明)-1(不透明)
设置背景图片 默认使用平铺状态
background-image: url("图片路径")
background-repeat: repeat; 默认情况下 平铺方式
background-repeat: no-repeat; # 设置不平铺
background-repeat: repeat-x; 横向平铺 左右
background-repeat: repeat-y; 纵向平铺 上下
背景图片定位
background-position: 500px 0;
对应的关键字
center 中间 top 上 left 左 right 右 bottom 下
将背景图片至于中间的位置
background-position: center center
百分比
0% 50% 100%
background-position:50% 50%
还可以使用px
水平百分比计算:
容器的百分比-背景图片的百分比
控制背景图的缩放比例
1.宽度
2.高度
background-size: 24px 597px;background-image背景图案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<STYLE>
.bg{
background-image: url("788899989..webp");
height: 1125px;
width:100%;
background-repeat: no-repeat;
background-position: center top;
}
</STYLE>
</head>
<body>
<div class="bg">1</div>
</body>
</html>css sprite 雪碧图技术
是什么：
他是一种图像的拼接合并技术
将多个小图标和背景图片合并在一张图片上
利用css的背景定位来显示需要显示的图片部分
1.静态图片，不随用户信息变化而变化
2.小图片, 图片比较小(2-3kb)
3.加载比较大
优点：
1.有效减少http请求数量
因为之请求了一张大的图片，从大的图片中切割小的图片
2.加速内容的显示
通过css 背景图属性的background-position 来控制雪碧图的显示
好多小图片整合到一张大图中，从大图中进行裁剪下来需要的小图
案例：
根据一整张大图进行 x y 进行切割
x 就是 当前图片的顶部位置
y 就是 当前图片的下面的位置
也就是使用 background-position 将位置裁剪出来，而显示的内容就是当前选选中图片的大小
在一张大图中，切割小图进行显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<STYLE>
.bg1{
background-image: url("雪碧图.png");
height: 40px;
width: 24px;
background-repeat: no-repeat;
background-position: 0 0; 就是第一张图
}
.bg2{
background-image: url("雪碧图.png");
height: 40px;
width: 24px;
background-repeat: no-repeat;
background-position: 0 -40px; 就是第二张图片
}
.bg3{
background-image: url("雪碧图.png");
height: 40px;
width: 24px;
background-repeat: no-repeat;
background-position: 0 -80px;
}
.bg4{
background-image: url("雪碧图.png");
height: 40px;
width: 24px;
background-repeat: no-repeat;
background-position: 0 -120px;
}
</STYLE>
</head>
<body>
<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>
<div class="bg4"></div>
</body>
</html>淘包列表导航案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
list-style: none;
padding: 0;
margin: 0;
text-decoration: none;
}
.tobao_list {
float: left;
border-top: 1px solid #f4f4f4;
}
.tobao_list ul {
width: 292px;
overflow: hidden;
}
.tobao_list ul li {
float: left;
width: 71px;
height: 75px;
border: 1px solid #f4f4f4;
/*清除覆盖的线的颜色，设置为透明色 transparent*/
border-top-color: transparent;
border-left-color: transparent;
}
.tobao_list ul li a {
text-align: center;
display: block;
/*设置字体粗细*/
font-weight: 75;
/*设置字体大小*/
font-size: 12px;
/*line-height: 75px;*/
color: #888;
}
.tobao_list ul li span {
width: 24px;
height: 24px;
background-image: url("雪碧图1.png");
background-position: 0 0;
background-repeat: no-repeat;
display: inline-block;
margin-top: 12px;
}
.tobao_list ul li .span1 {
background-position: 0 0;
}
.tobao_list ul li .span2 {
background-position: 0 -44px;
}
.tobao_list ul li .span3 {
background-position: 0 -88px;
}
/*只需要进行修改 background-position 进行切图就行*/
</style>
</head>
<body>
<div class="tobao_list">
<ul>
<li style="border-left:none">
<a href="">
<span class="span1"></span>
<p>充话费</p>
</a>
</li>
<li>
<a href="">
<span class="span2"></span>
<p>充话费</p>
</a>
</li>
<li>
<a href="">
<span class="span3"></span>
<p>充话费</p>
</a>
</li>
<li style="border-right:none">
<a href="">
<span class="span4"></span>
<p>充话费</p>
</a>
</li>
<li style="border-left:none">
<a href="">
<span class="span5"></span>
<p>充话费</p>
</a>
</li>
<li>
<a href="">
<span class="span6"></span>
<p>充话费</p>
</a>
</li>
<li>
<a href="">
<span class="span7"></span>
<p>充话费</p>
</a>
</li>
<li style="border-right:none">
<a href="">
<span class="span8"></span>
<p>充话费</p>
</a>
</li>
<li style="border-left:none">
<a href="">
<span class="span9"></span>
<p>充话费</p>
</a>
</li>
<li>
<a href="">
<span class="span10"></span>
<p>充话费</p>
</a>
</li>
<li>
<a href="">
<span class="span11"></span>
<p>充话费</p>
</a>
</li>
<li style="border-right:none">
<a href="">
<span class="span12"></span>
<p>充话费</p>
</a>
</li>
</ul>
</div>
</body>
</html>页面上制作圆的效果盒子角弧度效果
使用属性
radius ： 中文弧形
border-radius:20px; 将盒子的4个脚全部设置为20px的弧度
border-radius:10px 50px ; 对角设置弧度 10px负责第一个脚 50px 第二个脚
border-radius:10px 50px 80px 100px; 分别设置4个脚不一样的弧度网页中阴影效果
/*
单位为px
第一个值是水平偏移方向
正值水平方向的正方向 右
负值水平方向的负方向 左
负 --------- 正
第二个值垂直偏移方向
上 负值
下 正值
这两个值主要作用调整阴影的角度和位置
第三个值是阴影的模糊程度
第4个值 是阴影的颜色
第5个值 设置内射阴影，阴影在内部，凹凸 inset
*/
box-shadow: 10px 10px 5px #5f5a5a;
可以实现一个效果，当鼠标悬浮时，会出现一个向上移动并且出现阴影的悬浮效果
案例：鼠标悬浮 盒子移动出现阴影效果 和小米商城的相似
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<STYLE>
.y{
/*相对定位*/
position: relative;
height: 200px;
width: 200px;
background-color: #888888;
/*box-shadow: 10px 10px 5px #5f5a5a;*/
}
.y:hover{
top: -3px;
z-index: 2;
box-shadow: 0 10px 5px #e0e0e0;
-webkit-transition: all .3s linear; /*渐变*/
transition: all .3s linear; /*过度效果*/
/*transform: translate3d(0, -2px, 0); !*语法 translate3d(tx, ty, tz)*!*/
/*
translate3d css 函数
3d效果
tx
其 <length> (en-US) 代表平移向量的橫坐標。
ty
其 <length> (en-US) 代表平移向量的縱坐標
tz
其 <length> (en-US) 代表平移向量的 z 分量
*/
}
</STYLE>
</head>
<body>
<div class="y"></div>
</body>
</html>布局
单列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{
margin: 0;
height: 100%;
}
/*头部 主体 脚部 的主要显示内容并且居中显示 父级标签占据页面的100% 子级只占用1200 并且居中*/
.container{
width: 1200px; /*宽度1200px*/
margin: 0 auto; /*居中显示*/
}
.header{
width: 100%; /*占据整个网站的100%宽度*/
height: 60px; /*固定显示60 高度*/
line-height: 60px;
text-align: center;
background-color: #000;
}
.header .container{ /*头部的显示内容 设置高度与父级高度一致 设置背景颜色*/
height: 60px;
background-color: orange;
}
.wrap{
width: 100%;
height: 100%;
}
.wrap .container{
height: 100%;
background-color: red;
}
.footer{
width: 100%;
}
.footer .container{
height: 100px;
background-color: #888888;
}
</style>
</head>
<body>
<!--头部-->
<div class="header">
<div class="container">头部主要显示内容</div>
</div>
<!--主体内容-->
<div class="wrap">
<div class="container">主体主要显示内容</div>
</div>
<!--脚部内容-->
<div class="footer">
<div class="container">脚注主要显示内容</div>
</div>
</body>
</html>多列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{
margin: 0;
height: 100%;
}
/*头部 主体 脚部 的主要显示内容并且居中显示 父级标签占据页面的100% 子级只占用1200 并且居中*/
.container{
width: 1200px; /*宽度1200px*/
margin: 0 auto; /*居中显示*/
}
.header{
width: 100%; /*占据整个网站的100%宽度*/
height: 60px; /*固定显示60 高度*/
line-height: 60px;
text-align: center;
background-color: #000;
}
.header .container{ /*头部的显示内容 设置高度与父级高度一致 设置背景颜色*/
height: 60px;
background-color: orange;
}
.wrap{
width: 100%;
height: 100%;
}
.wrap .container{
height: 100%;
background-color: red;
}
.footer{
width: 100%;
}
.footer .container{
height: 100px;
background-color: #888888;
}
/*多列布局主要是在主体内容上面进行多个块区域*/
/*左区域*/
.wrap .container .left{
width: 15%;
height: 100%;
float: left; /*因为父类存在高度，就不存在父级塌陷问题 不需要设置清除浮动问题*/
background-color: blue;
}
.wrap .container .right{
width: 15%;
height: 100%;
float: right;
background-color: rebeccapurple;
}
.wrap .container .center{
height: 100%;
background-color: lavender;
/*与左右存在一点距离*/
margin: 0 190px;
}
</style>
</head>
<body>
<!--头部-->
<div class="header">
<div class="container">头部主要显示内容</div>
</div>
<!--主体内容-->
<div class="wrap">
<div class="container">
<div class="left">左</div>
<div class="right">右</div>
<div class="center">中</div>
</div>
</div>
<!--脚部内容-->
<div class="footer">
<div class="container">脚注主要显示内容</div>
</div>
</body>
</html>网站注意事项
1.命名规范
http://www.divcss5.com/jiqiao/j4.shtml#no3
2.目录规范
项目名
css 样式文件
fonts 第三方图标
images 图片
js js脚本文件
index.html 出口文件
3.确定错误的位置网页元素中的居中问题
行内元素居中
方式1
设置 text-align: center; 使文本进行水平居中
设置 行高 line-height = 盒子的高度 使用文本垂直居中
两个组合就是水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
color: #e0e0e0;
text-align: center; /*水平居中*/
line-height: 200px; /*如果进行垂直居中，需要设置行高等于盒子的高度 达到垂直居中*/
}
</style>
</head>
<body>
<div class="box">
<span>123</span>
</div>
</body>
</html>
方式2
将元素设置为 display: table-cell; 表格
在使用 属性vertical-align: middle; 设置垂直居中
这是一个表格元素属性 默认table 的vertical-align: middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
color: #e0e0e0;
/*单元格默认时垂直居中的状态*/
display: table-cell; /*将标签设置为一个单元格*/
vertical-align: middle; /*设置属性 变为垂直居中 */
text-align: center; /*水平居中*/
}
</style>
</head>
<body>
<div class="box">
<span>123</span>
</div>
</body>
</html>块级元素水平居中显示
水平居中 margin: auto;
1.使用子绝对 父相对 + margin 进行水平垂直居中显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
background-color: black;
height: 200px;
width: 200px;
position: relative;
}
.child{
position: absolute;
background-color: #888888;
height: 100px;
width: 100px;
margin: auto;
将上下左右 4个属性设置为0 系统自动计算
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
</html>
方式2
将父的属性设置为 table-cell table单元格标签类型
在设置独有的属性 vertical-align: middle; 达到垂直居中
将子元素设置为 行内块元素 可以使用text-align: center; 就可以达到水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
background-color: black;
height: 200px;
width: 200px;
/*内部的盒子垂直居中显示*/
display: table-cell;
vertical-align: middle;
/*设置行内内容居中，必须是行内元素，所以需要将子设置为行内块*/
text-align: center;
}
.child{
/*如果单纯设置行内元素 高度和宽度不起作用 所以使用行内块元素*/
display: inline-block;
height: 100px;
width: 100px;
background-color: #888888;
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
</html>
3.使用子绝父相 纯计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
background-color: black;
height: 200px;
width: 200px;
position: relative;
}
.child{
position: absolute;
height: 100px;
width: 100px;
background-color: #888888;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
/*纯计算*/
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
</html>补充
overflow: hidden; /*超出内容隐藏*/
white-space: nowrap; /*超出字体不让换行*/
text-overflow: ellipsis; /*字体超出部分省略号显示*/
/*清除浮动属性*/
.clearfix::after {
content: '';
clear: both;
display: block;
}
/*清除样式*/
*{
padding: 0;
margin: 0;
text-decoration:none;
list-style: none;
}
input{
border: none;
outline: none;
}图标库
https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
清除塌陷和间距调整没效果的最好方式就是 给设置高度，哪里存在浮动，那么就对那个位置的父设置高度