css基础知识
CSS3 属性整理
border属性
border-radius 圆角
box-shadow: X轴偏移值 Y轴偏移值 模糊距离 阴影的尺寸 阴影的颜色 外部\内部阴影(inset outset)
box-sizing 改变盒模型
- 属性值为
content-box时，宽高的值为content的宽高； - 属性值为
border-box时，宽高的值为border + padding + content也就是整个盒模型的宽高；
linear-gradient 背景的颜色渐变（IE10）
background: -webkit-linear-gradient(red, yellow); 从上到下
background: -webkit-linear-gradient(left, green , yellow); 从左到右
background: -webkit-linear-gradient(top left, blue , yellow); 左上到右下
background: -webkit-linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233));
角度渐变 0deg 左为正确方向 正值 逆时针
background: -webkit-linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet); 多渐变
径向渐变
颜色结点均匀分布
background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 - 6.0 */
对于颜色发辐射界限，我们也可以进行设置
background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%);
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。 默认值是 ellipse
background: -webkit-radial-gradient(circle, red, yellow, green);
重复渐变
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
text-shadow 文字阴影
text-shadow: x轴偏移值 y轴偏移值 模糊距离 颜色;
nvue控制文字只显示一行/超出显示省略号
lines: 1;
text-overflow: ellipsis;
如何让单行文本以及多行文本溢出显示省略号(…)
网页源码：https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc
1）单行文本溢出显示省略号
溢出隐藏：overflow:hidden;
显示省略号：text-overflow:ellipsis;
不换行：white-space:nowrap;
2）多行文本溢出显示省略号
核心css语句：
1、-webkit-line-clamp:2; （用来限制在一个块元素显示的文本的行数,2表示最多显示2行。 为了实现该效果，它需要组合其他的WebKit属性）
2、display: -webkit-box; （和1结合使用，将对象作为弹性伸缩盒子模型显示 ）
3、-webkit-box-orient:vertical;（ 和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 。）
4、overflow:hidden; （顾名思义超出限定的宽度就隐藏内容）
5、text-overflow: ellipsis;（规定当文本溢出时显示省略符号来代表被修剪的文本）
-webkit-line-clamp:2; display: -webkit-box; -webkit-box-orient:vertical; overflow:hidden;
text-overflow: ellipsis;
transition 过度动画 补间动画
transition: 需要过度的属性 多长时间过度完 运动曲线 延迟几秒播放;
也可以拆开来写这几个属性
transition-property: 过度的属性;
transition-duration: 过度的时间;
transition-timing-function: 运动曲线;
linear 匀速 ease 先慢后快慢结束 ease-in 慢速开始 ease-out 慢速结束 ease-in-out 慢速开始和结束
transition-delay: 延迟秒数;
2D 属性 transform
transform: rotate(正数顺时针, 负数逆时针) 2D旋转 角度
transform: scale(X轴放大倍数, y轴放大倍数) 2D放大
transform: translate(x轴位移, y轴位移) 2D平移
transform: skew(x轴角度, y轴角度) 2D斜切
3D 属性 transfrom
三维空间中呈现效果
transform-style: preserve-3d; 默认值为 flat
transform: rotateX(deg); 上下旋转
transform: rotateY(deg); 左右旋转
transform: rotateZ(deg); 跟2D旋转一样
transform: translateZ(px); 正值向屏幕 负值距离屏幕更远
transform: translateX() translateY(); 跟2D一样没有变化
transform-origin: x, y, z; 值可以用 left bottom right top 或者相对值
元素背面是否可见 不可见 可见
backface-visibility: hidden visible;
CSS3 动画（animation）
@keyframes 动画名 {
0% {
}
100% {
}
}
div {
animation: 动画名 执行时间s 运动曲线 延迟 播放次数 infinite 是否往返 alternate
曲线： ease-in-out ease-in ease-out linear
}
css弹性盒子
https://www.runoob.com/w3cnote/flex-grammar.html
容器默认存在两根轴：水平的主轴Y（main axis）和垂直的交叉轴X（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gOyjJaMB-1596644152379)(C:\Users\Administrator\Desktop\css笔记\图片\3791e575c48b3698be6a94ae1dbff79d.png)]
display: flex;
flex-direction: 决定主轴的方向（即项目的排列方向）
row（默认值。灵活的项目将水平显示，正如一个行一样。）
row-reverse（与 row 相同，但是以相反的顺序。）
column（灵活的项目将垂直显示，正如一个列一样。）
column-reverse（与 column 相同，但是以相反的顺序。）; 排布方向
default（默认） row
flex-wrap: nowrap wrap; default nowrap
（1）nowrap（默认）：不换行。
（2）wrap：换行，第一行在上方。
（3）wrap-reverse：换行，第一行在下方。
flex-flow: flex-direction flex-wrap; 复合属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
y轴 主轴排布方式
justify-content 设置或检索弹性盒子元素在主轴方向上的对齐方式:
flex-start center flex-end space-between
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中 水平方向居中对齐
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
x轴 交叉轴排布方式
align-items 属性定义项目在交叉轴上如何对齐。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。垂直方向居中对齐
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
flex-start flex-end center baseline stretch;
align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
项目上的属性
order 项目的排列顺序: number; 项目的优先级 值越小 靠前
flex-grow 项目的放大比例: number; 项目的等比例分布
flex-shrink 项目的缩小比例: default 1; 项目是否在空间不足的时候缩放
flex-basis: 在分配多余空间之前，项目占据的主轴空间 ; 可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
flex: flex-grow flex-shrink flex-basis;
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self:允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto ; 项目的交叉轴摆放
https://www.php.cn/css-tutorial-410902.html
一、css word-spacing属性设置字间距（单词的间距）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QYToXQd9-1596644152382)(C:\Users\Administrator\Desktop\css笔记\图片\css word-spacing.PNG)]
二、css letter-spacing属性设置字间距
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pkTygcbJ-1596644152385)(C:\Users\Administrator\Desktop\css笔记\图片\css letter-spacing.PNG)]
如何让单行文本以及多行文本溢出显示省略号(…)
网页源码：https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc
CSS字体样式属性
font-size:字号大小
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mh31YYVD-1596644152389)(C:\Users\Administrator\Desktop\css笔记\图片\字体大小示意图.png)]
font-family:属性用于设置字体
p{ font-family:“微软雅黑”;}
font-weight:属性用于定义字体的粗细，
其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。
字体加粗除了用 b 和 strong 标签之外,css 数字 400 等价于 normal，而 700 等价于 bold。
font-style:属性用于定义字体风格
normal：默认值; italic:斜体; oblique:倾斜;
字体倾斜用 i 和 em 标签
font属性用于对字体样式进行综合设置
css 选择器{font: font-style font-weight font-size/line-height font-family;}
CSS外观属性
color: darksalmon;
/* 字体颜色 */
font-size: 50px;
/* 字体大小 */
font-family: "宋体";
/* 字体样式 */
font-style: italic;
/* 字体倾斜 */
font-weight: bolder;
/* 字体粗细 */
text-align: center;
/* 字体对齐方式 */
text-decoration: underline;
/* 字体下划线 */
text-indent: 5%;
/* 首行缩进 */
letter-spacing: 5px;
/* 设置字间距 */
line-height: 60px;
/* 设置行高 */
text-shadow: 5px 5px 15px blue;
/* 设置文本阴影：水平方向偏移量，垂直方向偏移量，阴影面积，阴影颜色 */
color：文本颜色；
line-height:行间距；行与行之间的距离，即字符的垂直间距；行距比字号大7.8像素左右。
text-align:文本内容的对齐方式；
left：左对齐（默认值）
right：右对齐
center：居中对齐
text-indent：文本首行缩进；
建议使用em作为设置单位。1em 就是一个字的宽度
text-decoration： 文本的装饰
None | 默认。定义标准的文本。
underline | 定义文本下的一条线。下划线 也是我们链接自带的
Overline | 定义文本上的一条线。
line-through | 定义穿过文本下的一条线。
css复合选择器
交集选择器：第一个为标签选择器，第二个为class选择器，
两个选择器之间不能有空格，如h3.special。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hatqoz4x-1596644152392)(C:\Users\Administrator\Desktop\css笔记\图片\交集.png)]
并集选择器： 和 的意思，所有选择器都会执行后面样式。
\逗号\连接而成
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LxjwqZv4-1596644152395)(C:\Users\Administrator\Desktop\css笔记\图片\并集.png)]
后代选择器（包含选择器）
外层标签写在前面，内层标签写在后面，中间用空格分隔
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U5JtRViA-1596644152396)(C:\Users\Administrator\Desktop\css笔记\图片\后代.png)]
子元素选择器
父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sp43fOef-1596644152398)(C:\Users\Administrator\Desktop\css笔记\图片\子集.png)]
· :hover /* 鼠标移动到链接上 */
a:hover { / :hover 是链接伪类选择器 鼠标经过 / color: red; / 鼠标经过的时候，由原来的 灰色 变成了红色 */ }
*标签显示模式（display）*
HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。
- 块级元素（block-level)
独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
块元素有
~
、
、
- 、
- 、
- 等
特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
- 行内元素（内联元素）（inline-level)
不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
有、、、、、、、、等、
特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。（a特殊）
注意：
1》 只有 文字才 能组成段落 因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
2》 链接里面不能再放链接。
- 行内块元素（inline-block）
特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。 ```
- 标签显示模式转换 display
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
CSS 三大特性
CSS层叠性
层叠性是指多种CSS样式的叠加。
一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉,一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。
CSS继承性
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
子承父业。
CSS优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
CSS定义了一个!important命令，该命令被赋予最大的优先级。
- CSS特殊性（Specificity）
specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
继承或者* 的贡献值 | 0,0,0,0 |
每个元素（标签）贡献值为 | 0,0,0,1 |
每个类，伪类贡献值为 | 0,0,1,0 |
每个ID贡献值为 | 0,1,0,0 |
每个行内样式贡献值 | 1,0,0,0 |
每个!important贡献值 | ∞ 无穷大 |
权重是可以叠加的,数位之间没有进制
例子：
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
nav p -----> 0,1,0,1
总结优先级：
\1. 使用了 !important声明的规则。
\2. 内嵌在 HTML 元素的 style属性里面的声明。
\3. 使用了 ID 选择器的规则。
\4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
\5. 使用了元素选择器的规则。
\6. 只包含一个通用选择器的规则。
\7. 同一类选择器则遵循就近原则。
总结：权重是优先级的算法，层叠是优先级的表现
背景(background)
| background-color | 背景颜色
| background-image | 背景图片地址
| background-repeat | 是否平铺
| background-position | 背景位置
| background-attachment | 背景固定还是滚动 (scroll : 背景图像是随对象内容滚动 fixed : 背景图像固定)
| 背景的合写（复合属性）
| background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background-image 添加背景图
none : 无背景图（默认的）
url : 使用绝对或相对地址指定背景图像
通过background-image可以为一个元素添加多张图片
background-images: url(第一张图地址), url(第二张图地址);
background-size 调整背景图大小
background-size: X轴尺寸 Y轴尺寸;
background-origin 规定背景图片的定位区域
background-origin: content-box / padding-box / border-box ;
下图中，绿色的是边框，黄色的是padding+content区域。
background-clip 规定背景的绘制区域
background-clip: content-box / padding-box / border-box;
背景平铺（repeat）
background-repeat : repeat | no-repeat | repeat-x | repeat-y
repeat-x : 背景图像在横向上平铺
默认把图片在水平和垂直方向平铺以铺满整个元素
背景位置(position)
background-position : length || length
background-position : position || position
参数：
length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位 position : top | center | bottom | left | center | right
盒子模型
元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IhAGQ7bJ-1596644152400)(C:\Users\Administrator\Desktop\css笔记\图片\盒子模型.png)]
盒子边框（border）
| 边框综合设置 | border:四边宽度 四边样式 四边颜色; |
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
-
表格的细线边框(合并表格边框)
table{
border-collapse:collapse;
}
collapse 单词是合并的意思
-
圆角边框(CSS3) radius 半径（距离）
border-radius: 左上角 右上角 右下角 左下角;
内边距（padding）
| 1个值 | padding：上下左右边距
| 2个值 | padding: 上下边距 左右边距
| 3个值 | padding：上边距 左右边距 下边距
| 4个值 | padding:上内边距 右内边距 下内边距 左内边距
外边距（margin）
margin:上外边距 右外边距 下外边距 左外边
外边距实现盒子居中必须是块级元素，盒子必须指定了宽度。然后就给左右的外边距都设置为auto
content宽度和高度
宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。
盒子阴影
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MTGGEqbA-1596644152401)(C:\Users\Administrator\Desktop\css笔记\图片\盒子阴影.png)]
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); 前两个属性是必须写的。其余的可以省略。
浮动(float)
~~~ 选择器{float:属性值;} ~~~
| 属性值 | 描述 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 元素不浮动（默认值） |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xfctlcnY-1596644152403)(C:\Users\Administrator\Desktop\css笔记\图片\正常盒子流.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vd8ABBVC-1596644152404)(C:\Users\Administrator\Desktop\css笔记\图片\浮动之后的盒子.png)]
清除浮动的方法
/*1 利用父级给定子级的高度*/
/*2 在浮动元素的最后添加空的块级元素设置属性clear:both*/
/*3 父级 overflow:hidden */
/*4 利用伪元素 .clearfix:after{content:"";display:block;clear:both;}*/
选择器{clear:属性值;}
| 属性值 | 描述 |
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
使用after伪元素清除浮动
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
定位(position)
元素的定位属性主要包括定位模式和边偏移两部分。
1、边偏移
| 边偏移属性 | 描述 |
|---|---|
| top | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
2、定位模式(定位的分类)
position属性的常用值
| 值 | 描述 |
|---|---|
| static | 自动定位（默认定位方式） |
| relative | 相对定位，相对于其原文档流的位置进行定位 |
| absolute | 绝对定位，相对于其上一个已经定位的父元素进行定位 |
| fixed | 固定定位，相对于浏览器窗口进行定位 |
-
静态定位(static)
静态定位是所有元素的默认定位方式，静态定位唯一的用处： 就是 取消定位。 position: static;
-
相对定位relative(自恋型)
相对定位是将元素相对于它在标准流中的位置进行定位，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。
注意：
\1. 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
\2. 其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。
（相对定位不脱标）
-
绝对定位absolute (拼爹型)
注： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。
*父级没有定位*
若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。
*父级有定位*
绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
子级是绝对定位的话， 父级要用相对定位。
*绝对定位的盒子水平/垂直居中*
\1. 首先left 50% 父盒子的一半大小
\2. 然后走自己外边距负的一半值就可以了 margin-left。
*固定定位fixed(认死理型)*
以浏览器窗口作为参照物来定义网页元素
固定定位有两点：
\1. 固定定位的元素跟父亲没有任何关系，只认浏览器。
\2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。
叠放次序（z-index）
当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。
比如： z-index: 2; font-weight: 700
注意：
\1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
\2. 如果取值相同，则根据书写顺序，后来居上。
\3. 后面数字一定不能加单位。
\4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
*四种定位总结*
| 定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 |
|---|---|---|---|
| 静态static | 不脱标，正常模式 | 不可以 | 正常模式 |
| 相对定位relative | 脱标，占有位置 | 可以 | 相对自身位置移动（自恋型） |
| 绝对定位absolute | 完全脱标，不占有位置 | 可以 | 相对于定位父级移动位置（拼爹型） |
| 固定定位fixed | 完全脱标，不占有位置 | 可以 | 相对于浏览器移动位置（认死理型） |
*定位模式转换*
元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为 行内块模式， 直接给高度和宽度就可以了。
元素的显示与隐藏
- display 显示
display 设置或检索对象是否及如何显示。
display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。
特点： 隐藏之后，不再保留位置。
-
visibility 可见性
设置或检索是否显示对象。
visible : 对象可视
hidden : 对象隐藏
特点： 隐藏之后，继续保留原有位置。（停职留薪） -
overflow 溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible : 不剪切内容也不添加滚动条。
auto : 超出自动显示滚动条，不超出不显示滚动条
hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll : 不管超出内容否，总是显示滚动条 -
光标，鼠标样式cursor
html cursor : default 小白 | pointer 小手 | move 移动 | text 文本
- 轮廓 outline
css outline : outline-color ||outline-style || outline-width
去除掉元素的轮廓
html
- 防止拖拽文本域resize
html
- vertical-align 垂直对齐
vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， *通常用来控制图片/表单与文字的对齐*。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RomuER1a-1596644152405)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200223122959358.png)]
- 去除图片底侧空白缝隙
1 给img vertical-align:middle | top等等。 让图片不要和基线对齐。
2.给img 添加 display：block; 转换为块级元素就不会存在问题了。
CSS精灵技术（sprite） 小妖精 雪碧
精灵技术本质
简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tRCKcXHE-1596644152406)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200223123623522.png)]
滑动门
核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。
一般的经典布局都是这样的：
html 导航栏内容
总结：
1 a 设置 背景左侧，padding撑开合适宽度。
2 span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
3 之所以a包含span就是因为 整个导航都是可以点击的。
web字体
字体格式
*1、TureType(.ttf)格式*
*2、OpenType(.otf)格式*
*3、Web Open Font Format(.woff)格式*
4、Embedded Open Type(.eot)格式
5、SVG(.svg)格式
字体图标
阿里icon font字库
http://www.iconfont.cn/
-
下载兼容字体包
将选中的图标加入购物车，然后下载代码，下载的文件包解压之后，在html文件中是使用方法，将@font-face放入css，将字体包的(.otf) (.woff) (.woff2) (.eot) (.svg) 等复制到新建的文件夹font1中，将font1复制到网页文件夹中，然后在css中src:url:中引入文件font1，在html中带入字体的代码，css中写入此元素的font-family。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-InFKhDvw-1596644152408)(C:\Users\Administrator\Desktop\css笔记\图片\字体图标.jpg)]
引入ico图标
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OJ0lju8v-1596644152409)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200223130835534.png)]
代码：
注意：
\1. 她(它)不是iconfont字体哦 也不是图片。
\2. 位置是放到 head 标签中间。
\3. 后面的type=“image/x-icon” 属性可以省略。（我相信你也愿意省略。）
\4. 为了兼容性，请将favicon.ico 这个图标放到根目录下。
*转换ico图标*
我们可以自己做的图片，转换为 ico图标，以便放到我们站点里面。 http://www.bitbug.net/
常用新标签（新增）
header：定义文档的页眉 头部
-
nav：定义导航链接的部分
-
footer：定义文档或节的页脚 底部
-
article：定义文章。
-
section：定义文档中的节（section、区段）
-
aside：定义其所处内容之外的内容 侧边
| *类型* | *使用示例* | *含义* |
|---|---|---|
| *email* | 输入邮箱格式 | |
| *tel* | 输入手机号码格式 | |
| *url* | 输入url格式（地址） | |
| *number* | 输入数字格式 | |
| *search* | 搜索框（体现语义化） | |
| *range* | 自由拖动滑块 | |
| *time* | 小时分钟 | |
| *date* | 年月日 | |
| *datetime* | 时间 | |
| *month* | 年月 | |
| *week* | 星期 年 |
| *属性* | *用法* | *含义* |
|---|---|---|
| *placeholder* | 占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回 | |
| *autofocus* | 规定当页面加载时 input 元素应该自动获得焦点 | |
| *multiple* | 多文件上传 | |
| *autocomplete* | 规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 2.这个表单您必须给他名字 |
|
| *required* | 必填项 内容不能为空 | |
| *accesskey* | 规定激活（使元素获得焦点）元素的快捷键 采用 alt + s的形式 |
多媒体标签
-
embed：标签定义嵌入的内容
-
audio：播放音频
-
video：播放视频
-
多媒体 embed
embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。
多媒体 audio
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U0Xiludx-1596644152410)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200224201313159.png)]
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放 如果这个属性不写 默认播放一次 loop 或者 loop = “loop” 表示无限循环
-
多浏览器支持的方案
标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iX6RYRW5-1596644152411)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200224201420975.png)]
- 多媒体 video
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TPxBcKFS-1596644152412)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200224201509445.png)]
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度
*多浏览器支持的方案*
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DwVqZC6r-1596644152414)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200224201543644.png)]
标签
字体变大
文字 字体变小
2 右下角标
2 右上角标
标签显示斜体文本效果。
无序列表
有序列表
- aaa
- aaa
自定义列表
- 静夜思
- 床前明月光
- 李白睡的香
表格
表格标题
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
colspan="2" 向下合并
rowspan="2" 向右合并
引入图片
超链接标签 a
baidu
HTML单行文本框和多行文本框
床前明月光
表格
表格标题
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
colspan="2" 向下合并
rowspan="2" 向右合并
引入图片
超链接标签 a
baidu
HTML单行文本框和多行文本框
https://baijiahao.baidu.com/s?id=1602588594788368561&wfr=spider&for=pc
按钮颜色渐变linear-gradient
保存
CSS calc() 函数 通过函数动态计算宽高
自动调整表单域的大小以适应其容器的大小
calc() 的另外一个用例是用来确保一个表单域的大小适合当前的可用空间，而不会在保持合适的外边距的同时，因挤压超出其容器的边缘。
以下实例中，form 元素自身使用了窗口可用宽度的 1/6，然后，为了让 form 元素内部的 input 元素保持合适的大小，我们再一次使用了 calc()，让它的宽度为其容器的宽度减 1em。下面的
input {
padding: 2px;
display: block;
width: calc(100% - 1em);
}
#formbox {
width: calc(100% / 6);
border: 1px solid black;
padding: 4px;
}
禁止文本复制
user-select 属性规定是否能选取元素的文本。
在 web 浏览器中，如果您在文本上双击，文本会被选取或高亮显示。此属性用于阻止这种行为。