CSS基础知识

CSS语法规则

一、基础认知
1.1 CSS初识
CSS写在style标签中，style标签一般写在head标签里面，title标签下面
ctrl+/ CSS注释快捷键
选择器 {css属性}
2.1 CSS引入方式
内嵌式：CSS写在style标签中
提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中
作用：当前页面
外联式：CSS写在一个单独的.css文件中
作用：多个页面
提示：需要通过link标签在网页中引入
行内式：CSS写在标签的style属性中
写法：style=“属性：属性值”
​ 作用：当前标签
​ 提示：基础不推荐使用，之后会配合js使用

<div style="color:red;"></div>

font-size:字号大小后边加px

二、基础选择器
1.2标签选择器
结构：标签名{css属性名：属性值；}
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点：
1.标签选择器选择的是一类标签，而不是单独某一个
2.标签选择器无论嵌套关系又多深，都能找到对应的标签
2.类选择器
结构：.类名{css属性名：属性值；}
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：
1.所有标签上带有class属性，class属性值成为类名（类似于名字）
2.类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3.一个标签可以同时有多个类名，类名之间以空格隔开
4.类名可以重复，一个类选择器可以同时选中多个标签
3.id选择器
结构：#属性值{css属性名：属性值；}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点：
1.所有标签上都有id属性值
2.id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
3.一个标签上只能有一个id属性值
4.一个id选择器只能选中一个标签
4.通配符选择器
结构：*{css属性名：属性值；}
作用：找到页面中所有的标签，设置样式
注意点：
1.开发中使用极少，只会在极特殊情况下才会用到
2.在基础小页面中可能会用于去除标签默认的margin和padding
三、字体和文本样式
1.1字体大小
属性名：font-size
取值：数字+px
注意点：
1.谷歌浏览器默认文字大小是16px
2.单位需要设置，否则无效
1.2字体粗细
属性名：font-weight
取值：
1.关键字：
正常：normal
加粗：bold
2.纯数字：100-900的整百数
正常：400
加粗：700
注意点：
1.不是所有字体都提供了九种粗细，因此部分取值页面中无变化
2.实际开发中以：正常、加粗两种取值使用最多
1.3字体样式（是否倾斜）
属性名：font-style
取值：
1.正常（默认值）：normal
2.倾斜：italic
1.4常见字体系列（了解）
无衬线字体（sans-serif）
1.特点：文字笔画粗细均匀，并且首尾无装饰
2.场景：网页中大多采用无衬线字体
3.常见该系列字体：黑体、Arial
衬线字体（serif）
1.特点：文字笔画粗细不均，并且首尾有笔锋装饰
2.场景：报刊书籍中应用广泛
3.常见该系列字体：宋体、times new roman
等宽字体（monospace）
1.特点：每个字母或文字的宽度相等
2.场景：一般用于程序代码编写，有利于代码的阅读和编写
3.常见该系列字体：consolas、firacode
1.5字体系列
属性名：font-family
常见取值：具体字体1，具体字体2，具体字体3，具体字体4…字体系列
具体字体：黑体，，宋体…
字体系列：serif，monospace等
渲染规则：
1.从左往右按顺序查找，如果电脑中未安装该字体，则显示下一个字体
2.如果都不支持，此时会根据操作系统，显示最后系列的默认字体
注意点：
1.如果字体名称中存在多个单词，推荐使用引号包裹
2.最后一项字体系列不需要引号包裹
3.网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示
1.6样式的层叠问题
问题：如果一个标签设置了相同的样式，此时浏览器怎么渲染
结果：如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面
的会生效
层叠性：后面的覆盖前面的
TIP：：
css层叠样式表
所谓的层叠就是叠加的意思，表示样式可以一层一层的层叠覆盖
1.7字体font相关属性的连写
属性名：font(复合属性)
取值：
font：style weight size family
省略要求：
只能省略前两个，如果省略了相当于设置了默认
注意点：如果需要同时设置单独和连写形式
1.要么把单独的样式写在连写的下面
2.要么把单独的样式写在连写的里面
一个属性冒号后边写多个值的写法叫做复合属性
2.1文本缩进
属性名：text-indent
浏览器默认字号：16px
取值：
数字+px
数字+em(推荐：1em = 当前标签的font-size的大小)(em:一个字的大小)
2.2文本水平对齐方式
属性名：text-align
取值：
属性值：left center right
效果：左对齐 居中对齐 右对齐
注意点：
如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置
2.4水平居中方法总结 text-align:center
text-align:center 能让那些元素水平居中？
1.文本
2.span标签、a标签
3.input标签、img标签
注意点：
如果需要让以上元素水平居中，text-align:center 需要给以上元素的父元素设置
2.3文本修饰
属性名：text-decoration
取值：
属性值：underline line-through overline none
效果：下划线（常用） 删除线（不常用） 上划线（几乎不用） 无装饰线（常用）
注意点：
开发中会使用text-decoration：none;清楚a标签默认的下划线
3.1行高
作用：控制一行的上下行间距
属性名：line-height
取值：
数字+px
倍数（当前标签font-size的倍数）
应用：
1.让单行文本垂直居中可以设置line-height：文字父元素高度
2.网页精准布局时，会设置line-height：1 可以取消上下间距
行高与font连写的注意点：
如果同时设置了行高和font连写，注意覆盖问题
font：style weight size/line-height family
拓展：
标签水平居中方法总结 margin:0 auto
通过margin:0 auto可以实现div、p、h(大盒子)水平居中
注意点：
1.如果需要让div、p、h(大盒子)水平居中，直接给当前元素本身设置即可
2.margin: 0 auto一般针对固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

