网页实际上 是一个多层结构，通过css可为网页的每一层分别设置样式，最终能看到的只是最上面一层
修改元素样式
方法1，在标签内通过设置style属性改变元素样式（开发时最好不要用）
方法2，将样式编写到head中的style标签里，然后通过css的选择器选中元素并为其设置样式（内部样式表）
方法3，将样式编写到文件夹内外部的css文件中，通过link标签引入（外部样式表）
<p style="color: red; font-size: 20px">你好</p>
<head>
<style>
p{
color:green;
font-size:30px;
}
</style>
</head>
<link rel="stylesheet" href="./style.css">
css基本语法
选择器+声明块
选择器：通过选择器可选中页面中的指定元素，比如上个例子中的 p 的作用是选中页面中所有的<p>元素
声明块：通过声明块指定要为元素设置的样式，由一个一个的声明组成，是明值对结构，名和值之间用:分开，用;结尾
选择器
常用选择器
元素选择器：
作用：根据标签名选中指定元素
语法：标签名{ }
例子：p{ }，h1{ }，div{ }
id选择器：
作用：根据元素的id选中一个元素
语法：#id{ }
例子：#box{ }，#red{ }
class选择器：
作用：根据元素的class属性选中指定元素
语法：.class{ }
通配选择器：
作用：选择页面所有元素
语法：*{ }
复合选择器
交集选择器：
作用：选中同时符合多个条件的元素
语法：选择器1选择器2…选择器n{ }
注意：若有元素选择器，必须用元素选择器开头
并集选择器：
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，…选择器n{ }
关系选择器
子元素选择器：
作用：选择指定父元素的指定子元素
语法：父元素 > 子元素
例子：div > span{color:orange;}
后代元素选择器：
作用：选中指定元素内指定的后代元素
语法：祖先 后代
例子：div span{color:skyblue;}
选择下一个兄弟：
语法：上一个 + 下一个
例子：p + span{color:green;}
选择所有兄弟：
语法：兄 ~ 弟
属性选择器
语法：
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性值的属性的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择含有指定属性值的元素
例子：p[title=abc]{color:orange;}
文档流
块元素：
块元素会在页面中独占一行
默认宽度是父元素的全部
默认高度是被内容撑开
行内元素：
行内元素不会独占页面一行，只占自身大小
行内元素在页面中左向右水平排列
如果一行之中无法容纳则元素会换到第二行继续从左向右排列
行内元素的默认宽度和高度都是被内容撑开
盒子模型
CSS将页面中的所有元素都设置为了一个矩形的盒子
将元素设置为矩形盒子后，对页面布局就变成了将不同的盒子摆放到不同的位置
每一个盒子都有以下几个部分组成：
内容区（content）
内边距（padding）
边框（border）
外边距（margin）
边框
边框宽度 border-width
border-width:10px;
上 border-top-width
右 border-right-width
下 border-buttom-width
左 border-left-width
边框颜色 border-color
同样可以指定四个边的边框
规则和border-width一样
边框样式 border-style
同样可以指定四个边的边框
规则和border-width一样
也可以单独border-top, border-right, border-bottom, border-left设置样式
内边距
内容和边框之间的距离是内边距
padding-top
padding-right
padding-bottom
padding-left
内边距的设置会影响盒子的大小，背景颜色会延伸到内边距上
外边距
外边距不会影响盒子可见框大小
但是外边距会影响盒子的位置
margin-top
设置一个正值，盒子向下移动
margin-right
默认情况下设置它不会产生任何效果
margin-bottom
设置一个正值，其下边元素会向下移动
margin-left
设置一个正值，元素会向右移动
margin也可以设置负值，元素会往相反方向移动
可以设置四个方向的外边距，用法和padding一样
垂直方向的布局
子元素是在父元素的内容区中排列的
如果子元素的大小超过了父元素，子元素会从父元素中溢出
使用overflow属性来设置父元素如何处理溢出的子元素
可选值：
visible 默认值，子元素会从父元素中溢出，在父元素外部显示 hidden 溢出内容将会被裁剪不被显示 scroll 生成两个滚动条，通过滚动条来查看完整内容 auto 根据需要生成滚动条
垂直外边距的重叠
相邻的垂直方向外边距会发生重叠现象
兄弟元素：
兄弟元素间的相邻垂直外边距会取两者之间绝对值较大的值
如果相邻的外边距一正一负，则取两者的和
父子元素：
父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
行内元素的盒模型
行内元素不支持设置width和height 行内元素可以设置padding,border,margin，垂直方向的这些不会影响布局
display：用来设置元素显示的类型 可选值：
inline：将元素设置为行内元素
block：将元素设置为块元素
table：将元素设置为一个表格
inline-block：将元素设置为行内块元素
行内块，既可以设置宽和高度也不会独占一行
none：元素不在页面中显示
visibility：用来设置元素的显示状态 可选值：
visible：默认值，元素在页面中正常显示
hidden：元素在页面中隐藏，不显示，但是依然占据页面的位置
盒子的大小
默认情况下，盒子可见框的大小由内容区，内边距和边框共同决定
box-sizing 用来设置盒子尺寸的计算方式
可选值：
content-box：默认值，宽度和高度用来设置内容区的大小
border-box：宽度和高度用来设置整个盒子可见框的大小
width 和 height 指的是内容区和内边距和边框的总大小
轮廓阴影和圆角
box-shadow用来设置元素的阴影效果，阴影不会影响页面布局
第一个值：水平偏移量，正值向右，负值向左
第二个值：垂直偏移量：正值向下，负值向上
第三个值：阴影的模糊半径
第四个值：阴影的颜色
box-shadow: 0px 0px 50px rgba(0,0,0,.3）
border-radius用来设置圆角
border-top-left-radius
border-top right-radius
border-buttom-left-radius
border-buttom-right-radius
border-top-left-radius:50px 100px; /*椭圆*/
border-radius:20px/40px;
浮动
通过浮动可以使一个元素向其父元素的左侧或右侧移动。
浮动目前来讲它的主要作用是让页面中的元素水平排列。
通过浮动可以制作一些水平方向的布局。
使用 float 属性来设置元素的浮动
可选值：
none 默认值，元素不浮动 left 元素向左浮动 right 元素向右浮动 浮动的特点：
1，浮动元素会完全脱离文档流，不再占据文档中文档流中的位置
2，设置浮动后元素会向父元素的左侧或右侧移动
3，浮动元素默认不会从父元素中移出
4，浮动元素向左或向右移动时，不会超过它前面的其他浮动元素
5，如果浮动元素上面是一个没有浮动的块元素，则无法上移
6，浮动元素不会超过它上面的浮动的兄弟元素，最多和它一样高
浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围
我们可以利用浮动来设置文字环绕图片的效果
元素设置浮动以后，将会从文档流中脱离
脱离文档流的特点：
块元素：
1，块元素不会在页面独占一行
2，脱离文档流以后，块元素的宽度和高度默认都被内容撑开
行内元素：
行内元素脱离文档流以后会变成块元素，特点和块元素一样
脱离文档流之后不需要再区分块和行内了
过渡
过渡可以指定一个属性发生变化时的切换方式
四个属性：
transition-property：
指定要执行过渡的属性，多个属性间用逗号隔开。若所有属性都需要过渡可以写all。
注意过渡时必须是一个有效数值向另一个有效数值过渡。
transition-duration：
指定过渡效果的持续时间。时间单位有s和ms。多个属性不同的过渡时间用逗号隔开
transition-timing-function：
过渡的时序函数，指定过渡的执行方式。可选值：
ease：先加速再减速
linear：匀速运动
ease-in：加速
ease-out：减速运动
cubic-bezier()：指定时序函数
steps()：分步执行过渡效果，可以设置第二个参数（end:在时间结束时进行过渡、start:在时间开始时进行过渡）
transition-delay：
过渡效果的延迟，也就是等待相应时间后再执行过渡
.box{
transation-property:height,width;
transition-duration:100ms,2s;
transition-timing-function:steps(2,start);
transition-delay:2s;
}
.box1:hover{
background-position: -379px 0;
}
动画
设置动画效果，必须要设置关键帧，关键帧设置了动画的每一个步骤。四个属性与过渡类似，前缀改成animation即可此处不再赘述。
| 属性 | 说明 |
|---|---|
| animation-name | 要对当前元素生效的关键帧的名字 |
| animation-iteration-count | 动画执行的次数（infinity无限执行） |
| animation-direction | 指定动画运行的方向（normal：从from到to运行、reverse：从to到from运行、alternate：从from到to再到from、altermate-reverse ：从to到from再到to） |
| animation-play-state | 设置动画执行状态（running：动画执行、pause：动画暂停） |
| animation-fill-mode | 动画填充模式（null：动画执行完毕元素回到原来的位置、forwards：动画执行完毕后元素停留在结束位置、backwards：动画延时等待时，元素就会处于开始位置、both结合了forwards和backwards） |
@keyframes identifier {
/*动画的开始位置 也可以使用0%表示*/
from{
background-position: 0 0;
}
/*动画的结束位置 也可以使用100%表示*/
to{
background-position: -500px 0;
}
}
.box1{
height: 181px;
width:125px;
background-image: url('./素材/character.png');
animation-name: identifier;
animation-duration: 800ms;
animation-timing-function: steps(4,end);
animation-iteration-count: infinite;
}
317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
