html-css
clear==>清楚浮动元素对当前元素的影响
clear: both;
clear
作用:
*清楚浮动元素对当前元素所产生的影响*
*可选值:*
*left 清楚左侧浮动元素对当前元素的影响*
*right 清楚右侧元素对当前元素的影响*
*both 清楚两侧中最大影响的那侧*
2.clearfix ==>清楚高度塌陷和解决外边距重合
.clearfix::before,
.clearfix::after{
content: '';
/* 用来解决外边距重合 */
display: table;
/* 用来解决高度塌陷*/
clear: both;
}
3.绝对定位来设置包含块居中和平移来设置包含块居中两种方法
.box2{
//设置宽和高,这样就只有外边距为auto,就可以自动补齐
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
margin: auto;
/* 让其外边距水平和垂直自动补齐等式 */
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
/* 这样设置就可以让我们的子元素在包含块中居中, */
}
//第二种方法
.box2{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
//使用平移来进行对元素设置居中
transform: translate(-50%,-50%);
}
4.z-index ==> 设置层级
position: absolute;
z-index: 1;
z-index 层级设置,数越大层级越高,如果不设置z-index,则默认后面写的层级高.
不管父元素的层级多高,它的子元素的层级都比它高
5.引入图标字体
//引入文件
<link rel="stylesheet" href="../01.html/fa/css/all.css">
//使用(一般用 i标签使用图标字体)
<i class="fas fa-bell"></i>
//也可以使用伪类来添加图标字体
.ul li::before{
content: "\f1b0"; //使用它的代码值
font-family:'Font Awesome 5 Free';
font-weight: 900;
color: orange;
margin-left: 40px;
}
6.字体族
font-family: sans-serif;
/* 字体族可选值:
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
cursive 草书字体
*/
7.行高设置 是元素给其内部的文本设置行高
text-align: right;
/* 可选值:
left 左对齐
center 居中对齐
justify 两端对齐
*/
8.vertical-align设置 用来设置行内元素对齐方式的
display属性值为inline、inline-block、inline-table另加一个table-cell的元素.
vertical-align: bottom;
/* vertical-align
可选值:
baseline 默认值 基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐
也可以是数值
在遇到图片要对齐其框边时,也可以使用这个属性来对齐
*/
9.文本的省略号设置
white-space: nowrap ; //对于文本是否换行设置
/* 可选值:
normal 正常
nowrap 不换行
pre 保留空白
*/
overflow: hidden; //超出的隐藏
text-overflow: ellipsis; 超出部分的显示形式
/* 文本显示形式
ellipsis 省略号
*/
10.背景图片
background-image: url("./tupian/1.jpg"); //图片路径
background-repeat: no-repeat; /* 用来设置背景的重复方式
可选值:
repeat 默认值,背景会沿着x,y方向重复
repeat-x 沿x重复
repeat-y 沿y重复
no-repeat 不重复
*/
/* background-position: top right; */ 偏移量的计算
/* 表示图片要在背景的位置 至少需要两个值
如果只写一个 则默认为center
2.还可以通过偏移量来指定图片的位置
*/
background-clip: content-box;
/* 设置背景的范围,
可选值:
border-box 默认值,背景会出现在边框的下边
padding-box 背景不会出现在边框,只会出现在内容区和内边距
content-box 背景只会出现在内容区
*/
background-origin: border-box;
/*
背景图片的偏移量计算的原点
padding-box 默认值,background-position从内边距开始计算
content-box 从内容区处开始计算也就是内容区的左上角
border-box 背景图片变量从边框处左上角开始计算
*/
background-size: 100% auto;
/*
第一个值为宽度,第二个高度
如果只写第一个,则第二个为auto
cover 图片的比例不变,将元素铺满
contain 图片比例不变,将图片完整显示
*/
background-attachment: fixed;
/*
背景图片是否跟随元素移动
可选值
scroll 默认 会跟随移动
fixed 固定在页面中,不会随元素移动
*/
11.表格的设置
table{
/* border-spacing: 0px; */
/* 指定边框之间的距离,但为0px时,边框之间的距离是两个距离加一块的,视觉效果不好 */
border-collapse: collapse;
/* 属性值: collapse 设置边框的合并 */
};
div{
display: table-cell; //行内元素
/* 将元素设置为单元格 td */
vertical-align: middle;
/* 将元素设置为单元格后,再将此父元素的vertical-align设置为middle,
是让它在垂直方向上居中 */
}
//设置块元素的水平居中
margin: 0 auto;
/* 这是设置它的水平方向的居中 */
12.表格的结构
<table>
<thead>
<tr>
<th>
//表示身体
<tbody>
<tr>
<td>
<td rowspan="2">
//底部
<tfoot>
13.表单结构
<form autocomplete="off">
<!-- autocomplete="off" 关闭自动补全-->
<input type="text" name="username" readonly autofocus>
<!--readonly 将表单设置为只读,数据会提交
disabled 将表单设置为禁用,不会提交-->
<!-- autofocus 自动获取焦点 -->
//radio==>单选框,通常两个radio用同样的name配和使用
//checked==> 默认选中
<input type="radio" name="1" value="2" checked><br>
<select> //下拉框
<option value="xxx"> //下拉框的选项
<!-- 重置按钮 -->
<input type="reset">
14.伪类
a:link{
/* 正常的连接,也指没有点过的连接 */
a:visited{ // 点击后的样式设置
/* 只能改颜色再visited中 */
a:hover{
/* 鼠标放在连接上出现的变化 */
a:active{
/* 点击出现的变化 */
15.超链接
<!-- href的#号属性,直接转到当前页面的顶部位置
id属性:每一个标签都可以添加一个id属性
id属性时元素的唯一表示,一个页面中不能出现重复的id属性
可以跳转到页面的指定位置,只需将href属性设置 #目标元素的id属性
<a href="#buttom">到底部</a>
<a id="buttom" href="#">回到顶部</a>
16.动画==>animation
@keyframes test { //动画的设置名字和来去
from{
margin-left: 0px;
}
to{
margin-left: 700px;
}
}
animation-name: test; // 动画的名字
animation-duration: 2s; //执行时间
animation-iteration-count: infinite;
/* count 动画执行的次数
可选值: 次数
infinite 无限执行
*/
animation-direction: normal; //动画的定位,
/*
normal
默认值,从from到to
reverse 从to到from
alternate 从from到to再从to到from
alternate-reverse 从to向from再从from到to
*/
animation-play-state: paused; //动画刚开始执行的状态
可选值:
running 默认值 动画执行
paused 动画暂停
*/
animation-fill-mode: none; //动画执行完毕后的位置
/*
可选值;
none:默认值 动画执行完毕后元素回到原来位置
forwards 动画执行完毕后元素会停在动画结束的位置
backwards 动画延时等待时,元素就处于开始位置
both 结合了forwards和backwards
也可以用简写属性
*/
17.弹性盒设置 flex
display: flex; //设置弹性盒 ==>父元素(容器的设置)
flex-direction:row; //设置容器中弹性元素的排列方式
可选值:
row 弹性元素水平排列
主轴:自左向右
侧轴:与主轴垂直方向成为侧轴
row-reverse 弹性元素在容器中反向水平排列
column 弹性元素纵向排列(自上向下)
column-reverse 纵向自下而上
*/
flex-wrap: nowrap;//设置弹性元素是否在弹性容器中自动换行
可选值:
nowrap 默认值,元素不会自动换行
wrap 元素沿着辅轴方向换行
wrap-reverse 元素沿着辅轴反方向换行
*/
/* flex-flow: ; flex-wrap 和flex-direction的简写属性
例如 flex-flow: row wrap; 自左向右排列,换行
*/
justify-content: flex-end;
如何分配主轴上的空白空间 以及 主轴元素如何排列
可选值:
flex-start 元素沿着主轴起边排列
flex-end 元素沿着主轴终边排列
center 元素居中排列
space-around 空白平均分布元素两列,中间距离是边上的距离的两倍
space-evenly 空白分配到元素的单侧,这样距离是一样的
space-between 空白均匀分布到元素之间
*/
align-items
元素在辅轴上如何对齐
可选值:
stretch 默认值,将同一行元素的长度设为相同的值
flex-start 元素不会拉伸,沿着辅轴起边对齐
felx-end沿着辅轴终边对齐
center 居中对齐
baseline 基线对齐
*/
align-content: 辅轴上空白的设置
如何分配辅轴上的空白空间(主轴元素如何排列)
可选值:
flex-start 元素沿着辅轴起边排列
flex-end 元素沿着辅轴终边排列
center 元素居中排列
space-around 空白平均分布元素两列,中间距离是边上的距离的两倍
space-evenly 空白分配到元素的单侧,这样距离是一样的
space-between 空白均匀分布到元素之间 */
/* 如果让一个元素在父元素块中居中 可以设置
**/**
justify-content和 align-items都为center就可以达到居中的效果
子元素(弹性元素的设置)
flex-grow 弹性元素的属性 ==>指定弹性元素伸展系数 (一般为1)
当父元素有多余空间时,子元素如何伸展
父元素的剩余空间,会按比例进行分呸
flex-shrink 指定弹性元素的收缩系数
当父元素中的空间不足以容纳所有的子元素时,对子元素进行收缩
为0时 不收缩,父元素不够时会溢出
flex-basis 指定元素在主轴上的基础长度
主轴横向,则 flex-basis指定是宽度
主轴纵向,则 flex-basis指定是长度度
默认值是auto,就是元素本身的高宽度
flex: 1 1 auto;
/* 增长 缩减 基础
//简写属性
initial ===>“flex:0 1 auto”
auto ===>“flex: 1 1 auto”
none ===>“flex:0 0 auto” 弹性元素没有弹性
order: 1;
决定弹性元素的排列顺序 如果弹性元素为3个,那么你设置每个元素的order,就可以设置他们的排列顺序
18.display和visibility(元素的显示状态)和border
dispaly:
inline-block 将元素设置为行内块元素
none 元素隐藏
block 将元素设置为块元素
inline 将元素设置为行内元素
visibility:用来设置元素的显示状态
visible 默认值 正常
hidden 隐藏,但依然占据页面中位置
border:
border-style:
solid 实线
dotted 点状虚线
dashed 虚线
border: 10px red solid;
简写属性:
边框的宽度
边框的颜色
边框的风格必须的三个要素
19.媒体查询
媒体查询
@media 查询规则
all 所有设备
print 打印设备
screen 带屏幕的设备
speech 屏幕阅读器
添加only, 表示只有only的使用主要是为了适应老的浏览器 */
/* @media only screen{
body{}}
width 视口的宽度
height 视口的高度
min-width,视口的最小宽度
max-width 视口的最大宽度
/* 样式切换的分界点,被称为断点, */
一般常用的断点
<768 超小屏幕 max-width=768px
>768 小屏幕 min-width=768px
>992 中型屏幕 min-width=992px
<1200 大屏幕 min-width=1200px
//实例==>在宽度的范围为500-1000px的范围内body的背景颜色为#FF6700
@media only screen and (min-width:500px) and (max-width:1000px){
body{
background-color: #ff6700;
}
}
20.平移和旋转
/* transform: translate(); */ 简写属性
/* transform: translateX(); */
/* transform 可以设置多个 translate 中间用空格隔开,一个元素只会有一个 transform生效 */
平移不会影响别的元素。
translateX() 沿着x轴方向平移
translateY() 沿着y轴方向平移
translateZ() 沿着z方向平移
**/**
-还有一个值是百分比,它是相对于自身来计算的
translateX(-50%)
transform: rotateX();
旋转:
旋转可以使元素沿着 x y z 旋转指定的角度
rotateX(45deg) 沿着x轴旋转45度
rotateY(1turn) 沿着y轴旋转1圈
rotateZ()
transform: rotateY(180deg) translateZ(500px);
/* 先沿着y轴旋转180度,再沿z轴方向平移500像素,哪个在前哪个先动 */
本来是该贴近我们人眼的但因y轴转换了角度,所以,这个远离了我们
/* z轴的平移,调整元素在轴的位置,,就是元素和人眼之间的距离
z轴平移属于立体效果,默认情况下网页不支持透视,看效果还得设置网页的透视。
perspective: 800px; //网页的透视===>元素距离视图的距离,以像素计。
21.定位
relative 相对定位,
position不是static值就是开启定位,开启定位才可以使用top和left等值 */
/* 定位元素和定位位置的上侧距离 :
设置 relative==>相对于自身位置的参照,相对定位会提升元素的层级,并且不会改变元素的性质 */
absolute 绝对定位 开启元素绝对定位后,元素会从文档流中脱离,改变元素的性质 变为块元素
开启后元素会提升一个层级,
**绝对定位是相对于其<span style="color:red;">"包含块"</span>进行定位,
"包含块"就是离当前元素最近的祖先 块 元素
而绝对定位的包含块就是离它最近的开启了"定位"的祖先元素,
如果没有开启定位的祖先元素,则相对于根元素进行定位(html)
fixed,固定定位 也是一种绝对定位,所以大部分特点和绝对定位一样
唯一不同:
固定定位"永远参考"于浏览器的视口进行定位,
固定定位的元素"不会随网页的滚动条滚动"。也就是固定定位
sticky 粘滞定位 与相对定位特点差不多,但不同的是,粘滞定位可以在元素到达某一位置时,将其固定 例:==>position:sticky top:20px; //当元素到达20px的top值位置时,就会固定在top为20px的那个位置
22.over-flow (处理溢出)
overflow 处理溢出
属性值:
visible 默认不变化
hidden 将溢出的内容隐藏
scroll 生成两个滚动条
auto 根据需要生成滚动条
-x 是水平方向生成滚动条 // overflow-x
-y 是垂直方向生成滚动条
*/
23.运动
.box1{
animation: ymm 0.3s steps(4) infinite ;}
.box1:hover{
animation-play-state: paused;
//运动设置
@keyframes ymm {
from{
background-position: 0 ;
/* background-color: rgb(81, 172, 59); */
/* box-shadow: 1px 0px 0px transparent; */
}
to{
background-position: -450px ;
/* background-color: rgb(160, 12, 12); */
/* box-shadow: 10px 5px 15px rgba(0, 0, 0, .7); */
}
}
24.transition
transition-timing-function: cubic-bezier(1,-0.93,0,1.95); */
/* function 默认值为ease,是先快后满的一个效果
linear 匀速运动
ease-in 加速运动
ease-out 开始很快的减速运动
ease-in-out 先加速,后减速运动
cubic-bezier() 来指定时序函数
steps() 分布执行过度效果
第一个值为步数,第二个值为从哪开始过度
end 在时间结束时进行过度
start 在时间开始时进行过度
transition-delay: ;
过度效果的延迟
/* transition: ; //简写属性
同时设置过度相关的所有属性,只有一个要求,
如果写延迟,则两个时间中第一个是持续时间,
第二个是延迟时间。