在工作中，div用来网页布局，一个页面中可能用无数次，原则：如果使用div,尽量使用类名控制样式

一、选择器进阶

1复合选择器

1.1后代选择器：空格
作用：根据html标签的嵌套关系，选择父元素后代中满足条件的元素
选择器语法：选择器1 选择器2{css}
结果：
在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式
注意点：
后代包括：儿子、孙子、重孙子…
后代选择器中，选择器与选择器之间通过空格隔开
1.2子代选择器：>
作用：根据html标签的嵌套关系，选择父元素子代中满足条件的元素
选择器语法：选择器1>选择器2{css}
结果：
在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式
注意点：
子代只包括：儿子
子代选择器中，选择器与选择器之间通过>隔开
2.1并集选择器：，
作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1，选择器2{css}
结果：
找到选择器1和选择器2选中的标签，设置样式
注意点：
并集选择器中每组选择器之间通过，分割
并集选择器中的每组选择器可以是基础选择器或者复合选择器
并集选择器中的每组选择器通常一行写一个，提高代码的可读性
3.1交集选择器：紧挨着
作用：选中页面中同时满足多个选择器的标签
选择器语法：选择器1选择器2{css}
结果：
（既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
注意点：
交集选择器中的选择器之间是紧挨着的，没有东西分隔
交集选择器中如果有标签选择器，标签选择器必须写在最前面
4.1hover伪类选择器
作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器：hover{css}
注意点：
伪类选择器选中的元素的某种状态
任何标签都可以添加伪类，任何一个标签都可以鼠标悬停
5.1emmet语法
作用：通过简写语法，快速生成代码
语法：
类似于刚刚学习的选择器的写法

记忆	示例	效果
标签名	div	<div></div>
类选择器	.red	<div class="red"></div>
id选择器	#one	<div id="one"></div>
交集选择器	p.red#one	<p class="red" id="one"></p>
子代选择器	ul>li	<ul><li></li></ul>
内部文本	ul>li{我是li的内容}	<ul><li>我是li的内容</li></ul>
创建多个	ul>li*3	<ul><li></li><li></li><li></li></ul>

