第二十九天 css高级细节技巧

一.background-color :属性设置元素的背景颜色。

定义和用法

background-color 属性设置元素的背景颜色。

元素背景的范围

background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。

transparent 值 (让背景色透明)

尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。

可能的值

CSS高级特殊个例属性

(visibility,filter,CSS变量,content计数器,cursor,BFC,iframe)

一.visibility VS display:none VS scale(0) VS overflow

visibility 控制一个元素是否可见

visibility: visible(默认) | hidden

深入visibility特性:

1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

2、visibility: hidden不会影响counter计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样

3、CSS3的transition支持visibility属性，但是并不支持display:none属性的，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

①如下图: visibility:hidden + transition ----- visibility:visible
②切记hover用法不能写错: 是给当前蒙板的父盒子盒子box 加hover , 然后下面的.mask 这样 .

(注意:这种transition只能加在visibility:hidden中,即hidden消失的时候延迟x秒,做不到在visible显示的延迟多少秒…试验过了)

​ transition用在visibility:visible是失效的

5、而opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: (因为opacity是对于整体元素来透明的,看下面讲解)

11.color 和 bc-color 和 border-color和opacity 的区别:

①Color 和 bc-color 和 border-color 都是整个元素的局部颜色 , 如果只是局部某部分有灰蒙透明效果则用以上样式的rgb形式,调一个透明度出来即可.

②opacity透明度:是整个元素的整体外观颜色,就是整个元素透明度,不管你什么颜色,全部一起透明了

6.总结

六、由以上可以了解到 Visibility:none 和 Display:hidden 的区别

一.visibility:hidden 和display:none的本质区别   ?

1.设置为 visibility:hidden 时 元素不可见但是保留渲染位置 只是视觉上的看不见 

2.而display:none; 实现的效果是 元素不进行渲染 在页面上不存在 

二.
1.display:none;

使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”,隐藏属性值设为none的元素并且释放该元素在文档中所占的物理空间，对于其他元素来说，相当于该元素不存在，因此，该元素的位置被其他元素顶替

2.visibility:hidden;

使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

 

七、什么时候使用Visibility或者Display属性？
Visibility和Display属性虽然都可以达到隐藏页面元素的目的，但它们的区别在于如何回应正常文档流。
如果你想隐藏某元素，但在页面上保留该元素的空间的话，你应该使用visibility：hidden。(比如标题关键字隐藏,爬虫)
如果你想在隐藏某元素暂时不显示的话应该使用display：none。(比如蒙板:mask)

二.filter 滤镜(鸡肋)

filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

原图:

img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}
/* 模糊 */

img {
    -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
    filter: brightness(200%);
}
/* 曝光 亮度*/

img {
    -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
    filter: contrast(200%);
}
/* 对比度 */

三.CSS 原生变量,后期SAS会有更深入的学习

css中我们可以统一设置 变量 方便页面维护

1.变量声明

总结:因此尽量不要给变量重写覆盖.很容易绕晕
–变量名:样式 = 都看成CSS一个声明 (一般写在html内)
样式名: 样式 ; (正常的)
样式名 : var(变量名);(备胎)

变量声明的时候，变量名之前加上两根连词线（–）即可。例如：

body {
    --foo: #7F583F;         // 在body的标签内都能使用这个变量
    --bar: #F7EFD2;
}

p {                    //  只能在标签内都能声明这个变量,因此范围太小,一般不用
    --foo: #7F583F;   
    --bar: #F7EFD2;
}

/* foo 与 bar是变量名称 他们的值分别是 #7F583F 和 #f7EFD2*/
变量大小写敏感、变量名等这些参考 js 变量名规则肯定不会错，而变量名中存储的值的书写规则仍然采用 css 的规则，如：  --x: 20px 30px  而不是 --x: '20px 30px' 。

2.具体CSS标签内如果使用变量：var() 函数

var() 函数是用来读取变量，如下例：

a {
    --foo：#f1f2f5;  
    --bar: red;
    color: var(--foo);
    text-decoration-color: var(--bar);
}

**3.var() 函数会有第二个备胎参数，表示变量的默认值，**即如果该变量不存在(即第一个参数)，那么就启动备份使用这个默认值。并且，第一个参数后面的全部算第二个参数，不管有多少个逗号，比如：

var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);

3.变量作用域

css变量遵从 css优先级的原则 变量值会被覆盖(不推荐)

   * {
   	  color: var(--color);  /*这一步 给所有标签都赋予了colar样式属性*/
    }

	html {
    	--color: blue;
    }

	div {
    	--color: green;
    }

    #alert {
    	--color: red;
    }

   

<p> 我的颜色为 blue</p>
<div>我的颜色为 green</div>
<div id="alert">我的颜色为 red</div>

CSS标签变量也有优先级,是跟随之前学的选择器优先级的.即就是相同的声明都写在html{}标签选择器 和写在.类名选择器上则听.类名选择器的变量,因为权重更大. 相同权重则后来居上即可.看下图

