目录
2、link 和 @import 都能导入一个样式文件,它们有什么区别嘛?
4、设备像素比(DPR)、像素密度(DPI/PPI)、设备独立像素(DIP)
8、“text-align:center;”与“margin:0 auto;”的区别
19、什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
1、规则
@namespace 告诉 CSS 引擎必须考虑XML命名空间。
@media, 如果满足媒体查询的条件则条件规则组里的规则生效。
@page, 描述打印文档时布局的变化.
@font-face, 描述将下载的外部的字体。
@keyframes, 描述 CSS 动画的关键帧。
@document, 如果文档样式表满足给定条件则条件规则组里的规则生效。
@charset 用于定义样式表使用的字符集。它必须是样式表中的第一个元素。有多个被声明时,只有第一个会被使用,而且不能在HTML元素或HTML页面的
<style>
元素内使用。@supports 用于查询特定的 CSS 是否生效,可以结合 not、and 和 or 操作符进行后续的操作。
@import 用于告诉 CSS 引擎引入一个外部样式表。
2、link 和 @import 都能导入一个样式文件,它们有什么区别嘛?
- link 是 HTML 标签,除了能导入 CSS 外,还能导入别的资源,比如图片、脚本和字体等;而 @import 是 CSS 的语法,只能用来导入 CSS;
- link 导入的样式会在页面加载时同时加载,@import 导入的样式需等页面加载完成后再加载;
- link 没有兼容性问题,@import 不兼容 ie5 以下;
- link 可以通过 JS 操作 DOM 动态引入样式表改变样式,而@import不可以。
3、组合选择器
- 相邻兄弟选择器:
A + B
- 普通兄弟选择器:
A ~ B
- 子选择器:
A > B
- 后代选择器:
A B
4、设备像素比(DPR)、像素密度(DPI/PPI)、设备独立像素(DIP)
- 设备像素比(DPR)
设备像素比表示 1 个 CSS 像素等于几个物理像素。
计算公式:DPR = 物理像素数 / 逻辑像素数;
在浏览器中可以通过 window.devicePixelRatio 来获取当前屏幕的 DPR。
- 像素密度(DPI/PPI)
像素密度也叫显示密度或者屏幕密度,缩写为 DPI(Dots Per Inch) 或者 PPI(Pixel Per Inch)。从技术角度说,PPI 只存在于计算机显示领域,而 DPI 只出现于打印或印刷领域。
计算公式:像素密度 = 屏幕对角线的像素尺寸 / 物理尺寸
- 设备独立像素(DIP)
DIP 是特别针对 Android设备而衍生出来的
它是基于屏幕密度而计算的,认为当屏幕密度是 160 的时候,px = DIP。
计算公式:dip = px * 160 / dpi
5、css样式书写顺序
影响文档流属性:display,position,top,left
盒子模型属性:width,height,border
文本性属性:font-size,font-weight
装饰性属性:color,background
其他属性:cursor
6、“border:0”与“border:none”的区别
“border:0”需要占用内存,浏览器依然渲染。
border:none”不需要占用内存,浏览器不会做出渲染动作。
7、text-align
text-align对文字、inline元素(行内元素)以及inline-block元素(行内块元素)起作用,但对块元素不起作用。其中,img元素属于inline-block元素。
8、“text-align:center;”与“margin:0 auto;”的区别
(1)“text-align:center;”实现的是文字、inline元素以及inline-block元素的水平居中。
(2)“margin:0 auto;”实现的是块元素的水平居中。
(3)“text-align:center;”在父元素中定义,“margin:0 auto;”在当前元素中定义。
9、vertical-align
(1)inline元素和inline-block元素的vertical-align是针对周围的元素来说的,vertical定义的是周围元素相对于当前元素的对齐方式。
(2)table-cell元素的vertical-align属性是针对自身而言。vertical-align定义的是内部子元素相对于自身的对齐方式。
10、居中
div.parent{
display:flex;
}
div.child{
margin:auto;
}
11、opacity: 0、visibility: hidden、display: none
占据空间 | 是否可以点击 | 性能 | 子元素继承 | transition | |
display:none | 否 | 否 | 引起重排,性能较差 | 不会 | 不支持 |
visibility:hidden | 是 | 否 | 引起重绘,性能较高 | 会 | 不支持 |
opacity:0 | 是 | 是 | 不会触发重绘,性能较高 | 会 | 不支持 |
12、文本溢出省略效果
//一行文本省略
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
//两行文本省略
overflow: hidden;
-webkit-line-clamp: 2; //只显示两行
text-overflow: ellipsis;
display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式 纵向
13、子容器宽度就会随着会员文本增加自动撑宽
给父容器一个水平方向位置属性值,align-items: flex-start
14、子元素高度撑满父元素的高度
给父容器设置属性值,align-items: stretch
15、IphoneX底部安全区域小黑条适配问题
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
16、深度作用选择器
style 中scoped 表示仅本组件的元素而不会污染全局,组件样式修改无效时
.div1 >>> .innerDiv {
// ...
}
如果是sass/less的话可能无法识别,这时候需要使用 /deep/ 选择器。
/deep/ .el-input__inner {
// ...
}
17、实现三角形
无边框
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
带边框
<div class="triangle">
<div class=""></div>
</div>
.triangle{
position: relative;
width: 0;
height: 0;
border-width: 30px;
border-style: solid;
border-color: transparent transparent #000000 transparent;
}
.triangle div{
position: absolute;
top: -28px;
left: -29px;
width: 0;
height: 0;
border-width: 29px;
border-style: solid;
border-color: transparent transparent #999999 transparent;
}
18、 png、jpg、gif 、webp
- png是便携式网络图片(Portable Network Graphics)是一种无损数据压缩位图文件格式.优点是:压缩比高,色彩好。 大多数地方都可以用。
- jpg是一种针对相片使用的一种失真压缩方法,是一种破坏性的压缩,在色调及颜色平滑变化做的不错。在www上,被用来储存和传输照片的格式。
- gif是一种位图文件格式,以8位色重现真色彩的图像。可以实现动画效果.
- webp格式是谷歌在2010年推出的图片格式,压缩率只有jpg的2/3,大小比png小了45%。缺点是压缩的时间更久了,兼容性不好,目前谷歌和opera支持。
19、什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明的viewport。
<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>
20、display:inline-block元素之间空隙
HTML代码中的回车换行被转成一个空白符,在字体不为0的情况下,空白符占据一定宽度,所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化
1、解决元素之间的空白符
2、为父元素中设置font-size: 0,在子元素上重置正确的font-size
3、设置子元素margin值为负数
4、设置父元素,display:table和word-spacing(最优解)
.parent{
display: table;
word-spacing:-1em; /*兼容其他浏览器,未验证*/
}
21、伪类与伪元素的区别
单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。
注意:
1)伪类只能使用“:”,而伪元素既可以使用“:”,也可以使用“::”,因为伪类是类似于添加类所以可以是多个,而伪元素在一个选择器中只能出现一次,并且只能出现在末尾
2)伪元素要配合content属性一起使用
3)伪元素不会出现在DOM中,所以不能通过js来操作,仅仅是在 CSS 渲染层加入
伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因
相关问题::after/::after和:before/::before的异同
相同点:a、都可以用来表示伪类对象,用来设置对象前的内容
b、:before和::before写法是等效的
c、:after和::after写法是等效的
不同点:a、:before/:after是Css2的写法,::before/::after是Css3的写法
b、:before/:after 的兼容性要比::before/::after好 ,
c、在H5开发中建议使用::before/::after比较好
22、视差滚动效果
视差滚动(Parallax Scrolling)通过在网页向下滚动的时候,控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。
1)CSS3实现
优点:开发时间短、性能和开发效率比较好,缺点是不能兼容到低版本的浏览器
2)jQuery实现
通过控制不同层滚动速度,计算每一层的时间,控制滚动效果。
优点:能兼容到各个版本的,效果可控性好
缺点:开发起来对制作者要求高
3)插件实现方式
例如:parallax-scrolling,兼容性十分好
<body>
<section class="g-img1">IMG1</section>
<section class="g-img2">IMG2</section>
</body>
<style type="text/css">
body {
perspective: 10px;
transform-style: preserve-3d;
}
/* CSS部分主要通过background-attachment: fixed;来实现视差滚动,根据实际需求设置相应的背景大小,这里用的是background-size: cover; */
section {
height: 100vh;
color: #fff;
text-align: center;
}
.g-img1 {
background-image: url('http://pic7.photophoto.cn/20080407/0034034859692813_b.jpg');
/* 当页面的其余部分滚动时,背景图像不会移动。 */
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
.g-img2 {
background-image: url('https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=');
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
</style>
23、BFC
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
BFC的布局规则
- 内部的Box会在垂直方向,一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
- 每个盒子(块盒与行盒)的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时,浮动元素也参与计算。
如何创建BFC
- float的值不是none。
- position的值不是static或者relative。
- display的值是inline-block、table-cell、flex、table-caption或者inline-flex
- overflow的值不是visible
BFC的作用
- 利用BFC避免margin重叠。
- 自适应两栏布局
- 清除浮动。
24、外边距叠加
又称“margin叠加”,指的是当两个垂直外边距相遇时,这两个外边距将会合并为一个外边距,即“二变一”。其中,叠加之后的外边距高度等于发生叠加之前的两个外边距中的最大值。
三种情况:同级元素、父子元素和空元素
25、负margin技术
图片与文字对齐:img{margin:0 3px -3px 0; }
26、display:table-cell
垂直居中于元素
display: table-cell;
vertical-align: middle;
text-align: center;
等高布局:同一行的单元格td元素高度是相等的 ,适合多栏布局
自动平均划分元素:当父元素定义“display:table”而子元素定义“display:table-cell”时,如果给父元素一定的宽度,父元素宽度就会根据子元素的个数进行自动平均划分。
27、清除浮动
- 为包裹元素追加一个内容为空的元素,设置clear: both属性(clear属性应用于浮动元素后面的元素。)
- 为包裹元素增加overflow: auto/hidden属性(应用于浮动元素的父元素)
- 为包裹元素设置浮动属性
- 使用after伪元素(推荐)
- 只要促发BFC,就能清除浮动,以上方法都是触发了BFC
.clearfix:after {
content: " ";
display: table;
clear: both;
}
28、清除图片5px间距
方案1:给父元素设置font-size: 0
方案2:给img设置display: block
方案3:给img设置vertical-align: bottom
方案4:给父元素设置line-height: 5px
29、修改input placeholder样式
input{
width: 300px;
height: 30px;
border: none;
outline: none;
display: block;
margin: 15px;
border: solid 1px #dee0e9;
padding: 0 15px;
border-radius: 15px;
}
.placehoder-custom::-webkit-input-placeholder{
color: #babbc1;
font-size: 12px;
}
30、选择除了最后一个元素的其他元素
li:not(:last-of-type){}
31、移除type="number"尾部的箭头
.no-arrow::-webkit-inner-spin-button {
-webkit-appearance: none;
}
32、移除input状态线
.no-outline{
outline: none;
}
31、文本选择
自定义文本选中的样式:类选择器::selection{}
禁止选择文本:user-select: none;
32、哀悼模式
filter:grayscale(1)
33、flex子元素塌陷
align-self: stretch;
34、space-between最后一行
只适合每行2和3个子元素的情况
.父元素:after{
content: '';
width: 子元素宽度;
}
适合每行3个子元素以上和最后一行动态显示子元素的情况
<div class="div">
<div v-for="(item,index) in list" :key="index" class="sub-div"></div>
<div class="sub-div" v-for="(item,index) in 4-(list.length%4===0?4:list.length%4)" :key="index" >这是动态添加的</div>
</div>
.div{
width: 300px;
display: flex;
background: skyblue;
flex-wrap: wrap;
justify-content: space-between;
}
.sub-div{
width: 22%;
background: pink;
height: 100px;
margin-bottom: 20px;
}
35、五个响应尺寸
- xs:extra Small,超小
- sm:small,平板 - 屏幕宽度等于或大于 576px
- md:medium ,桌面显示器 - 屏幕宽度等于或大于 768px)
- lg:large,大桌面显示器 - 屏幕宽度等于或大于 992px)
- xl:extra Large,超大 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
https://segmentfault.com/a/1190000013325778
伪元素和伪类的区别总结_张木期的博客-CSDN博客_伪类和伪元素
什么是BFC?看这一篇就够了_Leon的博客-CSDN博客_bfc
36、融合效果
filter: contrast()
以及 filter: blur()
这两个滤镜可以实现融合效果