ul有3个li,li文字1，2，3 只有数字是$，其他的是什么就写什么
写法：ul>li{$}*3
使用多行光标编辑：alt+鼠标点击
快速移动光标位置到两端：ctrl + shift + 方向左右键
代码向上 / 下移动：ctrl + shift + 方向上下键

二、背景相关属性

1.1背景颜色
属性名：background-color(简称：bgc)
属性值：
颜色取值：关键字、rgb表示法、rgba表示法、十六进制…
注意点：
背景颜色默认值是透明：rgba(0,0,0,0)、transparent
背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
1.2背景图片
属性名：background-image（简称：bgi）
属性值：background-image:url(‘图片的路径’)；
注意点：
背景图片url中可以省略引号
背景图片默认是在水平和垂直方向平铺的
背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
1.3背景平铺
属性名：background-repeat（简称：bgr）
属性值：

取值	效果
repeat	（默认值）水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向（x轴）平铺
repeat-y	沿着垂直方向（y轴）平铺

1.4背景平铺
属性名：background-position（bgp）
属性值：background-position：水平方向位置 垂直方向位置；
属性值：
1.方位名词（最多只能表示9个位置）
水平方向：left、center、right
垂直方向：top、center、bottom
2.数字+px(坐标)
坐标系：
原点（0 0） 盒子的左上角
x轴 水平向右
y轴 垂直向下
操作：将图片左上角与坐标点重合即可
水平向下和垂直向下是正数
注意点：方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直
1.5背景相关属性的连写方式
属性名：background（bg）
属性值：
单个属性值的合写，取值之间以空格隔开
书写顺序：
推荐：background：color image repeat position
背景图位置如果是英文单词可以颠倒顺序，如果是数字型，则不可以颠倒
省略问题：
可以按照需求省略
特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background：url()
注意点：
如果需要设置单独的样式和连写
要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面
1.6（拓展）img标签和背景图片的区别
需求：需要在网页中展示一张图片的效果？
方法一：直接写上img标签即可
img标签是一个标签，不设置宽高默认会以原尺寸显示
方法二：div标签+背景图片
需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签

三、元素显示模式

1.1块级元素
显示特点：
独占一行（一行只能显示一个）
宽度默认是父级元素的宽度，高度默认由内容撑开
可以设置宽高
代表标签：
div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer…
1.2行内元素
显示特点：
一行可以显示多个
宽高默认由内容撑开
不可以设置宽高
代表标签：
a、span、b、u、i、s、strong、ins、em、del…
1.3行内块元素
显示特点：
一行可以显示多个
可以设置宽高
代表标签：
input、textarea、button、select…
特殊情况：img标签有行内块元素特点，但是谷歌调试工具中显示结果是inline
1.4元素显示模式转换
目的：改变元素默认的显示特点，让元素符合布局要求
语法：

属性	效果	使用频率
display:block	转换成块级元素	较多
display:inline-block	转换成行内块元素	较多
display:line	转换成行内元素	极少

1.5拓展：HTML嵌套规范注意点
块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等…
但是：p标签中不要嵌套div、p、h等块级元素
a标签内部可以嵌套任意元素
但是：a标签不能嵌套a标签
四、CSS特性
1.1继承性
特性：子元素有默认继承父元素样式的特点（子承父业）
可以继承的常见属性（文字控制属性都可以继承）
color
fontstyle、fontweight、fontsize、fontfarmily
textindent、textalign
lineheight
…
注意点：可以通过调试工具判断样式是否可以继承
（拓展）继承失效的特殊情况：
如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
a标签的color会继承失效
h系列标签的fontsize会继承失效
1.2层叠性：
特性：
给同一标签设置不同的样式，此时样式会层叠叠加，会共同作用再标签上
给同一标签设置相同的样式，此时样式会层叠覆盖，最终写在最后的样式会生效
注意点：
当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
1.3优先级：
特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式：
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<！important
注意点：
！important写在属性值的后面，分号的前面！
！important不能提升继承的优先级，只要是继承优先级最低！
实际开发中不建议使用！important
1.4优先级——权重叠加计算
场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
权重叠加计算公式：（每一级之间不存在进位）
复合选择器中：
第一级:行内样式的个数
第二级：id选择器的个数
第三级：标签选择器的个数
比较规则：
1.先比较第一级数字，如果比较出来了，之后的统统不看
2.如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
3. …
4.如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算！）
注意点：！important如果不是继承，则权重最高，天下第一！
如果都是继承，就看继承里边谁高，继承哪个父级，哪个父级高，哪个选择器生效