1.此时给通配符所有的,代表属性都给了colar带标签,所有标签都会有colar属性该样式. (没有属性写var出来,则写了变量则全部不生效)

2.html下面的colar变量都为蓝色,则本html下面的该使用该变量的属性应该都三个都为蓝色,本毋庸置疑.但到了看到两个div时又有相同的变量样式,冲突了,则只能比较变量优先级,变量的优先级是追随选择器优先级的优先级的html=div的则后来居上,因此div是绿色的,可又到了下面的div发现又有相同的变量样式,则比较id选择器是比标签选择器大的,因此第三个div用的是红色. **(因此尽量不要重写变量,会很绕晕,就固定变量写在一个最大范围的地方.) **

四.CSS 伪元素content 搭配counter 计数器

(帮我们自动编号和计数)

CSS 计数器通过一个变量来设置，根据规则递增变量。

1.使用计数器自动编号

CSS 计数器根据规则来递增变量。

2.CSS 计数器使用到以下几个属性：

• counter-reset - 创建或者重置计数器
• counter-increment - 递增变量
• content - 插入生成的内容
• counter() 或 counters() 函数 - 将计数器的值添加到元素

3.使用步骤:要使用 CSS 计数器，首先得在父级先用 counter-reset 创建：

第一步.父级设置counter-reset

该属性定义计数器的名称，可以同时定义多个计数器，定义数字时代表初始值，缺省默认为0：

div.count{
    counter-reset: count1 count2;
}
/* count1 和 count2 是计数器名称 自定义命名*/

如上代码定义两个计数器count1和count2，初始默认为0。

**第二步.当前伪元素盒子下设置:counter-increment **

该属性接收两个参数，第一个参数代表计数器的名称，第二个代表每次递增的值，缺省时默认为1

div.count:before{
    counter-increment: count1 2;
}

此行代码定义计数器count1单次自增值为，此时计数器默认初始值为0+2=2；若这里将数字2缺省，则默认自增值为1，此时计数器初始值为0+1=1。

第三步.当前盒子counter()/counters()

该方法为计数器调用方法，接收两个参数，第一个参数为计数器名称，第二个为数值类型

4.案例:

五.content属性总结(还可以放字体图标的字节码):

Content属性值

案例:

六.cursor 鼠标指针样式(pointer鼠标一过去出现一只手,代表这个可以点击进入,提高用户体验)

可以通过设置cursor 给元素添加鼠标移入时的样式

五.iframe 内联框架 (了解,内联页面,基本不用了)

iframe默认是inline行内元素, 可以将另一个网页通过iframe框架引入到当前页面

<iframe width='200' height='200' src='http://www.baidu.com/'></iframe> 
<iframe width='200' height='200' src='http://www.xiaomi.com/'></iframe>
<iframe width='200' height='200' src='http://www.jingdong.com/'></iframe>

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    iframe {
       display: block;
      width: 1200px;
      height: 800px;
    }
  </style>
</head>

<body>
  <iframe src="https://www.baidu.com/" name='baidu' frameborder="0" seamless scrolling='auto'></iframe>
  <iframe src="https://www.sina.com/" name='sina' frameborder="0"></iframe>
  <iframe srcdoc="<p style='color:red'>我是引入的页面</p>" name='google' frameborder="0"></iframe>
</body>

</html>

一.padding与margin 百分比

margin和padding都可以使用百分比值的，就是 margin-top | margin-bottom | padding-top | padding-bottom 的百分比值参照的不是父容器的高度，而是宽度

通俗来讲:margin和padding的值为百分比时:则全方向的百分比pad 和mar 全都是参照父容器的"宽度."

利用这个特性可以实现高度等比自适应布局，解决图片渲染导致高度不统一发生的频闪问题

二.视口单位(Viewport units)

在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。

1.vw：1vw等于视口宽度的1%。

2.vh：1vh等于视口高度的1%。

3.vmin：选取vw和vh中最小的那个。

4.vmax：选取vw和vh中最大的那个。

vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。

换算比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。

vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。

vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

三.扩展:Css单位px，rem，em，vw，vh的区别

px

px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的

em

em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）

如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸

特点：

1. em的值并不是固定的；

2. em会继承父级元素的字体大小

rem

rem是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位

如果你没有设置html的字体大小，就会以浏览器默认字体大小，一般是16px

html{font-size: 62.5%}  /* 10 ÷ 16 × 100% = 62.5% */

body{font-size: 1.4rem;} /* 1.4 × 10px = 14px */

/*在根元素中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ）*/

优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好

rem兼容性：除了IE8及更早版本外，所有浏览器均已支持rem

em与rem的区别：

rem是相对于根元素（html）的字体大小，而em是相对于其父元素的字体大小

两者使用规则：

