关于css的一些记录

目录

                   1、规则

 2、link 和 @import 都能导入一个样式文件，它们有什么区别嘛？

3、组合选择器

4、设备像素比（DPR）、像素密度（DPI/PPI）、设备独立像素（DIP）

5、css样式书写顺序

6、“border:0”与“border:none”的区别

7、text-align

8、“text-align:center；”与“margin:0 auto；”的区别

9、vertical-align

10、居中

11、opacity: 0、visibility: hidden、display: none

12、文本溢出省略效果

13、子容器宽度就会随着会员文本增加自动撑宽

14、子元素高度撑满父元素的高度

15、IphoneX底部安全区域小黑条适配问题

16、深度作用选择器

17、实现三角形

 18、 png、jpg、gif 、webp

19、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

20、display:inline-block元素之间空隙

21、伪类与伪元素的区别

22、视差滚动效果 

23、BFC

24、外边距叠加

25、负margin技术

26、display:table-cell

27、清除浮动

28、清除图片5px间距

29、修改input placeholder样式

30、选择除了最后一个元素的其他元素

31、移除type="number"尾部的箭头

32、移除input状态线

31、文本选择

 32、哀悼模式

 33、flex子元素塌陷

34、space-between最后一行 

                  35、五个响应尺寸

---

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

1. png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。
2. jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
3. gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
4. 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

20+ css高频实用片段，提高幸福感的小技能你可以拥有噢 - 掘金

1.5 万字 CSS 基础拾遗（核心知识、常见需求） - 掘金

36、融合效果

filter: contrast() 以及 filter: blur() 这两个滤镜可以实现融合效果

例子：巧用 CSS 实现酷炫的充电动画 - 掘金