盒子模型

CSS中每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成
内容的宽度和高度
作用：利用width和height属性默认设置是盒子内容区域的大小
属性：width/height
常见取值：数字+px
边框（border）连写形式
属性名：border
属性值：单个取值的连写，取值之间以空格隔开
如：border:10px solid red;
快捷键：bd+tab
solid：实线 dashed：虚线 dotted：点线
边框（border）单方向设置
场景：只给盒子的某个方向单独设置边框
属性名:border-方位名词
属性值：连写的取值
内边距(padding)
padding属性可以当做复合属性使用，表示单独设置某个方向的内边距
padding最多可以取四个值
四值：上 右 下 左
能够撑大盒子的有：border、padding
盒子模型（自动内减）
操作：给盒子设置属性box-sizing：border-box；即可
优点：浏览器会自动计算多余大小，自动在内容中减去
外边距（）margin
清除默认内外边距
场景：浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开始前需要先清除默认的margin和padding，后续自己设置
比如:body标签默认有margin：8px
比如：p标签默认有上下的margin
比如：ul标签默认由上下的margin和padding-left
解决方法：*{margin：0；padding：0；}
版心：网页的有效内容，版心一般是居中的

外边距折叠现象-合并现象
场景：垂直布局的块级元素，上下的margin会合并
结果：最终两者距离为margin的最大值
解决办法：避免就好
只给其中一个盒子设置margin即可
塌陷现象
场景：互相嵌套的块级元素，子元素得margin-top会作用在父级元素上
结果：导致父元素一起往下移动
解决办法：
给父元素设置border-top或者padding-top（分割父子元素的margin-top）
给父元素设置overflow：hidden
转换成行内块元素
设置浮动
行内元素内外边距的问题
如果想通过margin或padding改变行内标签的位置，无法生效
行内标签的margin-top和bottom不生效
行内标签的padding-top或bottom不生效
解决方法：
加行高line-height

CSS浮动

结构伪类选择器基本用法
目标：能够使用结构伪类选择器在HTML中定位元素
作用与优势：
作用：根据元素在HTML中的结构关系查找元素
优势：减少对于HTML中类的依赖，有利于保持代码整洁
场景：常用于查找某父级选择器中的子元素
选择器:

选择器	说明
E：first-child{}	匹配父元素中第一个子元素，并且是E元素
E：last-child{}	匹配父元素中最后一个子元素，并且是E元素
E：nth-child(n){}	匹配父元素中第n个子元素，并且是E元素
E：nth-last-child(n){}	匹配父元素中倒数第n个子元素，并且是E元素

结构伪类公式
n的注意点：
n为：0、1、2、3、4、5、6、…
通过n可以组成常见公式

功能	公式
偶数	2n、even
奇数	2n+1、2n-1、odd
找到前5个	-n+5
找到从第5个往后	n+5

伪元素
目标：能够使用伪元素在网页中创建内容
伪元素：一般页面中的非主体内容可以使用伪元素
区别：
元素：HTML设置的标签
伪元素：由CSS模拟出的标签效果
种类：

伪元素	作用
::before	在父元素内容的最前添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

注意点：
必须设置centent属性才能生效
伪元素默认是行内元素
伪元素通过css创建标签，装饰栏的不重要的小图
找父级，在这个父级里面创建子级标签