• 如果这个属性根据它的font-size进行测量，则使用em``
• 其他的一切事物属性均使用rem

这里提供了一个px、em、rem单位的转换工具：http://pxtoem.com/

vw、vh、vmin、vmax、

vw、vh、vmax、vmin这四个单位都是基于视口

vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100

假如浏览器的宽度为200px，那么1vw就等于2px（200px/100）

vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100

假如浏览器的高度为500px，那么1vh就等于5px（500px/100）

vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值

/*
如果浏览器的高为300px、宽为500px，那么1vmin就是3px，1vmax就是5px；
如果浏览器的高为800px，宽为1080px，那么1vmin也是8px，1vmax也是10.8px
*/

其他单位：

%（百分比）

一般来说就是相对于父元素

1、对于普通定位元素就是我们理解的父元素

2、对于position: absolute;的元素是相对于已定位的父元素

3、对于position: fixed;的元素是相对于ViewPort（可视窗口）

vm

css3新单位，相对于视口的宽度或高度中较小的那个

其中最小的那个被均分为100单位的vm

比如：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px

缺点：兼容性差

单位常见问题：

1、假如使用em来设置文字大小要注意什么？

注意父元素的字体大小，因为em是根据父元素的大小来设置的。

比如同样是1.5em，要是父元素是20，那1.5em就是30px.要是父元素是30px,1.5em就是45px（特别是在多重div嵌套里面更要注意）

2、pc pt ch一般用在什么场景？

这些我们网页设计基本上用不到，在排版上会有用处

3、如何使 1rem=10px

在设置HTML{font-size：62.5%；}即可

4、如果父元素没有指定高度，那么子元素的百分比的高度是多少？

会按照子元素的实际高度，设置百分比则没有效果

三. color: transparent;文本模糊化 & user-select: none不容许选中文本

.text {
 color: transparent;  /*文本模糊化*/
 text-shadow: #111 0 0 5px;
 user-select: none;  /*用户不容许选中文本*/
}  

可编辑 contentEditable属性(可以在页面上编辑)

contenteditable 属性指定元素内容是否可编辑。

style标签也可以放在body中，并且也可以添加contenteditable 属性，这就可以造成我们可以实时去在页面上编辑样式表。

<!DOCTYPE html>
<html>
    <body>
        <style style="display:block" contentEditable >  /*这段代码在页面上显示出来,让我们实时编写*/
            body { color: blue }
        </style>
    </body>
</html>

四.页面资源缓存问题(ctrl + r 强制更新一下)

客户端在请求一个文件的时候，发现自己缓存的文件有 Last Modified ，那么在请求中会包含 If Modified Since ，这个时间就是缓存文件的 Last Modified 。因此，如果请求中包含 If Modified Since，就说明已经有缓存在客户端。
服务端只要判断这个时间和当前请求的文件的修改时间就可以确定是返回 304 还是 200 。

对于静态文件，例如：CSS、图片，服务器会自动完成 Last Modified 和 If Modified Since 的比较，完成缓存或者更新。但是对于动态页面，就是动态产生的页面，往往没有包含 Last Modified 信息，这样浏览器、网关等都不会做缓存，也就是在每次请求的时候都完成一个 200 的请求。

为了保证用户及时能够获取到最新修改过的外链文件或者资源, 我们需要给资源添加版本号。

版本号一般以时间戳 或者 版本信息+ 时间戳

  <link rel="stylesheet" href="css/reset.css?20200708200603">

五.固定定位的盒子靠近版心右侧对齐

跟绝对定位的盒子居中对齐原理差不多。

首先回顾 :绝对定位的水平对齐 : left:50% + margin-left: -自身宽一半px

这里靠近版心右侧对齐: 先left 50% + margin-left: 版心宽度一半。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xV8fiTYH-1615568068250)(C:\Users\tuyue\AppData\Local\Temp\1614187183446.png)]

六.Autoprefixer插件使用补全你的兼容,

1.只能用在CSS文件中使用

2.自设的快捷键: shift +alt + m

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LQaLF4nf-1615568068251)(C:\Users\tuyue\AppData\Local\Temp\1614186711605.png)]

及时能够获取到最新修改过的外链文件或者资源, 我们需要给资源添加版本号。**

版本号一般以时间戳 或者 版本信息+ 时间戳

  <link rel="stylesheet" href="css/reset.css?20200708200603">

五.固定定位的盒子靠近版心右侧对齐

跟绝对定位的盒子居中对齐原理差不多。

首先回顾 :绝对定位的水平对齐 : left:50% + margin-left: -自身宽一半px

这里靠近版心右侧对齐: 先left 50% + margin-left: 版心宽度一半。

六.Autoprefixer插件使用补全你的兼容,

1.只能用在CSS文件中使用

2.自设的快捷键: shift +alt + m

原文链接:https://blog.csdn.net/weixin_47592060/article/details/114715940