前端三⼤件⾯试题
前端三⼤件⾯试题
HTML
⾏内元素有哪些？块级元素有哪些？空(void)元素有那些？
⾏内元素有：span a b i img input select strong
块级元素有：div p h1-h6 ul table form ul ol li dl dt dd…
空元素(没有内容)： <br> <hr> <img> <input> <link> <meta>
页⾯导⼊样式时，使⽤link和@import有什么区别？
link是html标签，@import是css提供的
link引⼊的样式在页⾯加载时同时加载，@import引⼊的样式需等页⾯加载完成后加载
link没有兼容性问题，@import不兼容ie5以下
link可以通过js操作DOM动态引⼊样式表改变样式，⽽@import不可以
title与h1的区别、b与strong的区别、i与em的区别？
title与h1的区别
title是⽹站标题，
h1是⽂章主题
b与strong、i与em
b为了加粗⽽加粗，strong为了标明重点⽽加粗
i为了斜体⽽斜体，em为了标明重点⽽斜体
个⼈理解：b和i都是逻辑标签，只是实现效果，⽽strong和em都是逻辑标签，其本⾝有意义，表⽰当前⽂本很重要，我们还可以给strong 和em添加别的样式来强调，且对于搜索引擎来说strong和em⽐b和i要重视的多
img的alt和title的区别
alt ：当图⽚加载不出来时，显⽰alt⾥的⽂字
title：当⿏标移⼊时显⽰的⽂字
搜索引擎对图⽚意思的判断，主要靠alt属性。
png、jpg、gif 这些图⽚格式解释⼀下，分别什么时候⽤？
png是便携式⽹络图⽚（Portable Network Graphics）是⼀种⽆损数据压缩位图⽂件格式.优点是：压缩⽐⾼，⾊彩好。 ⼤多数地⽅都可以⽤。
jpg是⼀种针对相⽚使⽤的⼀种失真压缩⽅法，是⼀种破坏性的压缩，在⾊调及颜⾊平滑变化做的不错。在www上，被⽤来储存和传输照⽚的格式。
gif是⼀种位图⽂件格式，以8位⾊重现真⾊彩的图像。可以实现动画效果.
webp格式是⾕歌在2010年推出的图⽚格式，压缩率只有jpg的2/3，⼤⼩⽐png⼩了45%。缺点是压缩的时间更久了，兼容性不好，⽬前⾕歌和opera⽀持。
::before 和 :after中双冒号和单冒号有什么区别？解释⼀下这2个伪元素的作⽤。
伪元素在CSS1中已存在，当时语法是⽤ : 表⽰，如 :before 和 :after后来在CSS3中修订，伪元素⽤ :: 表⽰，如 ::before 和 ::after，以此区分伪元素和伪类，由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使⽤ :after 这种⽼语法表⽰伪元素。⽽新的在CSS3中引⼊的伪元素则不允许再⽀持旧的单冒号的写法。
想让插⼊的内容出现在其它内容前，使⽤::before，否者，使⽤::after；在代码顺序上，::after⽣成的内容也⽐::before⽣成的内容靠后。如果按堆栈视⾓，::after⽣成的内容会在::before⽣成的内容之上。
怎么让Chrome⽀持⼩于12px 的⽂字？
使⽤transform的缩放属性
.font{
font-size : 10px;
// 10/12 = 0.83
transform : scale(0.83,0.83) ;
// 兼容ie
*font-size:10px;
}
px、rem、em区别
PX：px像素（Pixel）。相对长度单位。像素px是相对于显⽰器屏幕分辨率⽽⾔的。
EM：em是相对长度单位，相对于当前对象内⽂本的字体尺⼨。如当前对⾏内⽂本的字体尺⼨未被设置，则相对于浏览器的默认字体尺⼨。
注意：em的值是不固定的，em会继承⽗元素的字体⼤⼩
REM：rem是相对长度单位，相对于根元素（即html元素）的font-size计算值的倍数。
**em和rem的区别:em的值并不是固定的，恶魔会继承⽗元素的字体⼤⼩，em先当前对象的字体尺⼨，不到就上⼀级，知道到；⽽rem是直接相对html
⾃适应和响应式布局
⾃适应
通俗将就是未不同的设备去设计单独适应其尺⼨的页⾯
优点：让设计可控，只需考虑其不同的状态并设计即可，实施代价更低
缺点：维护困难，需求变更时需要更改⼤量代码。同⼀个⽹站会出现多个⼊⼝，增加架构设计的复杂度响应式
⼀套页⾯全部适配所有设备
优点：⾯对不同设备能更灵活显⽰，
缺点：设计困难，需要考虑各种各样的设备兼容问题
响应式的实现： 通过使⽤流式布局，相对单位rem、em，mediaquery媒体查询模块来加载对应css⽂件等
个⼈总结：具体看⽹站的类型来选择对应的布局，并不是⼀昧的去使⽤响应式，如果是⼀些业务逻辑并不是很繁琐就可以使⽤响应式，响应式设计的初衷并不是取代⾃适应式
CSS
实现css⽔平垂直
利⽤flex布局，在⽗元素中之间使⽤justify-content: center; align-items: center；即可，
<body>
<div class="a">
<div class="b"></div>
</div>
</body>
<style>
.a {
background-color: burlywood;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.b {
background-color: aliceblue;
}
</style>
也可以使⽤绝对布局，但是区分当前元素是否确认宽⾼。设置居中元素的top和left为⽗元素的50%，如果该元素有宽⾼，要继续将外边距设置为-1/2个像素（因为top和left是先对与当元素⽗元素实现偏转，所以在有⾼度和宽度的情况下只是左上⾓的点处在中间位置）
<body>
<div class="a">
<div class="b"></div>
</div>
</body>
<style>
.a{
background-color: burlywood;
position: relative;
width: 500px;
height: 500px;
}
.b{
position: absolute;
background-color: aliceblue;
top: 50%;
left: 50%;
/*
有宽⾼时
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
或者使⽤
transform: translate(-50%, -50%);
*/
}
</style>
CSS绘制⼀个三⾓形、圆形、椭圆(使⽤border)将元素宽⾼度设置为0，如何通过设置单边的边距实现
div{
width: 0px;
height: 0px;
border-width: 100px;
border-style: solid;
/*将其他边框设置为透明*/
border-color: transparent transparent transparent red;
}
圆形和椭圆通过使⽤border-radius来实现
/*圆形（必须是在正⽅形中才能绘制出圆形） */
div {
width: 400px;
height: 400px;
background-color: red;
border-radius: 50%;
}
/*椭圆（必须是在长⽅形⽅形中才能绘制出椭圆） */
div {
width: 400px;
height: 200px;
background-color: red;
border-radius: 50%;
/*border-radius: 200px/400px; 宽/⾼*/
}
CSS常⽤选择器
id选择器（ # myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
相邻选择器（h1 + p）
⼦选择器（ul > li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器（a[rel = “external”]）
伪类选择器（a: hover, li:nth-child）
CSS样式的优先级
优先级就近原则
同权重情况下样式定义最近者为准；载⼊样式以最后载⼊的定位为准;
同权重: 内联样式表（标签内部）> 嵌⼊样式表（当前⽂件中）> 外部样式表（外部⽂件中）
!important > id > class > tag
可以继承的样式：font-size font-family color
不可以继承的样式：border padding margin width height ;
CSS中的标准盒模型和怪异盒模型
CSS中的盒⼦模型可以⽤来对元素进⾏布局，其中包括内外边距，边框以及实际的内容。盒⼦模型分为⼀下两种标准盒模型（W3C）
在标准盒模型中，width和heigth是指内容conten的⼤⼩，在标准盒模型下盒⼦的⼤⼩ = width/heigth（conten） +border + padding + margin
怪异盒模型（IE）
⽽在怪异盒模型中盒⼦的⼤⼩ = width/heigth（content + border + padding） + margin
CSS隐藏界⾯元素的常⽤⽅法
设置透明度opacity: 0;
定位到不可见区域position: absolute;（ top: -9999px; left: -
9999px; ）
设置⾼度为height: 0
visibility: hidden;display: none;
是否占⽤
空间
css布局左边固定右边自适应是是否
是否可以
操作是
⽆法监听，⼦元素可以通过设置
visible显⽰
⽆法监听，⼦元素也不会
呗渲染
应⽤：visibility设置翻牌显⽰图⽚效果，display应⽤⼆级菜单

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。