标准流
目标：能够认识标准流的默认排布方式及其特点
标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则：
块级元素：从上往下，垂直布局，独占一行
行内元素或行内块元素：从左往右，水平布局，空间不够自动折行
浮动
目标：能够认识使用浮动的作用，了解浮动的特点
浏览器解析行内块或行内标签的时候，如果标签换行书写会产生一个空格的距离
浮动的作用
早期作用：图文环绕
现在的作用：网页布局（块标签在一行环绕）float属性
浮动的特点：
浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后边左右浮动
浮动的标签是顶对齐的
浮动元素有特殊的显示效果，一行可以显示多个，且可以设置宽高
浮动：在一行排列，宽高生效，浮动后的标签具备行内块特点
注意点：
浮动的元素不能通过text-align：center或者margin：0auto
CSS书写顺序：
1.浮动或者是display
2.盒子模型相关的属性：margin border padding 宽度高度背景色
3.文字样式
清除浮动：
含义：清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
例如：父子级标签，子级浮动，父级没有高度，后面的标准流盒子回受影响，会显示到上面的位置
原因：
子元素浮动后脱标→不占位置
目的：
需要父元素有高度，从而不影响其他网页元素的布局
方法：
1.直接设置父元素高度
特点：
优点：简单粗暴，方便
缺点：有些布局中不能固定父元素高度，如：新闻列表、京东推荐模块
2.额外标签方法
操作：
在父元素内容的最后添加一个块级元素
给添加的块级元素设置clear：both
特点：
缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
3.单伪元素清除法
操作：用伪元素替代了额外标签
1.基本写法
.clearfix::after{
content:‘’;
display:block;
clear:both;
}
2.补充写法
.clearfix::after{
content:‘’;
display:block;
clear:both;
#补充代码，在网页中看不到伪元素
height：0;
visibility:hidden;
}
特点：
优点：项目中使用，直接给标签加类即可清除浮动
4.双伪元素清除法
操作：

.clearfix::before,
			.clearfix::after{
				content:'';
				display:table;
			}
			.clearfix::after{
				clear:both;
			}

特点：
优点：项目中使用，直接给标签加类即可清除浮动
#这里出现.clearfix::before的作用是解决外边距塌陷问题
外边距塌陷：父子标签，都是块级，子级加margin会影响父级的位置
5.给父元素设置overflow：hidden
操作：直接给父元素设置overflow：hidden
特点：方便

引入CSS的代码格式

<link rel="stylesheet" href="css文件的路径">

定位

网页常见布局方式
标准流
块级元素独占一行→垂直布局
行内元素/行内块元素一行显示多个→水平布局
浮动
可以让原本垂直布局的块级元素变成水平布局
定位
可以让元素自由的摆放在网页的任意位置
一般用于盒子之间的层叠情况
针对于盒子与盒子之间的层叠问题，推荐使用定位完成
使用定位的步骤
设置定位方式
属性名：position
常见属性值：

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

​ 设置偏移值
​ 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
​ 选取的原则一般就是就近原则（离哪边近用哪个）

​

方向	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

相对定位
介绍：自恋型定位，相对于自己之前的位置进行移动
代码：position：relative；
特点：
需要配合方位属性实现移动
相对于自己原来位置进行移动
占有原来的位置，没有脱标
仍然具有标签原有的显示模式特点
应用场景：
配合绝对定位组CP（子绝父相）
用于小范围的移动
如果left和right都有，以left为准。如果top和bottom都有，以top为准
绝对定位
介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
代码：positiob：absolute；
特点：
需要配合方位属性实现移动
默认相对于浏览器可视区域进行移动
在页面中不占位置→已经脱标
改变标签的显示模式特点：具体行内块特点（在一行共存，宽高生效）
应用场景：
配合绝对定位组CP（子绝父相）子级绝对定位，父级相对定位
先找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位
有父级，但父级没有定位，以浏览器窗口为参照物进行定位
绝对定位查找父级的方式：就近找定位的父级，如果逐层查找不到这样的父级，就以浏览器窗口为参照进行定位
绝对定位的盒子不能使用左右margin auto居中
解决办法
1.left：50%，整个盒子移动到浏览器中间偏右位置
把盒子向左侧移动：自己宽度的一半
2.位移：自己宽度高度的一半
tranform：translate（-50%，-50%）

