css基础（个人复习用）
- css以键值对的格式书写
- 书写形式
1.在html标签中添加style="{x:y}"属性
2.在<head>< /head>标签或<body>< /body>中添加<style>< /style>标签
<head>
<meta charset="utf-8">
<title>在html中做css测试练习</title>
<style>
/* 在head标签里面写css代码 */
</style>
</head>
3.在单独的css文件中书写, 在head标签中用link标签引用
<link rel="stylesheet" href="common.css" />
-
css选择器
1.标签选择器：标签 { }
2.类选择器 ：.类名 { }
3.id选择器 ： #id { }
4.并列选择器 ：标签，标签 { }选择器可以写在一起, 通过逗号来隔开
满足其中一个标签都变
5.复合选择器：标签标签 { }两个或多个基础选择器，通过不同的方式组合而成的
只有同时满足
6.后代选择器：标签 标签 { }可以选择作为某元素后代的标签
7.直接后代选择器：标签 > 标签 { }可以选择直接关系后代的
8.相邻兄弟选择器：标签 + 标签 { }
9.属性选择器：标签[属性] { }含有属性名的标签 ，[属性名=属性值]有指定属性名和属性值，[属性名^=属性值]属性值以指定开头，[属性名$=属性值]属性值以指定结尾 -
伪类选择器 ：
标签：# { }
1.#=active 向被激活的元素添加样式
2.#=hover 当鼠标悬浮在元素上方时，向元素添加样式
3.#=link 向未被访问的链接添加样式
4.#=focus 向拥有键盘输入焦点的元素添加样式
5.#=lang 向带有指定lang属性的元素添加样式
6.#visited 向已被访问的链接添加样式
伪元素：标签::#{} -
CSS选择器的优先级
1.先比较选择器的优先级, 选择器优先级越高的会覆盖优先级低的
2.再比较选择器的先后顺序, 后面的会覆盖前面的(在选择器的优先级相等时) -
常用代码
-
1.
display
table 表格
none: 隐藏标签
{
visibility:hidden; 隐藏但保留位置
}
block: 让标签变为块级标签
inline: 让标签变为行内标签
inline-block: 让标签变为行内-块级标签(内联-块级标签)
2,`text-align` 改变位置
3，`padding`外边距
4，`border`边框
5，`margin`内边距
6，`letter-spacing`字母间距
7，`min-width`最小距离
8，`width：100%`页面占有率
9，`text-decoration`取消文字下划线
10.`overflow:#` 可以设置父元素如何处理溢出的子元素
#=visibole 默认值在父元素外部显示
#=hidden 溢出内容会被修剪不会显示
#= scroll 生成滚动条
#=auto 自动生成滚动条
11.box-shadow 设置元素阴影效果
12.border-radius 设置圆角半径
13.line-height 让文字在父元素中垂直居中
像素和百分比
- 数字后加px才有用，表像素
- 百分比是继承自父类的像素的百分比
- rgba（a,b,c,d）a,b,c 表示颜色，d表示不透明度1表示完全不透明，0表示完全透明
- opacity：设置元素透明1表示完全不透明
盒子模型
css将页面中的所有元素设为盒子
每个盒子由：
1.内容区（content）
2.内边距（padding）
3.边框（border）
4.外边距（margin）
内容区（content）
width
height
background-color 背景色
边框（border）
至少设置三个：
- border-width 边框宽度
border-top-width 上边框
border-right -width
border-bottom-width
border-left-width - border-color 边框颜色
- border-style 边框样式
内边距（padding）
内容和边框之间的距离
有四个方向的内边距：padding-top，padding-right，padding-bottom,padding-left
背景颜色会延续到内边框
外边距（margin）
是盒子与盒子之间的距离
不会影响盒子可见区的大小
有四个方向的外边距
相邻外边距会发生重叠现象：
1.兄弟元素间：
两者取最大值
一正一负取和
都是负值取绝对值最大的
2，父子元素：
父子元素相邻外边距，子元素会传递给父元素（上外边距）
行内元素盒模型
不能设置宽和高，垂直方向不影响布局
可以用display改变
轮廓阴影和圆角
outline： 用法和border一样，但不会影响到可见框的大小
box-shadow：； 用来设置阴影，需要设置偏移量
第一个值水平偏移量，正向右，负向左
第二个值垂直偏移量
第三个值 模糊程度
第四个值颜色
border-radius： 用来设置圆角，设置半径，半径可以设置两个值
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
浮动
可以让元素向父元素的左或右侧浮动
通过float属性来设置
特点：
1.设置浮动后，会完全从文档流脱离，所以下面还在文档流的元素会自动上移
2.设置浮动后会向父元素左移右移
3.不会从父元素中移出
4.浮动元素不会盖住其他浮动元素，不会超过前面的浮动元素
5.浮动元素上面是没有浮动的元素，则无法上移
6.不会超过它上边浮动的兄弟元素，最多同高
7.浮动元素不会盖住文字。会自动环绕周围
脱离文档流的特点、
块元素，行元素：
1.不会独占一行
2.宽度和高度会被内容撑开
浮动缺陷
1.高度塌陷
父元素默认被子元素撑开，在子元素浮动后，脱离文本流，无法撑起父元素高度。父元素丢失后，其后元素会上移
解决：
1.设置死父元素高度
2.开启BFC可以让元素变成独立的区域
3.clear清楚浮动元素对当前元素的影响
4.通过尾元素清除
开启BFC的特点
1.不会被浮动元素覆盖
2.子元素和父元素外边距不会重叠
3.开启BFC元素可以包含浮动子元素
怎么开启BFC
常用方法：将元素overflow改为非visible，如：将元素设置为overflow ： hidden，开启BFC模式
clear
left 消除左侧浮动元素对当前的影响
right 消除右侧对当前的影响
both 清楚两侧中影响最大的那侧
尾元素
.box::after{
content:’ ';
display:table;
clear:both;
}
最终
.clearfix::before,
.clearfix::after{
content:‘ ’；
dipaly：table；
clear:both;
}
定位（position）
定位是更高级的布局手段
通过定位可以把元素元素放到任意位置
通过position来设置定位
可选值：
statuc默认值，没有开启定位
相对定位（relative）
绝对定位（obsolute）
固定定位（fixed）
粘滞定位（cticky）
层级
对于开起了定位的元素可以用z-index来制定元素的层级
特点：
1.如果层级一样会优先显示考下元素
2.祖先元素的层级再高也不会盖住子元素
相对定位（ralative）
特点：
1.不设置偏移量不发生任何改变
偏移量：开启定位以后通过偏移量设置位置top，bottom，left，right
2.相对定位，相对于当前文档流元素定位的
3.使层次高一级
绝对定位（obsolute）
特点：
1.不设置偏移量，元素位置不发生改变
2.会从文档流脱离
3.行内会变成块，高度被内容撑开
4.会高一个层级
5.绝对定位是根据包含块定位的
绝对定位的包含块：离他最近开起了定位的祖先元素，如果没有则以根元素
绝对定位（fixed）
特点：
1.也是一种绝对定位，大部分特点一样
2.不同点：唯一参照视口进行定位，不会根据网页的滚动而滚动
粘滞定位（cticky）
特点：
1.和相对定位基本相同
2不同：在到达某个值固定不动，top，bottom，left。right来设置
字体
font 可以用来设置所以属性
font ：（font-weight font-style） 字体大小/行高 字体族
行高如果不写会使用默认值
clolor 用来设置字体颜色
dont-size 字体大小
font-family 字体样式
@font-face 可以直接让用户使用服务器中的字体{
<style>
@font-face {
font-family :"自己定义字体的名字";
sre:url(路径);
}
</style>
}
font-weight
可选值：
normal 默认值不加粗
hold 加粗
100-900 九个级别可选
font-style ： italic 斜体
行高（line-height）
指每行文字占有的实际高度
行高可以直接指定一个大小
也可以设置整数，行高是字体指定的倍数
文本
1。text-align
文本水平对齐
可选值：
left 默认左侧对其
right 右对齐
center 居中
justify 两端对齐
2.verticol-align
设置元素垂直对齐的方式
可选值：
baesline 默认值，基线对齐
top，bottom，moddle 居中对齐
可以用来处理图片缝隙
3.text-decoration
设置文本修饰
可选值：
none
underline 下划线
line-through 删除线
overline 上划线
white-space
normal 默认正常
nowrap 不换行
pre 保留空白
text-indent
{
text-indent:-999px 用来隐藏文字
}
例子
设置省略
width：200px；
white-space:nowrap; 文本不换行
overflow:hidden; 多余剪切
text-overflow:ellipsis; 省略表示
背景
background-color 设置背景颜色
background-image 设置背景图片
background-image：url（路径）
background-repeat设置背景图片重复方式
repeat默认值，会从x，y双方向重复
repeat-x 沿着x方向重复
repeat-y y方向重复
no-repeat 背景图片不重复
background-position设置背景图片的位置
1.通过top，bottom,left,right,center 来设置位置，必须两个,如果只写一个，那第二个值默认center
background-position:center center;
2.通过偏移量，也是两个值
background-clip设置背景范围
border-box 默认值 背景会出现在边框的下边
padding-box 只出现在内容区和内边框
ccontent-box 只出现在内容区
background-origin 设置背景偏移量的原点
padding-box 默认值，从内边距开始计算
content-box 从内容区开始计算
border-box 从边框开始计算
background-size 设置背景图片的大小
第一个表宽度，第二个表高度
如果只写一个，则第二个默认outo
cover图片比例不变将内容填满
contain 比例不变，图片完整显示
background-attachment 背景图片是否跟随元素移动
scroll 默认值，跟随移动
fixed 固定
background 可以设置所以样式，没有顺序
注意：
1.background-size必须写在background-position后面，用/隔开
background-position/background-size
2.background-origin background-clip，origin 要在clip前面
颜色渐变
渐变是颜色，需要通过background-image来实现
线性渐变
background-image：linear-gradient（a，b）由颜色a向颜色b过度从上往下变
background-image：linear-gradient（to right，a，b）从左向右渐变
也可以to bottom ， to left ， xxxdeg表示度数，xxxturn表示圈可以组合如：to top left
颜色可以同时指定多种颜色，默认平均分配
在颜色后跟像素可以手动分配区域
repeating-linear-gradient（） 可以平铺的线性变换，发生重复效果
径向渐变
background-image：radial-gradient(a,b)中心向外放射
默认情况下渐变的形状根据元素改变
正方形–>圆形 长方形–>椭圆
也可以手动指定渐变的大小
background-image：radial-gradient(大小 at 位置，颜色 位置，颜色 位置…)
大小：
（100px 100px），circle 圆形 ellipse 椭圆 closest-side 近边 closenst-corner 近角 farthest-side 远边 farthest-corner 远角
位置
（坐标） top right left bottom
过度效果（transition)
transition：height 0.3s； 当高度发生变化时，用时0.3s
也可以分开设置
transition-property
transition-property：all 过度项
可以指定多个
transition-duration
指定过度时间 单位ms，s 。1s=1000ms
transition-timing-function
过渡时序
：ease 默认值，慢速开始，先加速再减速
：linear 匀速
：ease-in 加速
：ease-out 减速
：cubic-bezier() 曲线网址
：steps（x）分布，分x步，可以设置第二值（end结束时执行，start开始时执行）
transition-delay
延迟
transition
可以写全部，注意：延迟要写在持续时间后
动画
和过度类似
不同：过度是某个属性发生改变才出发，动画可以自动出发
设置动画必须要设置关键帧
关键帧（@keyframes）
@keyframes name{
from{} from 表示动画开始的位置
to{} to表示动画结束的位置、
x%{} 可以设置回弹效果
}
应用
animation-name: text; 运用的关键帧名字
animation-duration: ; 同过度
animation-duration: ; 同过度
animation-delay: ; 同过度
animation-iteration-count: ;动画执行次数，默认1次
infinite 无限
animation-direction: ; 指定动画运行方向
normal 默认值，从from到to
reverse 从to到from
alternate 往返
alternate-reverse 和alternate相反
animation-play-state: ; 执行状态
running 默认值，动画执行
paused 动画暂停
animation-fill-mode: ; 动画填充模式
none 默认值，执行完毕会回到原位置
forwards 执行完毕会停在结束位置
backwards 延迟时，元素会处于开始位置
both 结合forwards ，backwards ；两个特点
也可以用animation全部设置，注意点和过度一样
平移（tranform）
不会影响页面布局
translatex（）沿x平移
translatey（）沿y
translatez（）沿z
平移元素百分比相当于自身计算
z轴平移
属于立体效果（近大远小），如果想要看见效果，需要设置网页视距
html{
perspective:800px; 设置网页视距为800px
}
旋转
transform：rotatex（）
transform：rotatey（）
transform：rotatez（）
绕着x，y，z旋转一定角度xdeg
transform-style：perserve-3d；设置3d转动
缩放
transform：scale（） 双方向缩放
transform：scalex（） x方向
transform：scaley（） y方向
transform：scalez（） z方向，不在3d内无法看出
transform-origin：center； 默认center， 设置缩放的原点
扫一扫
32
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
