CSS语法
常用选择器
元素选择器
根据元素名称来选择 HTML 元素。
p {
text-align: center;
color: red;
}
id选择器 #
使用 HTML 元素的id 属性来选择特定元素
id 唯一且不重复
<p id="para1">少小离家老大回</p>
#para1{
color: red;
}
类选择器 .
选择有特定 class 属性的 HTML 元素
class可以有多个
<p class="para2">乡音无改鬓毛衰</p>
.para2{
color:yellow;
}
还可以指定只有特定的 HTML 元素会受类的影响
p.center {
text-align: center;
color: red;
}
在这个例子中，只有具有 class="center" 的 <p> 元素会居中对齐：
通配选择器 *
通用选择器（*）选择页面上的所有的 HTML 元素。
* {
text-align: center;
color: blue;
}
分组选择器（并集 A,B）
对选择器进行分组，以最大程度地缩减代码。
对选择器进行分组，用逗号来分隔每个选择器
同时设置h1,h2,p的行间距和颜色
h1, h2, p {
text-align: center;
color: red;
}
复合选择器
交集选择器 (交集 AB)
语法：
选择器1选择器2{}- 元素选择器放在最前边
<div class="red">我是div</div>
<p class="red">我是p元素</p>
交集选择器：将class为red的div字体颜色设置为红色
div.red{
color: red;
}
关系选择器
几种关系：
- 父元素
- 直接包含子元素的元素
- 子元素
- 直接被父元素包含的元素
- 祖先元素
- 直接或间接包含后代元素的元素
- 一个元素的父元素也是他的祖先元素
- 祖先元素可能会有很多
- 后代元素
- 直接或间接被祖先元素包含的饿元素
- 子元素也是后代元素
- 兄弟元素
- 拥有相同父元素的元素
父子 （父>子）
选中指定元素下边的子元素
选中属于 <div> 元素子元素的所有 <p> 元素
div > p {
background-color: yellow;
}
后代 （祖先 后代）
选中指定元素下边的后代
选中<div> 元素内的所有 <p> 元素
div p {
background-color: yellow;
}
相邻兄弟 （兄+弟（最近的弟））
选中指定元素下边紧挨的兄弟元素
如果中间有隔着别的元素，则不会被选中
选中紧随 <div> 元素之后的 <p> 元素
div + p {
background-color: yellow;
}
通用兄弟 （兄~弟（所有弟））
选中指定元素下边的所有兄弟
如果上边也有兄弟元素，则不会被选中
选中属于 <div> 元素的同级元素的所有 <p> 元素
div ~ p {
background-color: yellow;
}
属性选择器 CSS[]
根据属性和值选取元素
- 选取带有指定属性的元素
CSS [attribute]
- 选取带有指定属性和值的元素
CSS [attribute="value"]
- 选取指定属性包含指定词的元素
- 值不必是完整单词
CSS [attribute *= "value"]
- 选取指定属性以指定值开头的元素
CSS [attribute ^= "value"]
- 选取指定属性以指定值结尾的元素
CSS [attribute $= "value"]
伪类选择器 :
伪类用于描述元素的特殊状态 例如链接的访问和悬停等
- :first-child第一个子元素
p:first-child {
color: blue;
}
- last_child最后一个子元素
p:last-child {
color: blue;
}
- **nth-child(n)**第n个子元素
- n：全选
- 2n /even：选中偶数个
- 2n+1 / odd:选中奇数个
选中第三个p元素
p:nth-child(3) {
color: blue;
}
注意：以上伪类都是根据所有子元素进行排序
ul>li:firstchild{
color:red
}
<ul>
<span>我是span</span>
<li>第一个</li>
<li>第二个</li>
</ul>
此时span不会变色，第一个li也不会变色
- :first-of-type同类型的第一个子元素
- :last-of-type同类型的最后一个子元素
- **:nth-of-type(n)**同类型的第n个子元素
ul>li:first-of-type{
color:red
}
<ul>
<span>我是span</span>
<li>第一个</li>
<li>第二个</li>
</ul>
此时第一个li会变色
注意：以上伪类都是根据同类元素进行排序
- :not否定伪类，将符合条件的元素从选择器中去除
ul>li:not(li:nth-child(3)){
color: red;
}
<ul>
<span>我是span</span>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
a的伪类
- :link未访问的，正常的
a:link{
color: aqua;
}
- :visited已访问的
- 由于隐私的原因，visited这个伪类只能修改链接的颜色
a:visited{
color: red;
}
注意：1和2只适用于a标签，即a独有的
- :hover鼠标悬停
- hover必须定义在link和visited之后才生效
a:hover{
color: red;
}
- :active鼠标点击
- active必须定义在hover之后才生效
a:active{
color: red;
}
注意:3和4可以用于任何标签
伪元素选择器 ::
特殊的位置 选取元素的一部分并设置其样式 例如元素首字母、首行的样式等。
- ::first-letter 首字母
p::first-letter{
color: red;
font-size: 25px;
}
- ::first-line 第一行
p::first-letter{
background-color: aqua;
}
- ::selection 鼠标选中的内容
::selection{
background-color: bisque;
}
- ::before 元素之前
- content不会被选中，因为是通过css设置的
h1::before {
content: url(smiley.gif);
}
- ::after 元素之后
- content不会被选中
h1::after {
content: url(smiley.gif);
}
样式继承
- 为一个元素设置的样式同时也会应用到他的后代元素 注意：并不是所有的样式都会被继承 例如：背景相关的，布局相关的
选择器的权重
当用不同的选择器选中相同的元素，设置相同样式时，可能会发生样式冲突。应用哪个样式由选择器的优先级决定
选择器的权重（优先级）
- ！important 会获得最高的优先级
- 内联样式 1000
- id选择器 100
- 类和伪类选择器 10
- 元素选择器 1
- 通配选择器 0
- 继承的样式没有优先级
*{
font-size: 50px;
}
div{
font-size: 20px;
}
<div>我是一个div
<span>我是div中的span</span>
</div>
此时span虽然继承了div的样式字——体大小，但继承的样式没有优先级，所以span的字体大小跟随通配选择器
- 比较优先级时，需要将选择器的优先级进行相加，最后优先级越高，则越优先显示（分组选择器是单独计算的，不会想加）
- 选择器的累加不会超过其最大的数量级（即类选择器再高也不会超过id选择器）
- 优先级计算后相等，则优先使用靠下的样式
CSS层叠顺序
当为某个 HTML 元素指定了多个样式时，优先级为：
- 行内样式（在 HTML 元素中）
- 外部和内部样式表（在 head 部分）
- 外部用
<link rel="stylesheet" href="">连接 - 内部用
<style></style> - 内部和外部引用的先后顺序不同，优先级不同，因为网页是自上而下渲染的
- 外部用
- 浏览器默认样式
单位
像素和百分比
1. 像素：
- 屏幕是由一个一个的小像素块构成的
- 不同屏幕的像素大小不同，像素越小屏幕显示的越清晰
- 同样的200px在不同的设备下显示效果不一样
2. 百分比
- 设置属性值相对于父元素属性值的百分比
3. em
- em是相对于元素自身的字体大小来计算的
- 1em = 1fontsize
- em会根据字体大小的改变而改变
4.rem
- rem是相对于**根元素（即html）**的字体大小来计算
颜色
- 使用CSS名字来设置名字（但名字太多不方便记忆）
- RGB值
RGB(R,G,B)- 每种颜色范围 0~255
- rgba
RGB(R,G,B,A)- A表示不透明值
- A的取值范围 0~1
- 1 表示完全不透明 0 表示完全透明
- 16进制的RGB值
- 语法：#rrggbb
- 每种颜色浓度值： 00~ff
- HSL
- H：色相 0-360
- S：饱和度（颜色浓度） 0%~100%
- L：亮度 0%~100% （0是黑色，100是白色）
- HSLa 同理
文档流
- 网页是一个多层的结构，一层摞着一层
- 通过CSS可以为每一层设置样式
- 作为用户只能看到最上面一层
- 在这些层中，最下边的一层称为文档流，文档流是网页的基础
- 元素默认在文档流中排列
- 元素的两个状态：
- 在文档流中
- 脱离文档流
- 元素在文档流中特点：
- 块元素
- 独占一行（无论宽度多宽）
- 默认宽度=父元素的宽度
- 默认高度=被内容撑开
- 行内元素
- 不独占一行，只占自身大小
- 在页面中自左向右水平排列，如果放不下，则换行排列
- 默认高度和宽度都是被内容撑开
- 块元素
盒模型
盒子的布局
- 内容区(content)
- 元素中所有子元素和文本内容都在内容区中排列
- 内容区大小 width,height
- 内边距(padding)
- 边框(border)
- 外边距(margin)
重要：
内容区(width,height)+内边距+边框=盒子大小
外边距决定盒子的位置
内边距padding
内容区和边框之间的距离。
内边距会影响盒子的大小，背景颜色会延伸到内边距
padding:上 右 下 左padding:上 左右 下padding:上下 左右padding:上下左右
padding:10px 10px 10px 10px
同理
padding-top、padding-bottom、padding-left、padding-right
边框border
- border-width 边框宽度
- 可以分别指定四个方向的宽度 例如：border-top-width
border-width:上 右 下 左border-width:上 左右 下border-width:上下 左右border-width:上下左右
- border-color 边框颜色
- 可以分别指定四个方向的颜色，剩下同理上边
- border-style 边框风格
- 可以分别指定四个方向的style，剩下同理上边
- solid实线
- dashed虚线
- dotted点线
- double双边框
- groove定义3D坡口边框
- ridge定义3D脊线边框
- inset定义3Dinset边框
- outset定义3Doutset边框
- none无边框
- 默认值
- hidden隐藏边框
三个属性没有顺序要求
.box1{
border:1px solid red;
同理
border-top、border-bottom、border-left、border-tight
}
- 轮廓 outline 基础用法和border一样
轮廓不会影响可见框的大小，页面布局
outline:10px solid red
轮廓偏移：给边框与轮廓之前添加透明空间
outline-offset:15px
- 圆角 border-radius 用法基本同border
设置圆角的x,y轴半径大小
border-radius:10px / 10px
四个方向的圆角
border-radius:1px 2px 3px
左上：1 右上2： 右下：3 左下：2
border-radius:50% 元素变为圆形
外边距margin
外边距不会影响盒子大小，只会影响盒子位置，即盒子和盒子之间的关系
margin:上 右 下 左margin:上 左右 下margin:上下 左右margin:上下左右
margin:10px 10px 10px 10px
同理
margin-top、margin-bottom、margin-left、margin-right
margin:auto 容器水平居中
注意
- 默认情况下设置左边和上边的外边距会移动元素自身
- 设置 右边和下边则会移动其他元素
- margin的值是负值，则向相反方向移动
- 设置那个边，就想象那个边加宽了
水平方向布局
子元素在其父元素水平方向的位置有以下几个属性共同决定：
- margin-left
- border-left
- padding-left
- width
- padding-right
- border-right
- margin-right
子元素在父元素水平布局的必须满足： margin-left + border-left + padding-left + width + padding_right + border-right + margin_right = 父元素内容的宽度
以上等式必须满足，如果相加结果等式不成立，则等式会自动调整。
垂直方向布局
父元素内容会被子元素撑开。
注意：
- 当父元素设置了固定高度，则子元素超过父元素会溢出
- 溢出后，在父元素设置overflow:hidden，则溢出内容就不会显示
- overflow:scroll 生成滚动条
- overflow:auto：根据需要生成滚动条
- 当父元素没有设置高度，则父元素被子元素撑开
外边距的折叠
相邻垂直方向的外边距会发生重叠
- 兄弟元素
- 外边距等于两者之间的较大者（两者都是正值）
- 如果相邻的外边距一整一负，则取二者的和
- 如果两者都为负，则取绝对值较大者
- 父子元素（无边框）
- 子元素会传递给父元素（上外边距），因为父子共用同一外边
- 解决办法1：给父元素加padding，同时修改盒子内容大小
- 解决办法2：给父元素加边框（这样父子元素的外边距就隔开了），同时修改盒子大小
行内元素的盒模型
- 行内元素不支持设置宽度和高度，内容区大小由内容撑开
- padding：垂直方向的padding不会影响其他元素的页面布局
- border：同上
- margin：同上，并且水平方向相邻外间距不会合并
display
设置元素显示的类型
display:inline 元素设置为行内元素
display:block 元素设置为块元素
display:inline-block 元素设置为行内块元素
特点：
可以设置宽度和高度，且不会独占一行
display:table 元素设置为表格
display:none 元素不在页面中显示，且不占位
visibility:visible 显示元素
visibility:hidden 隐藏元素且占位
例如，将a元素设置为块元素后就可以设置宽高，且独占一行。 
将a元素设置为行内块元素，可以设置宽高，且不会独占一行
盒子的大小box-sizing
默认值：内容盒子，width和height用来设置内容区大小
box-sizing:content-box
边框盒子，width和height用来设置整个盒子的可见框的大小，即内容区+padding+border
box-sizing:border-box
盒子阴影 box-shadow
阴影不会影响可见框大小，页面布局
默认阴影在元素正下方，和元素一样大小
box-shadow:左侧偏移量 下方偏移量 模糊半径 阴影尺寸 阴影颜色 inset/outset
box-shadow:10px 10px 10px rgba(0,0,0,0.5)
偏移量可正可负
浮动
控制元素向左或向右浮动
float:none（默认）
float:left
float:right
特点1：
- 浮动元素脱离文档流。不再占用文档流的位置，所以元素下边的会自动向上移动
- 浮动元素不会超出父元素。浮动元素会向父元素的最左侧或最右侧移动
- 浮动元素不会超过他前边的其他的浮动元素
- 若浮动元素前边是一个没有浮动的块元素，则浮动元素不会上移。
特点2：
- 浮动元素不会盖住文字。文字会自动环绕在浮动元素周围
- 元素从文档流中脱离后，元素的性质会发生变化
- 块元素
- 不再独占一行
- 块元素宽度和高度都被内容撑开
- 行内元素
- 变成块元素，可以设置宽高
- 宽度和高度被内容撑开
- 即脱离文档流，不区分块和行内，均被内容撑开
- 块元素
浮动的问题：
高度塌陷：（父元素未设置高度时）子元素浮动脱离文档流，无法撑开父元素，导致父元素高度丢失
解决办法:
BFC:block formating context 块级格式化环境。
- BFC特点
- 为元素开启BFC，则该元素会变为一个独立的布局区域
- 开启BFC的元素不会被浮动元素覆盖
- 开启BFC的元素子元素和父元素外边距不会重叠
- 开启BFC的元素可以包含浮动的子元素（防止高度塌陷）
- 为高度塌陷的元素开启BFC
- 设置float(不推荐)
- 设置inline-block
- overflow:auto / hidden
清除浮动 clear
清除浮动元素对当前元素产生的影响。
清除浮动以后，网页会自动给该元素添加一个外边距
清除左侧浮动元素的影响
clear:left
清除右侧浮动元素的影响
clear:right
清除两侧中影响最大的浮动
clear:both
使用伪元素 ::after解决高度塌陷
<style>
给父元素box1添加
.box1::after{
让添加的内容把父元素撑开
content: "";
after是行内元素，变为块，独占一行
display: block;
清除浮动元素的影响
clear: both;
}
</style>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
使用 ::before 解决外边距重叠
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box1::before{
content: '';
将display属性设置为table就可以将两个元素的外边距隔开。table既可以解决高度塌陷，也可以解决外边距重叠
display: table;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}
<div class="box1">
<div class="box2"></div>
</div>
clearfix
同时解决高度塌陷和外边距重叠的问题
.clearfix::before,.clearfix::after{
content: '';
display: table;
clear: both;
}
因绝对定位导致的父元素高度塌陷不可以用clearfix解决，clearfix只能解决float造成的塌陷
定位 position
子绝父相
开启定位后，通过定位可以将元素摆放到页面中的任意位置
position:static 默认值
position:relative 相对定位
position:abcolute 绝对定位
position:fixed 固定定位
position:sticky 粘滞定位
相对定位 relative
将元素相对于元素自身的正常位置进行定位
特点
- 参照物是元素在文档流中原来的位置
- 开启相对定位会提升元素的层级，但是没有脱离文档流，原来的占位还保留。元素性质不会发生变化
- 若不设置偏移量（offset），则元素不会发生变化
- 只会影响自己的位置，不会调整别的元素的位置
- 可通过top、right、bottom、left调整偏移量
- 通常toop和bottom left和right 只会使用其中之一
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
相对定位
position: relative;
bottom:50px;
left: 100px;
}
.box3{
width: 100px;
height: 100px;
background-color: #f74abdb9;
}
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
绝对定位 absolute
特点
- 参照物是开启了定位的最近的祖先元素。如果元素没有祖先，则使用文档主体（body），并随页面一起滚动（当网页比较长，滚动时）
- 开启绝对定位，如果不设置偏移量，元素的位置不会发生变化
- 开启绝对定位，元素脱离文档流，不占原来的位置
- 绝对定位会改变元素性质
- 行内变成块，可以设置宽高
- 块宽高被内容撑开，但不会独占一行
- 即块和行内均被内容撑开
- 绝对定位提升元素层级
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
绝对定位
position: absolute;
top: 100px;
left: 100px;
}
.box3{
width: 100px;
height: 100px;
background-color: #f74abdb9;
}
.box4{
width: 200px;
height: 200px;
background-color: #6a33ebb9;
参照物是开启了定位的最近祖先元素
此时，2相对于4定位
position: relative;
}
.box5{
width: 100px;
height: 100px;
background-color: #c0dd19b9;
/* position: relative; */
}
<div class="box1">1</div>
<div class="box4">4
<div class="box5">5
<div class="box2">2</div>
</div>
</div>
<div class="box3">3</div>
布局
开启绝对定位后
水平方向的布局：
left+margin-left + border-left + padding-left + width + padding_right + border-right + margin_right+right = 父元素内容的宽度
- 如果没有auto，则制动调整right的值
- 如果有auto，则自动调整auto的值（mrgin、width、left、right）
- left和right的默认值是auto，所以不知道具体的left和right的值时，泽东调整这两个值
垂直方向的布局：(z只有开启绝对定位后才会有垂直方向布局的约束)
top+margin-top + border-top + padding-top + height + bottom + border-bottom + bottom+bottom = 父元素内容的宽度
- 同理水平布局
水平居中
margin:0 auto
left:0
right:0
垂直居中
margin:auto 0
top:0
bottom:0
固定定位 fixed
固定定位的其他特点和绝对定位一样，不同的是：
特点
- 参照物是浏览器的视口
- 视口：浏览器的可视窗口，固定不动，不会跟随网页滚动而滚动
- 视口：浏览器的可视窗口，固定不动，不会跟随网页滚动而滚动
粘滞定位 sticky
特点
- 参照物是用户滚动的位置
- 开启粘滞定位，元素在到达某个位置时固定在某个位置
- 兼容性不好（不建议使用）。
- 其他特点和相对定位差不多
层级 z-index
对于开启了定位的元素，可以通过设置z-index指定元素的层级
- 参数为整数，越大层级越高，越优先显示
- 如果元素层级一样，则优先显示靠下的元素
- 祖先元素层级再高也不会盖住后代元素（后代元素会继承祖先元素的层级）
字体
-
color 字体颜色
color严格意义上说是前景色
-
font-size 字体大小
-
font-family 字体格式
- 同时指定多个字体，优先使用第一个字体，无法使用则往后推
- 字体名称不止一个单词，要用引号括起来
- font-face：将服务器的字体直接提供给用户使用
font-family:"Times New Roman", Times, serif;
@font-face{
font-family:自己给字体起的名字，例如my-font
src:url(服务器中字体路径)
}
font-family:myfont
- font-style字体样式
- normal 正常
- italic 斜体
- oblique 倾斜（支持较少）
- font-weight字体粗细
- normal 正常
- bold 加粗
- font-varient字体变体
- normal 正常
- small-caps小型大写字母
iconfont 图标字体
- 图片引入图标（不灵活，放大缩小，改变颜色等）
- 将图标直接设置为字体，然后通过font-face引入
https://fontawesome.com/
fontawesome使用：
引入css之后，使用图标字体：
- 引入类名
前边fas是固定必须写，后边fa-bell表示图标的名字
<i class="fas fa-bell" style="font-size:20px;color:red;"></i>
<i class="fas fa-bell-slash"></i>
还有一些是fab开头的
<i class="fab fa-accessible-icon"></i>
- 通过伪元素添加
<style>
li::before{
content里表示图标字体的编码
content: '\f1b0';
font-family表示对应的字体格式
font-family: 'Font Awesome 6 Free';
相应的字体font-weight也要对应css里的描述
font-weight: 900;
color: blue;
margin-right: 10px;
/* fas */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
/* fab */
font-family: 'Font Awesome 6 Brands';
}
</style>
<ul>
<li>锄禾日当午</li>
<li>汗滴禾下土</li>
<li>谁知盘中餐</li>
<li>粒粒皆辛苦</li>
</ul>
- 通过实体引入
&#X固定 f0f3是图标的编号 类名也要写
<i class="fas"></i>
iconfont
行高line-hight
行高表示文字在页面中占有的实际高度
- 整数，表示字体的倍数
- 也可用数字px表示
- 行间距=行高-字体大小
<style>
div{
font-size: 60px;
行高的高度就是div的高度
line-height: 50px;
}
</style>
<div>锄禾日当午，汗滴禾下土</div>
font-size设置的是字体框的大小。行高会在单行字体框的上下平均分配
文本的水平和垂直对齐
text-align 水平对齐
text-align:left 左侧对齐
text-align:center 居中对齐
text-align:justify 两端对齐
vertical-align 垂直对齐
只有当字体大小不一样时，才会涉及到垂直对齐
vertical-align:baseline 基线对齐（默认值）
vertical-align:top 顶部对齐（子元素对齐父元素）
vertical-align: bottom; 底部对齐
vertical-align: middle; 居中对齐
vertical-align: 100; 直接指定
图片（替换元素）默认相当于文字，默认基线对齐，底部会有缝隙，所以修改vertical-align为其他值即可解决底部留白的问题
text-decoration 文本修饰
可以指定样式（实线、虚线等）和颜色
text-decoration: none; 无（默认值）
text-decoration: underline red dashen; 加下划线
text-decoration: overline red; 加上划线
text-decoration: line-through red; 加删除线
white-space 空白区
设置网页如何处理换行
white-space: normal; 正常换行显示（默认）
white-space: nowrap; 不换行
white-space: pre; 保留空白
white-space: pre;保留空白格式
<div class="box2">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores laboriosam, explicabo ex beatae sint velit eos excepturi adipisci quas ullam minima id aliquid earum, placeat saepe. Dicta ab dolore enim.
aa
aaaa
aaaa
</div>
设置溢出省略号
.box2{
宽度必须设置
width: 100px;
设置不换行
white-space: nowrap;
溢出隐藏
overflow: hidden;
文本溢出显示省略号
text-overflow: ellipsis;
}
下拉框设置
弹出层需要设置较高的层级，确保不会被别的元素盖住
背景
background-color 背景颜色
颜色指定方式：有效的颜色名称red、十六进制值、RGB值。RGBA等
background-color: #bfa;
opacity指定元素的不透明度
opacity: 0.3;
opacity指定不透明度，其子元素会继承相同的不透明度
RGBA(255,255,255,0.1) 这种方式子元素不会继承
background-image背景图像
可以同时设置背景颜色和背景图片
- 背景图片 < 元素：背景图片自动将元素充满
- 背景图片 > 元素：背景图片一部分元素无法完全显示
background-image: url("图片路径");
background-repeat 背景重复
默认情况下在水平和垂直方向上都重复图像
body {
background-image: url("gradient_bg.png");
水平方向 重复
background-repeat: repeat-x;
垂直方向 重复
background-repeat: repeat-y;
不重复
background-repeat: no-repeat;
}
background-position 背景图像位置
1. 通过 top、left、right、bottom、center设置位置
2. 通过偏移量指定位置（负值偏多一些）
body {
background-image: url("tree.png");
background-position: center center;
background-position: 100px 100px;
}
background-attachment 背景图像附着
指定背景图片是滚动（随页面滚动）的还是固定（不会随页面的其余部分一起滚动）的
body {
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
不随其他部分滚动
background-attachment: fixed;
随其余部分滚动
background-attachment: scroll;（默认值）
}
background-clip 背景的绘制区域（裁剪）
background-color:yellow;
background-clip:border-box; （默认值）背景裁剪到边框盒
background-clip:padding-box;背景裁剪到内边距
background-clip:content-box;背景裁剪到内容框
background-origin 规定在何位置放置背景图像
也可以直接写偏移量
规定background-position 相对于什么放置图像
background-origin:padding-box;（默认值）相对于内边距框定位
background-origin:content-box;相对于内容框定位
background-origin:boeder-box;相对边框定位
background-size 背景图像尺寸
- 如果只写一个值，另一个默认auto
- 可以用百分比设置图像
- cover：图片比例不变，完全覆盖背景区域，但可能不能完整显示
- contain：图片比例不变且完整显示以适应内容区域
background:url(img_flwr.gif);
background-size:80px 60px;
渐变
- 渐变是图片，需要通过background-image来设置
- 渐变可以指定多个颜色，默认平均分配
- 也可以手动指定颜色渐变的范围
线性渐变：沿着一条直线发生变化。
可以在开始指定方向 to right/to top left/0°/1turn(1圈)
background-image: linear-gradient(to right,red,yellow);
表示红色从多少开始渐变
background-image: linear-gradient(to right,red 10px,yellow 10px);
重复线性渐变
background-image: repeating-linear-gradient();
径向渐变（中心点向四周）
指定大小
background-image: radial-gradient(50px 50px,red,yellow);
指定位置
background-image: radial-gradient(50px 50px at left top,red,yellow);
radial-gradient:大小 at 位置，颜色 位置，...
大小：
circle 圆形
ellipse 椭圆
closest-side 近边
closest-corner 近角
farthest-side 远边
farthest-corner 远角
位置：
top right bottom left center
表格样式
- table是块级元素，会独占一行，但是宽度并不是100%，而是被内容撑开，默认margin。
- 如果table中没有使用tbody，则会自动创建tbody,所以tr是tbody的子元素
- 默认td中的元素垂直居中 可以使用vertical-align修改
border-spacing边框间距
border-collapse边框合并
此时bborder-spacing没用
table{
边框间距
border-spacing: 0px;
边框合并
border-collapse: collapse;
隔行变色
tr:nth-child(2n){
background-color: #bfa;
}
}
transition 过渡
隐藏元素，可以把高度变成0，然后隐藏溢出内容 即,height=0,overflow:hidden
height:0;
overflow:hidden;
transition:height 3s
高度在3秒以内发生变化
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