底部半透明遮罩效果
定位的元素会脱标（如：绝对路径），脱标后的元素宽高默认由内容撑开
绝对定位的盒子显示模式具备行内块特点：加宽度高度是生效的，如果没有宽度也没有内容，那么盒子的宽度尺寸就是0
固定定位
介绍：死心眼型定位，相对于浏览器进行定位移动
代码：position：fixed；
特点：
需要配合方位属性实现移动
相对于浏览器可视化区域进行移动
在页面中不占位置→已经脱标
改变位置参考浏览器窗口
具备行内块特点

应用场景：
让盒子固定在屏幕中的某个位置

元素的层级关系
不同布局方式元素的层级关系：
标准流<浮动<定位
不同定位之间的层级关系：
相对、绝对、固定默认层级相同
此时html中写在下面的元素层级更高，会覆盖上面的元素
默认情况下，定位的盒子，后来者居上
在定位中让谁在上边显示用z-index：整数；取值越大，显示顺序越靠上，z-index默认值是0
装饰
认识基线
基线：浏览器文字类型元素排版中存在用于对齐的技术（baseline）
垂直对齐方式
属性名：vertical-align
属性值：

属性值	效果
baseline	默认，基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

光标类型
场景：设置鼠标光标在元素上时显示的样式
属性名：cursor
常见属性值：

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动

边框圆角
场景：让盒子四个角变的圆润，增加页面细节，提升用户体验
属性名：border-radius
常见取值：数字+px、百分比
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角
画一个正圆：
盒子必须是正方形
设置边框圆角为盒子宽高的一半→border-radius：50%
胶囊按钮：
盒子要求是长方形
设置→border-radius：盒子高度的一半
溢出部分显示效果
溢出部分：指的是盒子内容部分所超出盒子范围的区域
场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条等
属性名：overflow
常见属性值：

属性值	效果
visible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出，都显示滚动条
auto	根据是否溢出，自动显示或隐藏滚动条

元素本身隐藏
场景：让某元素本身在屏幕中不可见，如：鼠标：hover之后元素隐藏
常见属性：
占位隐藏效果：visibility：hidden
不占位隐藏：display：none
元素整体透明度
场景：让某元素整体（包括内容）一起变透明
属性名：opacity
属性值：0~1之间的数字
1表示完全不透明
0表示完全透明
注意点：
opacity会让元素整体透明，包括里面的内容，如：文字、子元素等
背景图位置：background-position：水平方向位置px 垂直方向位置px
背景图大小
作用：设置背景图大小
语法：background-size：宽度 高度；
取值：

取值	场景
数字+px	简单方便，常用
百分比	相对于当前盒子自身的宽高百分比
contain	包含，将背景图等比例缩放，直到不会超出盒子的最大
cover	覆盖，将背景图等比例缩放，直到刚好填满整个盒子没有空白

盒子阴影
作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
属性名：box-shadow
取值：

参数	作用
h-shadow	必须，水平偏移量，允许负值
v-shadow	必须，垂直偏移量，允许负值
blur	可选，模糊度
spread	可选，阴影颜色
color	可选，阴影颜色
inset	可选，将阴影改为内部阴影

过渡
作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
属性名：transition
常见取值：

参数	取值
过渡的属性	all：所有能过渡的属性都过渡，具体属性名如：width：只有width过渡
过渡的时长	数字+s（秒）

注意点：
1.过渡需要：默认状态和hover状态样式不同，才能有过渡效果
2.transition属性给需要过渡的元素本身加
3.transition属性设置在不同状态中，效果不同的
给默认状态设置，鼠标移入移出都有过渡效果
给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

文字比较多的时候，末尾想成为省略号要加：

text-overflow：ellipsis
	white-space：nowrap
	overflow：hidden

​