Open Geekiter opened 7 months ago
10/37
在HTML页面中,如果在执行脚本时,页面的状态是不可响应的,知道脚本执行完成后,页面才变得可以响应。web worker是运行在后台的js,独立于其他的脚本,不会影响页面性能。并且通过postMessage将结果回传到主线程。这样在进行复杂操作的时候就不会阻塞主线程了。
如何创建web worker:
行内:span, a, b, img, input, select strong
块级别:h、p、div, ul, ol, li
标签内的,1000
id,100
class, 10
伪类选择器,10
标签选择器, 1
伪元素选择器,1
子元素选择器,0
后代选择器,0
通配符选择器,0
none,元素不显示,从文档中移除
block,块元素,继承父元素宽度
inline,行内元素,默认宽度为内容宽度,不可以设置宽高
inline-block,宽度为内容宽度,可以设置宽高
list-item,添加样式列表标记
table,块级表格
inherit,集成父元素的display属性
flex,flex布局
渲染树
继承
伪元素是在元素前后插入元素或样式,但并不在文档源代码中,只在外部显示可见
伪类将特殊效果添加到特定选择器上,是已有的元素上添加类别,不会产生新的元素。.
标准盒模型、IE盒模型。
标准盒模型width和height包含content,IE盒模型包含了border、padding、content box-sizeing: content-box 标准盒模型 box-sizeing: border-boxIE盒模型
将一个页面涉及到的所有图片都包含到一张大图里,利用css的background-image、background-repeat、background-position属性对背景定位
预处理器:less,sass,stylus,用来预编译sass,less,增加css的复用性,还有编程特性,兼容性 后处理器:postCss,根据css规范,处理css。比如解决一些兼容性问题
{
overflow: hidden; //溢出隐藏 text-overflow: ellipsis; //溢出用省略号显示 white-space: nowrap; // 规定段落中的文本不换行 }
- 多行文本溢出 ```css { overflow: hidden text-overflow: ellipsis; display: -webkit-box; //作为弹性伸缩盒子显示 -webkit-box-orient: vertical; //从上到下锤子排列 -webkit-line-clamp: 3; //显示的行数 }
以图片为例, window.innerHeight 是浏览器可视区的高度 document.body.scrollTop || document.documentElement.scrollTop是浏览器滚动的过距离 imgs.offsetTop是元素顶部距离文档顶部的高度 内容达到显示区域的:document.body.scrollTop < img.offsetTop < window.innerHeight + document.body.scrollTop; ![[Pasted image 20240305201347.png]]
.left{ float: left; width: 300px; } .right{ margin-left: 300px; }
.container{ display: flex; } .left{ flex: 1 } .right} flex: 1
绝对定位
.outer{ position: relative; height: 100px; } .left{ postion: absolute; width: 200px; } .right{ margin-left: 200px; }
.outer{ postion: relative; height: 100px; } .left{ width: 200px; } .right{ position: absolute; top:0; right: 0; botton: 0; left: 200px; }
浮动,中间一栏放在中间
.outer { position: relative; height: 100px; } .left { position: absolute; width: 100px; height: 100px; background: tomato; } .right { position: abosulte; top: 0; right: 0; width: 200px; height: 100px; background: gold; } .center { margin-left: 100px; margin-right: 200px; height: 100px; background: lightgreen; }
.outer{ display: flex; height: 100px; } .left{ width: 100px; background: tomato; } .right{ width: 100px; background: gold; } .center{ flex: 1; background: lightgreen; }
.outer{ height: 100px; } .left{ float: left; width: 100px; height: 100px; background: tomato; } .right{ float: right; width: 200px; height: 100px; background: gold; } .center{ height: 100px; margin-left: 100px; margin-right: 200px; background: lightgreen; }
利用浮动和负边距来实现。父级元素设置左右padding,三列三列做浮动,中间一列放在最前面。宽度设置为父级元素的宽度。把后面两列
<head> <style> .outer{ background-color: blanchedalmond; padding: 0 200px 0 100px; height: 200px; } .center{ width: 100%; height: 100px; float: left } .left{ position: relative; left: -100px; margin-left: -100%; width: 100px; height: 200px; float: left; background-color: aquamarine; } .right{ position: relative; left: 200px; /*让他上去*/ margin-left: -200px; /*位移回来*/ width: 200px; height: 200px; float: right; background-color: whitesmoke; } </style> </head> <body> <div class="outer"> <div class="center">Inline Block Element 2</div> <div class="left">Inline Block Element 1</div> <div class="right">Inline Block Element 3</div> </div> </body>
利用center外面包裹的wrap覆盖全部宽度,center在内部使用margin留出宽度,left、right用margin-left顶上
<html> <head> <style> .wrap, .left, .right { float: left; height: 200px; } .wrap{ width: 100%; background-color: aqua; } .center{ margin: 0 200px 0 100px; } .left{ margin-left: -100%; width: 100px; background-color: red; } .right{ margin-left: -200px; width: 200px; background-color: yellow; } </style> </head> <body> <div class="outer"> <div class="wrap"> <div class="center">Inline Block Element 2</div> </div> <div class="left">Inline Block Element 1</div> <div class="right">Inline Block Element 3</div> </div> </body> </html>
.parant{ display: flex; justify-content: center; align-items: center; }
.wp{ display: grid; } .box{ align-self: center; justify-self: center; }
%% 这是相对浏览器来说的垂直居中,如果相对元素, 将父元素的position设为relative %% .center{ position: absolute; top: 50%; left: 50%; background-color: aqua; transform: translate(-50%, -50%) // 将元素的中心移到元素原先的左上角 }
Flex布局是一种在容器内部进行灵活、可响应的布局方式。 Flex的概念
浮动:在非IE浏览器下,容器不设高度且子元素浮动,容器高度不会被撑开,内容就会溢出到容器外面从而影响布局。
清除方式:
.clear::after{ content: ""; clear: both; display: block; }
BFC是块级上下文格式化,是页面的一块渲染区域,有着一套渲染规则。 常用来:
普通流中,两个会计元素的上下外边距可能会合并为一个外边距,取最大的那个。浮动元素和绝对定位不会折叠。
兄弟重叠
父子重叠
absolute: 绝对定位,相对于static以外的一个父元素进行定位。
relative:相对定位,相对于原来的位置进行定位
fixed: 绝对定位,相对于屏幕进行定位
static,没有定位
inherit: 继承定位
border属性是右三角形组成的
div { width: 0; height: 0; border-top: 50px solid red; border-right: 50px solid transparent; border-left: 50px solid transparent; }
用CSS实现扇形的思路和三角形基本一致,就是多了一个圆角的样式,实现一个90°的扇形:
.center { border: 100px solid transparent; width: 0; height: 0; border-radius: 100px; border-top-color: aqua; }
.square { width: 10%; height: 10vw; background: tomato; }
transform: scale(0.5,0.5);
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>
在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在retina屏机型中,1px会比较粗,即经典的移动端1px像素问题。
.parant{ position: relative; &::after{ content: ""; position: absolute; top: 0; left: 0; height: 1px; width: 100%; transform: scale(0.5); transform-origin: left top; box-sizing: border-box; border: 1px solid #333; } }
可继承:
如果在伪元素中不写 content,那么该伪元素将不会被渲染或显示在页面上。content 属性是伪元素的必需属性,它定义了伪元素的内容。
shrink默认值是1,flex-grow默认值是0
.nth-child(even){ ... }
HTML+CSS
10/37
1.说一下 web worker
在HTML页面中,如果在执行脚本时,页面的状态是不可响应的,知道脚本执行完成后,页面才变得可以响应。web worker是运行在后台的js,独立于其他的脚本,不会影响页面性能。并且通过postMessage将结果回传到主线程。这样在进行复杂操作的时候就不会阻塞主线程了。
如何创建web worker:
2.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
行内:span, a, b, img, input, select strong
块级别:h、p、div, ul, ol, li
3. CSS选择器及其优先级
标签内的,1000
id,100
class, 10
伪类选择器,10
标签选择器, 1
伪元素选择器,1
子元素选择器,0
后代选择器,0
通配符选择器,0
4.display的属性值及其作用
none,元素不显示,从文档中移除
block,块元素,继承父元素宽度
inline,行内元素,默认宽度为内容宽度,不可以设置宽高
inline-block,宽度为内容宽度,可以设置宽高
list-item,添加样式列表标记
table,块级表格
inherit,集成父元素的display属性
flex,flex布局
5.display的block、inline和inline-block的区别
6. 隐藏元素的方法
7. link和@import的区别
8. display:none与visibility:hidden的区别
渲染树
继承
9. 伪元素和伪类的区别和作用?
伪元素是在元素前后插入元素或样式,但并不在文档源代码中,只在外部显示可见
伪类将特殊效果添加到特定选择器上,是已有的元素上添加类别,不会产生新的元素。.
10. 对盒模型的理解
标准盒模型、IE盒模型。
标准盒模型width和height包含content,IE盒模型包含了border、padding、content box-sizeing: content-box 标准盒模型 box-sizeing: border-boxIE盒模型
11. 对 CSSSprites 的理解
将一个页面涉及到的所有图片都包含到一张大图里,利用css的background-image、background-repeat、background-position属性对背景定位
12. CSS预处理器/后处理器是什么?为什么要使用它们?
预处理器:less,sass,stylus,用来预编译sass,less,增加css的复用性,还有编程特性,兼容性 后处理器:postCss,根据css规范,处理css。比如解决一些兼容性问题
13. display:inline-block 什么时候会显示间隙?
14. 单行、多行文本溢出隐藏
overflow: hidden; //溢出隐藏 text-overflow: ellipsis; //溢出用省略号显示 white-space: nowrap; // 规定段落中的文本不换行 }
15. 如何判断元素是否到达可视区域
以图片为例, window.innerHeight 是浏览器可视区的高度 document.body.scrollTop || document.documentElement.scrollTop是浏览器滚动的过距离 imgs.offsetTop是元素顶部距离文档顶部的高度 内容达到显示区域的:document.body.scrollTop < img.offsetTop < window.innerHeight + document.body.scrollTop; ![[Pasted image 20240305201347.png]]
16. z-index属性在什么情况下会失效
17. 两栏布局的实现
绝对定位
18. 三栏布局的实现
浮动,中间一栏放在中间
绝对定位,左右两栏absolute,中间对应方向margin值
flex布局,中间flex:1, 左右设置大小
浮动,左右固定大小,对应方向浮动。中间设置左右margin值,中间一栏必须放在最后
圣杯布局
利用浮动和负边距来实现。父级元素设置左右padding,三列三列做浮动,中间一列放在最前面。宽度设置为父级元素的宽度。把后面两列
双飞翼布局
利用center外面包裹的wrap覆盖全部宽度,center在内部使用margin留出宽度,left、right用margin-left顶上
19.水平垂直居中的实现
flex布局
grid 布局
absolute
20. 对Flex布局的理解及其使用场景
Flex布局是一种在容器内部进行灵活、可响应的布局方式。 Flex的概念
21. 为什么需要清除浮动?清除浮动的方式
浮动:在非IE浏览器下,容器不设高度且子元素浮动,容器高度不会被撑开,内容就会溢出到容器外面从而影响布局。
清除方式:
对BFC的理解,如何创建BFC
BFC是块级上下文格式化,是页面的一块渲染区域,有着一套渲染规则。 常用来:
23. 什么是margin重叠问题?如何解决?
普通流中,两个会计元素的上下外边距可能会合并为一个外边距,取最大的那个。浮动元素和绝对定位不会折叠。
兄弟重叠
父子重叠
24. position的属性有哪些,区别是什么
absolute: 绝对定位,相对于static以外的一个父元素进行定位。
relative:相对定位,相对于原来的位置进行定位
fixed: 绝对定位,相对于屏幕进行定位
static,没有定位
inherit: 继承定位
25. display、float、position的关系
26、css怎么实现三角形?
border属性是右三角形组成的
27. 实现一个扇形
用CSS实现扇形的思路和三角形基本一致,就是多了一个圆角的样式,实现一个90°的扇形:
28. 实现一个宽高自适应的正方形
29. 画一条0.5px的线
30. 设置小于12px的字体
31. 如何解决 1px 问题?
在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在retina屏机型中,1px会比较粗,即经典的移动端1px像素问题。
32.CSS 中可继承与不可继承属性有哪些?
可继承:
33.line-height: 100% 和 line-height: 1 有什么不一样?
34.如果在伪元素中不写 content 会发生什么
如果在伪元素中不写 content,那么该伪元素将不会被渲染或显示在页面上。content 属性是伪元素的必需属性,它定义了伪元素的内容。
35.flex: shrink 和 flex-grow 的默认值是多少?它们的作用是什么?flex: 1 表示什么?
shrink默认值是1,flex-grow默认值是0
36.如何快速选取同一批兄弟元素的偶数序号元素。
37.CSS 中是否存在父选择器?其背后的原因是什么?