CSS面试笔记
CSS面试文档题
说一下css盒模型
-
css盒模型包括标准模型和IE盒模型
-
两个都包含content/padding/border/margin
- 区别是IE盒模型（怪异盒模型）的width表示content+padding+border
- 标准盒模型的width只包含content
box-sizing: content-box; 标准盒模型
box-sizing: border-box; border-box怪异盒模型 content+padding+border
画一条0.5px的线
1. 给容器设置伪元素，设置绝对定位，宽高是200% ，边框是1px
div{
background:black;//一定是background而非color
width:100%;
height:1px;
<!-- scale缩放 -->
transform:scaleY(0.5)
}
2. 利用线性渐变，一半有颜色，一般透明
link 标签和import标签的区别
1. **link属于html标签，而@import是css提供的**
2. 页面被加载时，**link会同时被加载**，而@import引用的css会等到页面加载结束后加载
3. link是html标签，因此没有兼容性，而@import只有IE5以上才能识别
4. **link方式样式的权重高于@import**
<!-- CSS外部引用方式1 -->
<link rel="stylesheet" type="text/css" href="CSS/028-外部样式表.css"/>
<!-- CSS外部引用方式2 -->
<!--
<style type="text/css">
@import url("css文件的路径");
</style>
-->
transtion和animation的区别
1. animation 和 transition 大部分属性是相同的，他们都是随时间改变元素的属性值，
2. 区别是 transition 需要**触发一个事件才能改变属性**，而 animation **不需要触发任何事件**的情况下才会随时间改变属性值，并且 transition 为 2 帧，从 from .... to，而 animation可以一帧一帧的
说一下块元素和行元素
-
块元素：独占一行，并且有自动填满父元素，可以设置 margin 和 pading 以及高度和宽度
块元素(block element) address - 地址 blockquote - 块引用 center - 举中对齐块 dir - 目录列表 div - 常用块级容易，也是CSS layout的主要标签 dl - 定义列表 fieldset - form控制组 form - 交互表单 h1 - 大标题 h2 - 副标题 h3 - 3级标题 h4 - 4级标题 h5 - 5级标题 h6 - 6级标题 hr - 水平分隔线 isindex - input prompt menu - 菜单列表 noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容 noscript - 可选脚本内容（对于不支持script的浏览器显示此内容） ol - 排序表单 p - 段落 pre - 格式化文本 table - 表格 ul - 非排序列表 -
行元素：不会独占一行**，width 和 height 会失效，并且在垂直方向的 padding 和 margin会失效**
内联元素(inline element) a - 锚点 b - 粗体(不推荐) br - 换行 cite - 引用 code - 计算机代码(在引用源码的时候需要) em - 强调 font - 字体设定(不推荐) i - 斜体 img - 图片 input - 输入框 kbd - 定义键盘文本 label - 表格标签 select - 项目选择 small - 小字体文本 span - 常用内联容器，定义文本内区块 strike - 中划线 strong - 粗体强调 sub - 下标 sup - 上标 textarea - 多行文本输入框 tt - 电传文本 u - 下划线 var - 定义变量块级元素和行内元素如何转换
- 块级元素变成行内元素
display: inline; - 行内元素变成块级元素
display: block; - 块级元素、行内元素变成行内块元素
display: inline-block;
- 块级元素变成行内元素
position 属性 比较
1. **固定定位 fixed**:元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。
2. **相对定位 relative**:如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
3. **绝对定位 absolute**:绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。
4. **粘性定位 sticky**:元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
5. **默认定位 Static**:默认值。没有定位，元素出现在正常的流中（忽略 top,bottom, left, right 或者 z-index 声明）。inherit: 规定应该从父元素继承 position 属性的值
浮动清除
-
方法一：使用带 clear 属性的空元素在浮动元素后使用一个空元素如
<div class="clear"></div>，并在 CSS 中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。- **none：**元素不会向下移动清除之前的浮动。
- left/right： 元素被向下移动用于清除之前的左或右浮动。
- both： 元素被向下移动用于清除之前的左右浮动。
-
方法二：使用 CSS 的 overflow 属性**给浮动元素的容器添加 overflow:hidden;**这样做就隐藏了浮动元素。或 overflow:auto;可以清除浮动，这是自动隐藏。
- overflow是当块级元素过大，超过所容纳的空间时进行的操作。
- overflow - CSS（层叠样式表） | MDN (mozilla.org)
-
方法三：给浮动的元素的容器添加浮动给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
-
方法四：使用邻接元素处理什么都不做，给浮动元素后面的元素添加 clear 属性。
-
方法五：使用 CSS 的:after 伪元素结合:after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/ content: ""; display: block; height: 0; clear:both; visibility: hidden; }
css3新特性
CSS3 边框如 border-radius，box-shadow 等；CSS3 背景如 background-size，background-origin 等；CSS3 2D，3D 转换如 transform 等
怎么样让一个元素消失
1. **display:none;**
2. **visibility:hidden;**
3. **opacity: 0; 等**
如何实现元素的垂直居中
在B站面试题笔记中
? display：table 和本身的 table 有什么区别
-
Display:table 和本身 table 是相对应的，区别在于，display：table 的 css 声明能够让一个html 元素和它的子节点像 table 元素一样，使用基于表格的 css 布局，是我们能够轻松定义一个单元格的边界，背景等样式，而不会产生因为使用了 table 那样的制表标签导致的语义化问题。之所以现在逐渐淘汰了 table 系表格元素，是因为用 div+css 编写出来的文件比用 table边写出来的文件小，而且 table 必须在页面完全加载后才显示，div 则是逐行显示，table的嵌套性太多，没有 div 简洁
<body> <style type="text/css" rel="stylesheet"> .table { display: table; border: 1px solid #cccccc; margin: 5px; /*display: table时padding会失效*/ } .row { display: table-row; border: 1px solid #cccccc; /*display: table-row时margin、padding同时失效*/ } .cell { display: table-cell; border: 1px solid #cccccc; padding: 5px; /*display: table-cell时margin会失效*/ } </style> <div class="table"> <div class="row"> <div class="cell">张三</div> <div class="cell">李四</div> <div class="cell">王五</div> </div> <div class="row"> <div class="cell">张三</div> <div class="cell">李四</div> <div class="cell">王五</div> </div> </div> </body>
用的最多的 css 属性是啥
用的目前来说最多的是 flex 属性，灵活但是兼容性方面不强
flex:1 1 auto指的是宽高都是
设置一个元素的背景颜色，背景颜色会填充哪些区域
background-color 设置的背景颜色会填充元素的 content、padding、border 区域
? 知道属性选择器和伪类选择器的优先级吗
属性选择器和伪类选择器优先级相同
HTML和CSS笔记
css样式有哪些？
css样式有外部样式、内部样式、行内样式。
优先级 ！important>内联（行内）>id>类选择器>标签和伪元素选择器>通配符选择器
选择器有哪些
- id选择器 #id
- 类选择器 .class
- 属性选择器 a[class] 这个选择的是
- 伪类选择器 li:nth-child a:link a:visited… 伪类选择器一下可以选择多个，伪元素选择器只能一次选择一个
- 标签选择器 div
- 伪元素选择器 li:：after
- 相邻兄弟选择器 h1+p
- 子选择器 ul>li
- 后代选择器 li a
- 通配符选择器 *
标签选择器
class="aa"
id="ss"
伪类选择
1. a:link{属性：属性值；}-访问之前-超链接的初始状态
2. a:visited{属性：属性值；}-访问后-超链接被访问后的状态
3. a:hover{属性：属性值；}-鼠标悬停-即鼠标划过超链接时的状态
4. a:active{属性：属性值；}超链接被激活的状态，即鼠标按键按下时超链接的状态
5. 使用顺序是link - hover - active - visited。必须按照隔着顺序
选择器的权重
行内样式>id>class
text-文字属性
| 名称 | 作用 |
|---|---|
| font-size： | 大小 |
| font-family： | 字体 |
| color： | 颜色 |
| font-weight： | bolder(更粗的)、bold（加粗）、normal（常规）、lighter(细) |
| font-style： | 倾斜–italic（倾斜字）、obliqque（更倾斜的字体）、normal(常规显示) |
| text-align： | 文本水平对齐 left/right/center/justify(水平两端对齐，最多只对多行起作用) |
| text-decoration: | 主要是用来删除链接的下划线 |
列表属性–现在基本不用手写列表，直接用组件库实现
| 名称 | 作用 | 用法 |
|---|---|---|
| list-style-type: | 定义列表符合样式 | disc(实心圆)/circle(空心圆)/square(实心方块) /none(去掉符号) |
| list-style-image: | 将图片设置为列表符合样式 | url(); |
| list-style-position: | 设置列表项标记的放置位置 | outside列表的外面(默认值)/inside列表里面 |
| list-style : | 简写 | none去除列表符号 |
背景属性
| 名称 | 作用 | 用法 |
|---|---|---|
| background-color | 背景颜色 | red… |
| background-image | 背景图片 | url() |
| background-repeat | 背景图片的平铺 | no-repeat不平铺/repeat平铺/repeat-x（x轴平铺）/repeat-y（y轴平铺） |
| background-position | 背景图片的定位 | 水平位置 垂直位置；可以给负值 |
| background-attachment | 背景图片的固定 | scroll(滚动)/fixed(固定) |
浮动元素-float
浮动属性float: left right none。
作用1：定义网页中其它文本如何环绕该元素显示
作用2：让竖着的东西横着来
浮动挡不住文字，会把文字挤开
盒子模型
padding：内边距, 背景色延伸
border：边框, 背景色延伸
margin：外边框, 背景色不延伸
1. 2个值：上下，左右 2. 3个值：上，左右，下 3. 4个值：上，右，下，左：顺时针方向
盒模型外边距特性-float
一般使用float的时候可以加上宽高，这个是可以控制大小的。
float脱离文档流。
- 标准流： 浏览器按照各种元素标签排版布局中默认的状态，浏览器在渲染代码的时候是从左往右、从上到下开始渲染，元素也是从左往右、从上往下的流式排列。也就是没有被其他排版浮动和定位相关的CSS属性干扰的就叫标准流。
- **脱离文档流：**指的是将不再在文档流中占据空间，而是处于浮动状态， 脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
使用float的时候要在父级元素上清空浮动属性，不然由于当前属于浮动，会漂浮出来，后面的元素就会被他们覆盖，因此要在父级元素清空浮动属性
**清空浮动：**三种方法
在不使用浮动的元素上添加：clear属性
- 在父级元素上添加边框
- 在父级元素上添加overflow:hidden;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uLfvZ5Wn-1653956717880)(02.CSS%E9%9D%A2%E8%AF%95%E7%AC%94%E8%AE%B0.assets/1653028596203.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i2lnrroK-1653956717888)(02.CSS%E9%9D%A2%E8%AF%95%E7%AC%94%E8%AE%B0.assets/1653028822601.png)]
1. **兄弟关系**：关于浮动float，浮动就是漂浮到另一个层面上，没有设置浮动的就接着原来的陈列
1. 浮动的时候垂直方向：外边距取最大值
2. 水平方向：外边距进行合并处理，相加
2. **父子关系**：
1. 如果**父盒子没有外边框**，**在垂直方向上**：子盒子和父盒子都可以控制盒子的整体移动。在水平方向上个自控制
2. 如果**父盒子有外边框**，则父子移动相互独立
溢出属性-overflow
容器的溢出属性：overflow
1. visible:默认值，溢出内容会显示在元素之外 2. hidden:溢出内容隐藏 (常用) 3. scroll：滚动，溢出的内容以滚动的方式显示 4. auto：（常用）如果有溢出会添加滚动条，没有溢出正常显示 5. inherit:规定应该遵从父元素继承overflow属性的值 6. overflow-x:x轴溢出(xy连在一起用) 7. overflow-y:y轴溢出
元素显示类型-display属性
1. **块元素特点**：
1. 独占一行，自上而下排列
2. 可以直接添加宽高
3. 一般情况下作为其他元素的容器
4. div p ul li ol li dt dd h1-h6等
2. **内行元素**：
1. 行内元素一出生就带有display属性（只占有字的那部分）
2. 不能直接添加宽高，大小是由内容撑开
3. a、b、span、img、input、strong、select、label、em、button、textarea
display属性
1. **display:block;** 1. 作用：将元素**转成块状元素**，拥有块状元素特点。 2. 补充：大部分块状元素，默认的display的值都是block; 2. **display:inline;** 1. 作用：将元素**转成内联元素**，拥有内联元素的特点。 2. 补充：大部分内联元素，默认的display的值inline; 3. **display:none;** 1. 作用：将当前**隐藏**，并不占据空间。 4. **display:inlink-block;** 1. 同时具备内联元素和块状元素的特点 2. 例如:img input等 5. **display:flex;** 1. 弹性布局 2. 行内元素变成块元素，可以设置宽和高 3. 只有一个元素的时候，margin: auto; 自动居中
定位的属性-position
**使用方法：**写完属性后就确定了是什么定位，然后再下面写具体位置，通过top/left/right/bottom来确定位置，例如top:100px;left:100px;
| 语法 | 说明 | 文档流 | 偏移位置(top/left/right/bottom) |
|---|---|---|---|
| position:static; | 默认值 | 默认 | 默认 (不能用上面四个方向) 下面四个都需要设置上面的四个位置关系 |
| position:absolute; | 绝对定位 | 脱离 | a:当没有父元素后者父元素没有定位，参照物是浏览器窗口的第一屏.b:有父元素且父元素有定位，父元素 |
| position:relative; | 相对定位 | 不脱离 | 自己的初始位置 |
| position:fixed | 固定定位 | 脱离 | 浏览器当前窗口,固定在某个位置不动 |
| position:sticky | 粘性定位 | 可以做吸顶效果，粘性定定位是css3.0新增加的，兼容不好 |
注意，一般父盒子是相对定位，子盒子是绝对定位，因为相对定位是相对于自身，绝对定位是相对于屏幕
制作三角形型
1. 方法一：设置宽高都为0。然后把边框设置为一边有颜色，其他三遍透明
2. 方法二：设置border:20px solid transparent;然后再设置border-top:20px solid red;
层级 z-index
层级，配合着position定位使用 越大越靠上显示，也可以设置负值。z-index: 3;
注意：在父子关系中层级关系失效，如果需要，一般在子盒子上设置z-index：负数。兄弟关系可以没有影响
锚点
锚点作用：页面不同区域的跳转，使用a链接
<ul>
<li>
<a href="#1"> 京东秒杀</a>
</li>
<li><a href="#2">双11</a></li>
<li><a href="#3">频道优选</a></li>
</ul>
<div id="1">
京东秒杀
</div>
<div id="2">
双11
</div>
<div id="3">
频道优选
</div>
精灵图（雪碧图）
精灵图是一种网页背景图片的处理方式 它将多个零星的背景图像都集中到一张大图中去，然后用这张大图应用于网页，这样 当用户访问网页时 就只需向服务器请求一次，然后通过改变背景图片的位置来显示你所需要的那个小图片
图片的定位使用background-position:-?? -??。定位的位置是负值是因为图片移动，所以才是负值。把图片导入后就需要使用background-position定位，然后给出width和height合适的大小。
宽高自适应
1. auto和100%区别：
1. auto是在屏幕内操作，如果有边框，则内部的content缩小，边框不会超出屏幕,会自动适应屏幕。
2. 100%指的的content+padding，如果添加border就会超出屏幕
伪元素-::
1. div::first-letter，对文本首字母操作
2. div::first-line，对文本第一行操作
3. div::before，对文本前插入内容进行操作
4. div::after，对文本后插入内容进行操作
伪类和伪元素的根本区别在于：它们是否创造了新的元素, 这个新创造的元素就叫 “伪无素”
窗口自适应
窗口自适应就是为了设置高度占满全屏，只需要在html,body中设置样式为和hight:100%就行
html,bady{
height:100%
}
calc(** - **)用于动态计算，加减乘前后都要有空格
表单
<input type="radio" name="a" checked>表单，需要设置不同的name，这样才能进行单元，
1. checked表示默认
2. disabled禁用功能
3. readonly只读功能
`<input type="checkbox" name="a" id="1">`表示多选框，相同的name为一组，但是同一组的id不能相同
<!-- select支持的属性
1.size 显示出来几个选项。默认size的值为1
2.multiple 多选，需要按住crul或者shift键
option 支持的属性
1.value 提供给后端需要用的value值
2.selected 默认选中
-->
<select size="3" multiple>
<option value="liaoning" selected>辽宁</option>
<option value="henan">河南</option>
<option value="yunnan">云南</option>
<option value="shandong">山东</option>
</select>
H5新增元素
H5新增语义化标签
语义化标签
1. section 中间栏 表示页面中的一个内容区块
2. article 独立块 表示一块与上下文无关的独立的内容
3. aside 侧边栏 在article内容相关的辅助信息
4. header 标题栏 表示页面中一个内容区块或整个页面的标题
5. footer 底部栏 表示页面中一个内容区块或整个页面的脚注
6. nav 导航栏 表示页面中导航链接部分
7. figure 表示一段独立的流内容，使用figcaption元素为其添加标题（第一个或者最后一个子元素的位置）
8. main 表示页面中的主要的内容（ie不兼容）
音频视频标签
<h1>音频</h1>
<!-- controls：音频控制栏
loop：循环
autoplay:自动播放
muted：静音播放
当有静音的时候就会自动播放，否则第一次进入的时候有autoplay不会自动播放
-->
<audio src="../jiejie.wav" controls></audio>
<!-- controls：音频控制栏
loop：循环
muted：静音播放
-->
<!-- poster海报：视频封面图片 -->
<video src="../图片/104/movie.mp4" controls poster="../图片/104/poster.jpg"></video>
增强表单
- Type=“color” 生成一个颜色选择表单
- tel 换气拨号盘表单
- search 产生一个搜索意义的表单
- range 产生一个滑动条表单
- number 产生一个数值表单
- email 限制用户必须输入email类型
- url 限制用户必须输入url类型
- date 限制用户必须输入日期
- month 限制用户必须输入月类型
- week 限制用户必须输入周类型
- time 限制用户必须输入时间类型
- datetime-local 选择本地时间
css3层级选择器
/* 子代选择器 */
.box>li{
border: 1px solid yellow;
}
/* +：表示当前元素的后面的第一个兄弟元素，只能往后查找 */
.child+li{
background-color: yellow;
}
/* ~；表示当前元素的后面所有的亲兄弟 */
.child~li{
background-color: red;
}
属性选择器
/* 属性选择器 */
/* []表示只要有括号里面的属性的都会被选择出来 */
[class]{
background-color: yellow;
}
div[class]{
background: red;
}
div[class=box1]{
border: 3px solid green;
}
/* ~=：只要是包含box1就会显示下面效果
<div class="box1 box3">555</div>
*/
div[class~=box1]{
border: 3px solid green;
}
/* 模糊匹配
class^="b"或者不带双引号都可以
class^="b" 以某个字符开头的
class$="b" 以某个字符结尾的
class*="b" 包含某个字符
*/
div[class*="1"],p[class*="1"]{
background: pink;
}
伪类选择器
1. div:last-child
2. li:nth-child(2)通过指定数字进行设置第几个
3. div:target：目标伪类选择器
4. **UI伪类选择器**
1. input:enabled。非禁用状态（用于form表单中）
2. input:disabled。禁用状态（用于form表单中）
3. input:focus。focus焦点：会匹配此选择器（用于form表单中）
5. **否定伪类选择器**
1. li:not(:first-child)。否定伪类选择器 :not()
阴影
1. **文本阴影**
1. text-shadow: 10px 10px 3px yellow , 10px -10px 2px red;
2. 阴影 text-shadow: 水平方向位移 垂直方向位移 模糊程度 颜色 写多个阴影的时候只需要用“，”隔开就行
2. **盒子阴影**
1. box-shadow:水平方向位移 垂直方向位移 (阴影大小) 模糊程度 颜色 (内 inset 或外阴影。默认外阴影)
弹性伸缩盒 -display:flex
display ：主要用于页面布局
1. display:flex;
2. **flex-direction**: column;修改主轴为竖直排列
1. row;主轴为水平排列
2. row-reverse；主轴水平反向排列
3. column-reverse;主轴垂直方向反向排列
3. **justify-content**:调整主轴对齐方向
1. flex-start 左对齐
2. center 居中对齐
3. flex-end 右对齐
4. space-between 两端对齐
5. space-around 距离环绕
4. **align-items**:调整侧轴对齐方向。同上
5. **flex-wrap**: wrap;折行显示 如果没有折行显示，使用 display: flex;就会在一行里面显示
6. **align-content**:行间距。属性同上
移动端布局
css像素:设备的独立像素。物理分辨率:设备真正的像素。设备像素比=物理像素/css像素
响应式布局
意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验
@media screen and (min-width:1000){
body{
background: yellow;
}
}
@media screen and (max-width:1000px) and (min-width:500px){
body{
background-color: red;
}
/* 竖屏检测：当屏幕的宽小于高的时候就会切换 */
/*orientation:portrait 竖屏
：landscope横屏 */
@media screen and (orientation:portrait){
div{
width: 33.33%;
}
}
rem/rm/px
1. px:50px
2. **em:相对单位，相对于父元素的字体大小**
3. **rem:相对单位，相对于根元素（html）字体大小**
// 动态计算的作用就是为了适配不同的手机屏幕，这里的375指的是当前手机的尺寸，，换算成别的，则换算比例就不一样，大小也会跟着变
// fontsize的动态计算，这个指的是html中的font-size的值
document.documentElement.style.fontSize=document.documentElement.clientWidth/375*16+'px'
//fontsize=当前设备的css布局宽度/物理分辨率*基准font-size
vh和vw
这两个可以直接在使用，就可以占满全屏
div{
height: 100vh;
width: 100vw;
background-color: yellow;
}
100%和100vw的关系
%是参考父容器，vw和vh是参考视口
- 没有滚动条的时候100vw=100%
- 有滚动条的时候：100vw包含滚动条，
- 100%不包含滚动条，刨除滚动条后剩下的空间
渐变
线性渐变-linear-gradient
background: linear-gradient(90deg,red,green);
径向渐变-radial-gradient
background: radial-gradient(red 50%,yellow 60%);
重复渐变-repeating-linear-gradient
background: repeating-linear-gradient(red,yellow 10%,green 20%);
动画过渡属性-transition
transition:all 2s linear 0s;
（属性，事件，过渡类型，延迟）
这个动画不支持display:none block属性隐藏以及显示
1. linear：规定以相同速度开始至结束的过渡效果
2. ease：规定慢速开始，然后变快，然后慢速结束的过渡效果
3. ease-in：规定以慢速开始的过渡效果
4. ease-out：规定以慢速结束的过渡效果
5. ease-in-out：规定以慢速开始和结束的过渡效果
6. cubic-bezier(0.075, 0.82, 0.165, 1)：bezier 贝赛尔曲线
平移-translate
/* 方法一：x轴平移 y轴平移 */
transform: translateX(-100px) translateY(100px);
/* 方法二：*/
transform: translate(100px,100px);
缩放-scale
/* 表示从左上角开始缩放 */
transform-origin: left top;
transform: scale(1.5);
旋转-rotate
transform: rotate(0deg);
先位移和先缩放不一样 ，先缩放，则后面的位移距离也会跟着缩放最好把位移放在前面
倾斜-skewY
1. skewX 拽着横轴右下角
2. skewY 拽着纵轴左上角
3. skew(**deg，**deg) x轴，y轴
4. transform: skewY(30deg);
关键帧动画
div {
width: 200px;
height: 200px;
background: red;
/* animation: key2 2s linear 1s infinite; */
animation-name: key2;
/* 过渡时间 */
animation-duration: 2s;
/* 过渡类型 */
animation-timing-function: linear;
/* 延迟时间 */
animation-delay: 1s;
/* 循环次数 */
animation-iteration-count: infinite;
/* 动画的运行：running运行，paused暂停 */
animation-play-state: running;
/* 是否反向 */
animation-direction: alternate;
}
div:hover {
animation-play-state: paused;
}
/* 关键帧 */
@keyframes key1 {
from {
width: 200px;
height: 200px;
background: red;
}
to {
width: 400px;
height: 600px;
background: aqua;
}
}
/* 可以做制作多个关键帧 */
@keyframes key2 {
0% {
width: 200px;
height: 200px;
background: red;
}
25% {
width: 300px;
height: 200px;
background: grey;
}
100% {
width: 400px;
height: 600px;
background: aqua;
}
}
animation: run 1s linear forwards;
/* 动画的状态 none
forwards:保留在最后画面
backwards：保留在第一帧状态
*/
B站css面试笔记
介绍一下css盒模型
1. css盒模型有两种
2. 两者的区别
3. 通过css如何转化盒模型：box-sizing:border-box怪异盒模型。content-box标准盒模型
line-height和height
1. height：就是元素的高度值，高度不变
2. line-height：每行文字的高，如果文字换行，则整个盒子的高度会增加（行*行高）
css选择符有哪些？哪些属性可以继承
-
css选择符
- 通配（*）
- id选择器（id)
- 类选择器（#）
- 标签选择器(div/p/h1…)
- 相邻选择器（+）
- 后代选择器（ul li）
- 子元素选择器（>）
- 属性选择器（[]）
- 伪类选择器
注意：子代选择器只会选择子代，不会选择孙子代之类的。而后代选择都会选择
-
哪些属性可以继承
- 文字系列：font-size color line-height text-align
- 文本系列： text-align line-height color
- 元素可见性：visibility
-
哪些属性不可继承
- **border padding margin background float、clear、position overflow **
css优先级算法怎么计算
1. **!important>内联样式>id>class>标签>通配(*)**
2. css权重计算
1. 内联样式（style） 权重值：1000
2. id选择器 100
3. 类选择器 10
4. 标签&伪类元素选择器 1
5. 通配（> + *) 0
一个盒子不给宽高，如何水平居中
1. 弹性盒display:flex; margin:auto;
2. position+translate
对BFC规范的理解（块级格式化上下文）
-
BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
- BFC原则：如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外面的元素
- 如何触发
- float的值中的none除外，其他数都行：left/right/both
- overflow的值（除visible外）。其他都行：hiddren auto scroll
- **display的值为 inline-block、table-cell、flex、table-caption或者inline-flex **
- position的值为absolute
例如： 什么是BFC？
如果是两个P元素的话，使用margin会出现重合的现象，而为了避免重合可以使其中一个设置成BFC盒模型。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-53W2nONX-1653956717893)(02.CSS%E9%9D%A2%E8%AF%95%E7%AC%94%E8%AE%B0.assets/1653636746268.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yvdQZfXG-1653956717893)(02.CSS%E9%9D%A2%E8%AF%95%E7%AC%94%E8%AE%B0.assets/1653636821526.png)]
在网页中应该使用奇数还是偶数的字体？为什么？
1. 用偶数。让文字在浏览器表现更好看
2. 方便开发，转换px方便
什么是css reset
是一个css文件，用来重置css样式的
css精灵图的优缺点
1. 是什么？把多个小图标合并成一个大图片。
2. 优点:减少了http请求次数，提高了浏览器的性能。
3. **缺点：当位置发生改变，导致维护比较差。**
CSS布局
display: -webkit-flex;
Webkit 内核的浏览器，必须加上
-webkit前缀。其他的直接使用
display:flex
面试题
display:none和visibility:hidden的区别？
display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
position的值， relative和absolute分别是相对于谁进行定位的？
relative:相对定位，相对于自己本身在正常文档流中的位置进行定位。
absolute:生成绝对定位，相对于最近一级定位不为static的父元素进行定位。
fixed: （老版本IE不支持）生成绝对定位，相对于浏览器窗口或者frame进行定位。
static:默认值，没有定位，元素出现在正常的文档流中。
sticky:生成粘性定位的元素，容器的位置根据正常文档流计算得出。
914
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
