贵阳网站建设王道下拉惠,网站开发相关期刊,广东建设工程造价管理协会网站,郑州模板网站设计哪家便宜#x1f469; 个人主页#xff1a;不爱吃糖的程序媛 #x1f64b;♂️ 作者简介#xff1a;前端领域新星创作者、CSDN内容合伙人#xff0c;专注于前端各领域技术#xff0c;成长的路上共同学习共同进步#xff0c;一起加油呀#xff01; ✨系列专栏#xff1a;前端… 个人主页不爱吃糖的程序媛 ♂️ 作者简介前端领域新星创作者、CSDN内容合伙人专注于前端各领域技术成长的路上共同学习共同进步一起加油呀 ✨系列专栏前端面试宝典、JavaScript进阶、vue实战 资料领取前端进阶资料以及文中源码可以在公众号“不爱吃糖的程序媛”领取 前端面试基础知识题
1.两个同级的相邻元素之间有看不见的空白间隔是什么原因引起的有什么解决办法
行框的排列会受到中间空白回车空格等的影响因为空格也属于字符,这些空白也会被应用样式占据空间所以会有间隔把字符大小设为0就没有空格了。
解决方法
相邻元素代码代码全部写在一排浮动元素float:left;在父级元素中用font-size:0;
2.如果需要手动写动画你认为最小时间间隔是多久为什么
多数显示器默认频率是60Hz即1秒刷新60次所以理论上最小间隔为1/601000ms 16.7ms。
3. ::before 和 :after中双冒号和单冒号有什么区别解释一下这2个伪元素的作用
单冒号(:)用于CSS3伪类双冒号(::)用于CSS3伪元素。::before就是以一个子元素的存在定义在元素主体内容之前的一个伪元素。并不存在于dom之中只存在在页面之中。
:before 和 :after 这两个伪元素是在CSS2.1里新出现的。起初伪元素的前缀使用的是单冒号语法但随着Web的进化在CSS3的规范里伪元素的语法被修改成使用双冒号成为::before ::after
4.margin和padding分别适合什么场景使用
何时使用margin
需要在border外侧添加空白空白处不需要背景色上下相连的两个盒子之间的空白需要相互抵消时。
何时使用padding
需要在border内侧添加空白空白处需要背景颜色上下相连的两个盒子的空白希望为两者之和。
5.什么是CSS媒体查询?
媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的.
简单的来讲媒体查询是一种用于修饰css何时起作用的语法. Media Queries 的引入其作用就是允许添加表达式用以确定媒体的环境情况以此来应用不同的样式表。换句话说其允许我们在不改变内容的情况下改变页面的布局以精确适应不同的设备。 6.为什么会出现浮动什么时候需要清除浮动清除浮动的方式有哪些
浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
浮动带来的问题
父元素的高度无法被撑开影响与父元素同级的元素与浮动元素同级的非浮动元素内联元素会跟随其后若非第一个元素浮动则该元素之前的元素也需要浮动否则会影响页面显示的结构。
清除浮动的方式
父级div定义height最后一个浮动元素后加空div标签 并添加样式clear:both。包含浮动元素的父标签添加样式overflow为hidden或auto。父级div定义zoom
7.CSS3新增伪类有那些
p:first-of-type 选择属于其父元素的首个元素p:last-of-type 选择属于其父元素的最后元素p:only-of-type 选择属于其父元素唯一的元素p:only-child 选择属于其父元素的唯一子元素p:nth-child(2) 选择属于其父元素的第二个子元素:enabled :disabled 表单控件的禁用状态。:checked 单选框或复选框被选中。
8.前端项目中为什么要初始化CSS样式
因为浏览器的兼容问题不同浏览器对标签的默认值是不同的如果没有对浏览器的CSS初始化会造成相同页面在不同浏览器的显示存在差异。
9.页面导入样式时使用link和import有什么区别
link属于HTML标签而import是css提供的
页面被加载时link会同时被加载而import引用的css会等到页面被加载完再加载
import只在IE5以上才能识别而link是XHTML标签无兼容问题
link方式的样式的权重高于import的权重。
10.说说你对盒子模型的理解
当对一个文档进行布局layout的时候浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型CSS basic box model将所有元素表示为一个个矩形的盒子box
一个盒子由四个部分组成content、padding、border、margin content即实际内容显示文本和图像
boreder即边框围绕元素内容的内边距的一条或多条线由粗细、样式、颜色三部分组成 padding即内边距清除内容周围的区域内边距是透明的取值不能为负受盒子的background属性影响 margin即外边距在元素外创建额外的空白空白通常指不能放其他元素的区域
上述是一个从二维的角度观察盒子下面再看看看三维图 段代码
style
.box {width: 200px;height: 100px;padding: 20px;
}
/stylediv classbox
盒子模型
/div当我们在浏览器查看元素时却发现元素的大小变成了240px。
这是因为在CSS中盒子模型可以分成W3C 标准盒子模型、IE 怪异盒子模型。
默认情况下盒子模型为W3C 标准盒子模型标准盒子模型是浏览器默认的盒子模型。
标准盒子模型
下面看看标准盒子模型的模型图 图可以看到
盒子总宽度 width padding border margin; 盒子总高度 height padding border margin
也就是width/height 只是内容高度不包含 padding 和 border 值。
所以上面问题中设置width为200px但由于存在padding但实际上盒子的宽度有240px。
IE 怪异盒子模型
同样看看IE 怪异盒子模型的模型图 图可以看到
盒子总宽度 width margin; 盒子总高度 height margin;
width/height 包含了 padding 和 border 值。
Box-sizing
CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度。
语法
box-sizing: content-box|border-box|inherit;content-box 默认值元素的 width/height 不包含paddingborder与标准盒子模型表现一致。 border-box 元素的 width/height 包含 paddingborder与怪异盒子模型表现一致。 inherit 指定 box-sizing 属性的值应该从父元素继承。
回到上面的例子里设置盒子为 border-box 模型。
style
.box {width: 200px;height: 100px;padding: 20px;box-sizing: border-box;
}
/style
div classbox
盒子模型
/div这时候就可以发现盒子的所占据的宽度为200px。
