先别着急,看看下面这些小标题,是否能完整回答上来?不会的直接点标题跳转^v^
1、介绍一下标准的css的盒子模型?低版本的IE的盒子模型有什么不同的?
2、伪类和伪元素有什么区别?列举常用的伪类和伪元素?css选择器优先级是什么?
3、几种常见的css布局?通过什么方式实现?
4、网页中应该使用奇数还是偶数的字体?为什么呢?字体单位有哪些?
5、BFC是什么?有什么用?开发中的应用是什么?
6、知道css有个content属性吗?有什么作用?有什么应用?
7、如何居中一个div?垂直居中有哪些方法?水平居中有哪些方法?垂直水平居中呢?如何居中一个浮动元素?如何让绝对定位的div居中?
8、全屏滚动的原理是什么?用到了css的哪些属性?
9、你对line-height是如何理解的?三种赋值方式有何区别?(带单位、纯数字、百分比)
10、回流和重绘分别是什么?触发条件?性能影响?如何减少回流和重绘?
11、link与@important的区别?
1、介绍一下标准的css的盒子模型?低版本的IE的盒子模型有什么不同的?
· 有两种:怪异(IE)盒子模型、W3C盒子模型;
盒模型:content、padding、border、margin
区别:IE的content部分把border和padding部分算了进去
IE8及其以下版本浏览器,未声明DOCTYPE,内容宽高会包含内填充和边框,成为怪异盒模型( IE盒模型 )
标准(W3C)盒模型:元素宽度 = width + padding + margin + border
怪异(IE)盒模型:元素宽度 = width + margin
标准浏览器通过设置css3的box-sizing:border-box,触发怪异模式解析宽高。
box-sizing常用的属性有哪些?分别有什么作用?
box-sizing: content-box; 默认的标准(W3C)盒模型
box-sizing:border-box;怪异盒模型
box-sizing:inherit;继承父元素box-sizing属性的值
2、伪类和伪元素有什么区别?列举常用的伪类和伪元素?css选择器优先级是什么?
伪类和伪元素:共同作用是给元素添加一些特殊的效果或样式
伪类:用于选择某个元素的特定状态
伪元素:用于创建一些虚拟的元素
伪类:
:hover
用于选择鼠标悬停在元素上时的状态:active
用于选择元素被激活(例如被点击)时的状态: focus 用于聚焦时改变状态
: focus-within 元素或者其子元素聚焦时都会匹配
:vistied a是否访问过
:enabled 和:disabled 能访问和不能访问
注意:a标签设置disabled属性无效,而非a元素配合pointer-events: none实现
:readonly 和:readwrite,匹配是否设置了readonly属性的输入框元素
注意:只对input和textarea有效
:root 匹配的就是html根元素标签
:first-child和:last-child 用于匹配父元素的第一个/最后一个子元素
:only-child 匹配只有一个子元素的元素
:nth-child(n) 和:nth-last-child(n) 匹配第n个子元素/匹配从后往前数第n个子元素
注意:
:nth-child(odd/even) 奇数/偶数
:nth-child(-n + 3) 匹配前三个元素
:first-of-type 和:last-of-type 匹配那些具有相同标签的第一个/最后一个子元素
:only-type-of 匹配子元素中标签类型与selector元素一致且只有一个的selector元素
注意:匹配:only-child的元素一定匹配:only-of-type,反之则不一定
:nth-of-type() 和nth-last-type() 匹配那些具有相同标签的第n个/从后往前数n个
:not() 否定伪类
注意:
:not()伪类自身优先级为0,最终的优先级由()的选择器表达式决定
:not()伪类可以不断级联,如input:not(:disabled):not(:read-only){ }
:is() 可以把括号中的选择器依次分配出去,对于那种复杂的有很多逗号分隔的选择器非常有用
注意::is()最终的优先级由()的选择器表达式决定
伪元素:
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 选中的内容
::before 元素的开始位置
::after 元素的结束位置
选择器优先级:
!important > id > class > tag 注意:!important 比内联优先级高
3、几种常见的css布局?通过什么方式实现?
单列布局: 没什么要点,用margin :auto达到水平居中即可
.contenter {
margin: auto;
}
三栏布局: 左右两边固定边距,中间自适应
1、float
<div class="left">left</div>
<div class="right">right</div>
<div class="middle">middle</div>
<style>
.left{
float:left;
width: 200px;
background-color: aqua;
}
.right{
float: right;
width: 200px;
background-color: black;
}
.middle{
background-color: saddlebrown;
}
</style>
2、absolute 和 relative
<div class="container">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
<style>
.container {
position: relative;
}
.left {
position: absolute;
left: 0;
width: 200px;
background-color: aqua;
}
.right {
position: absolute;
right: 0;
width: 200px;
background-color: black;
}
.middle {
position: absolute;
left: 200px;
right: 200px;
background-color: saddlebrown;
}
</style>
3、flex
<div class="container">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
<style>
.container {
display: flex;
}
.left {
width: 200px;
background-color: aqua;
}
.right {
width: 200px;
background-color: black;
}
.middle {
flex: 1;
background-color: saddlebrown;
}
</style>
flex
属性是flex-grow
,flex-shrink
, 和flex-basis
的简写形式。使用flex: 1
实际上等同于flex: 1 1 0%
,即:
- flex-grow: 1: 元素可以占用父容器中剩余的可用空间。多个具有相同
flex-grow
值的子元素将平分剩余空间。- flex-shrink: 1: 当父容器空间不足时,元素可以缩小。多个具有相同
flex-shrink
值的子元素将按比例缩小。- flex-basis: 0%: 元素的初始主轴尺寸为 0,然后根据
flex-grow
和flex-shrink
的值进行调整。
4、grid
<div class="container">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
}
.left {
background-color: aqua;
}
.right {
background-color: black;
}
.middle {
background-color: saddlebrown;
}
grid-template-columns: 200px 1fr 200px;
是用于创建 CSS Grid 布局的属性之一,它定义了网格容器中列的大小和分布。具体来说,这个属性指定了每一列的宽度。
1fr
: 这是一个占据剩余空间的列,剩余空间按照比例分配给这一列。1fr
表示剩余空间的一个单位份额。
4、网页中应该使用奇数还是偶数的字体?为什么呢?字体单位有哪些?
偶数字号相对更容易和web设计的其他部分构成比例关系。
px:固定值
em:继承父级元素的字体大小,如果父元素没有的话,会向上追溯。默认1em=16px。em = 像素值 / 父级font-size
rem:相对长度单位,相对其根元素来设置大小,任意浏览器的默认字体高都是16px;所有未经浏览器调整的浏览器都符合1rem = 16px
html {
font-size: 20px;
}
<div style="font-size: 1rem;">111</div> //20px
<div style="font-size: 2rem;">222</div> //40px
注意:如何做移动适配:以设计稿400px为例,移动设备 / 设计稿宽度 * x = x px,x为任意整数值
ex:
5、BFC是什么?有什么用?开发中的应用是什么?
BFC: 块级格式上下文block formatting context ,是一个独立的渲染区域,让处于BFC内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响
应用:
阻止margin重叠;自适应两栏布局;可以阻止元素被浮动元素覆盖;可以包含浮动元素(清除内部浮动)
BFC布局规则:浮动的元素会被父级计算高度(父级元素触发了BFC)
非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
margin不会传递给父级(父级触发BFC)
属于同一个BFC的两个相邻元素上下margin会重叠
6、知道css有个content属性吗?有什么作用?有什么应用?
content属性专门应用在before/after伪元素上,用来插入生成内容。最常见的是利用伪类来清除浮动
.clearfix:after {
content:"."; //这里利用到了content属性
display:block;
height:0;
visibility:hidden;
clear:both; //清除左右两边的浮动
}
7、如何居中一个div?垂直居中有哪些方法?水平居中有哪些方法?垂直水平居中呢?如何居中一个浮动元素?如何让绝对定位的div居中?
水平居中:
1、flex+margin:auto
2、flex+justify-content :center
3、定位 + bottom + right + top + left 0 + margin : auto
4、grid + justify-self :center + align-self :center
5、定位 + left 50% + margin-left - 一半的px值
垂直居中:
1、line-height
水平垂直居中:
1、absolute + bottom + right + top + left 0 + margin : auto
2、absolute + left 50% + top 50% + margin-left/top - 一半的px值
3、flex+justify-content :center + align-items:center
8、全屏滚动的原理是什么?用到了css的哪些属性?
原理类似于轮播图,超出的部分隐藏,滚动时显示
可能用到的css属性:overflow: hidden; transform: translate(100%, 100%); display:none
9、你对line-height是如何理解的?三种赋值方式有何区别?(带单位、纯数字、百分比)
line-height 指一行字的高度,包含了字间距,实际上是下一行基线到上一行基线的距离
如果一个标签没有定义height属性,那么其最终表现的高度是由line-height决定的
一个内容没有设置高度,那么撑开容器高度的是line-height而不是容器内的文字内容
把line-height值设为height一样大可以实现单行文字的垂直居中
line-height 和 height 都能撑开一个高度,height会触发haslayout,而line-height不会
10、回流和重绘分别是什么?触发条件?性能影响?如何减少回流和重绘?
重绘:当元素的样式改变需要浏览器重新绘制样式
回流:当元素的大小、隐藏、位置改变,需要浏览器重新计算元素几何信息,以及重新渲染页面时,会影响当前元素,祖先元素和后代元素。
触发条件:
- 添加或删除可见的DOM元素
- 元素尺寸改变
- 内容变化,例如用户在input框中输入文字
- 页面渲染初始化
- 浏览器窗口尺寸改变 —— 触发重排(回流)。
性能影响:
- 回流比重绘的代价要高。回流的过程比重绘复杂,因为它涉及到更多的计算。
- 回流必将引发重绘,而重绘不一定会引发回流。
如何减少回流和重绘:
使用transform替代top。
使用visibility替换display: none —— 因为前者只会触发重绘,后者会触发回流(重排)。
不要使用table布局,因为可能很小的一个小改动会导致整个table的重新布局。
避免在循环中对DOM进行频繁操作,可以使用documentFragment进行批量操作。
container.style.padding = '20px'; //触发回流,改变元素大小
container.style.borderWidth = '5px';
//使用cssText合并成一次操作
container.style.cssText = 'padding: 20px; border-width: 5px;';
let list = document.getElementById('list'),
frag = document.createDocumentFragment(),
items = ['Item 1', 'Item 2', 'Item 3'];
// 使用DocumentFragment作操作
items.forEach(item => {
let li = document.createElement('li');
li.textContent = item;
frag.appendChild(li);
});
// 把DocumentFragment一次性添加到DOM中,减少页面回流
list.appendChild(frag);
11、link与@import的区别?
1、link是HTML方式,@import是css方式
2、link最大限度支持并行下载,@import过多嵌套导致串行下载,出现FOCU(文档样式短暂失效)
3、link可以通过rel = “ alternate stylesheet”指定候选样式
4、浏览器对link支持早于@import,可以使用@import对老浏览器隐藏样式
5、@import必须在样式规则之前,可以在css文件中引用其他文件
6、总体来说,link优于@import
12、文本省略号的css属性怎么设置?
.content {
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏溢出的文本 */
text-overflow: ellipsis; /* 显示省略号 */
}