CSS知识点

比眉伴天荒 2021-06-26 16:06 540阅读 0赞

## `Z-INDEX`的最小值和最大值 ##

`z-index`属性，用于定义使用`position: relative;`or `position: absolute;`”.定位的的 `HTML` 元素的显示顺序"位置：  
你设定的`z-index`的值并不重要，但相对于其他元素的 `z-index`的值将定义哪个元素显示在顶部。  
`z-index`的最小值为 `0` ；它不能是负数 （但旧的浏览器版本，可以使用负值）。  
Z-索引的最大值是 `2147483647`，它是一个 `32` 位的值及它可以运行在任何浏览器 （IE6、 IE7、 IE8、 Opera 9、 Safari 4、 Firefox 6、 Firefox 3) 除了 Safari 3 最大`z-index`为 `16777271`。  
因此当您设置一个`z-index`值高于 `2147483647` 是浏览器将使用值 `2147483647`。  
所以，我认为它是安全地使用从 `0` 到 `2147483647` 之间的值。

## `:before`和`::before`的区别 ##

单冒号(`:`)用于`CSS3`伪类，双冒号(`::`)用于`CSS3`伪元素。伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 `css3` 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。

双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存 在的伪元素写法，比如`:first-line`、`:first-letter`、`:before`、`:after`等，而新的在`CSS3`中引入的伪元素则不允许再支持旧的单冒号的写法。

那么现在就可以完整的回答标题中的问题了，对于`CSS2`之前已有的伪元素，比如`:before`，单冒号和双冒号的写法`::before`作用是一样的。

所以，如果你的网站只需要兼容`webkit、firefox、opera`等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用`CSS2`的单冒号写法比较安全。

## `content`用`\A`没有达到换行的效果 ##

.code:before
    { 
    content: 'APP\A下载';
    
    }

必须加入 `white-space: pre;` 这个属性

## `Ajax`和`form`表单提交区别？ ##

区别：

1.  `ajax`在提交，请求，接收时，都是异步进行的，网页不需要刷新。  
    `from`表单提交时是新建一个页面，哪怕是提交给自己本身的页面，也是需要刷新的。
2.  `ajax`在提交时，是在后台新建一个请求。  
    `from`表单趋势放弃本页面，再次申请。
3.  `ajax`必须使用js来实现，不启用js的浏览器，无法完成操作。  
    `from`是浏览器的功能，无论是否开启js，都可以提交表单。
4.  `ajax`在提交，请求，接收时，整个过程都是需要使用程序来对其数据进行处理。  
    `from`提交时，是根据你的表单结构自动完成，不需要代码干预。

## `background:url(图片) no-repeat right center`的意思 ##

最近在模仿一个网页的时候，发现CSS代码里有一行代码：`background:url(图片) no-repeat right center`不明白是什么意思，百度以后学习到了，在此记载知识点；

这一行代码其实是背景图定义形式的简写  
完整形式是：

background-image:url(图片);
    background-repeat:no-repeat;
    background-position:right center

`right center`是设置图片的初始位置，`right`是在水平方向上贴容器或浏览器页面的右侧，`center`是在垂直方向上居中，这两个的顺序是先定义水平位置，再定义垂直位置；

另外一个例子：

background:url(../images/top_ico.png) no-repeat right 14px;

意思是背景图片不重复，在水平方向靠近容器的右侧，在垂直方向距离容器上方`14px`;

拓展例子，活学活用：

.top_menu li {  float:left; background:url(../images/top_ico.png) no-repeat right 20px;

`<li>` 标签是用于定义列表项目。这行代码意思是每一列包含的背景图片是`top_ico.png`，图片不重复，靠近列表容器的右侧，距离列表容器上方`20px`;

第三个例子：

background:url(../images/nav_bg.png) no-repeat -20px -150px；

背景：【背景图片链接】【平铺方式（无平铺）】【距左边边距（数值或left或百分比）】【距顶端边距（数值或top或百分比）】

这个解释很清晰了！

## css 中`font-family`后面以逗号分开的多个值? ##

font-family: microsoft yahei,Calibri,Arial; p{ font-family:微软雅黑,Arial,Times New Roman;}

对于“`p{font-family:微软雅黑,宋体,Times New Roman;}`”这句代码，初学者可能会觉得很疑惑。为什么要为元素同时定义多个字体呢？  
其实原因是这样的：每个人的电脑装的字体都不一样，我们定义“`p{font-family:微软雅黑,Arial,Times New Roman;}`”这句的意思是，`p`元素优先用“微软雅黑”字体来显示，如果你的电脑没有装“微软雅黑”这个字体，那接着就用“`Arial`”字体来显示，如果也没有装“`Arial`”字体，接着就用“`Times New Roman`”字体来显示，以此类推。

否则，如果你只定义“`p{font-family:微软雅黑;}`”的话，如果你的电脑没有装“微软雅黑”字体，`p`元素就直接用浏览器默认的“宋体”字体来显示了。  
默认情况下，浏览器的字体是宋体。中文字体常用的有`宋体、微软雅黑`，英文字体比较常用的是`Times New Roman、Arial`。

## CSS中属性有多个值的理解 ##

实际上 `font-family: verdana, geneva, sens-selif;` 的值都是指字体；  
而 `border-bottom: thin dotted #888888;` 的值是指边框的 粗细 类型 颜色；  
看出来区别了吗，**逗号隔开的都是指的同一个类型的值，而空格隔开的，是不同类型/属性的值。**

border-bottom: thin dotted #888888;

实际上是 `border-width border-style border-color` 的缩写。而`font-family`是没得拆开的。

## css样式多个类、标签用【逗号 空格 冒号 点】分开的解析 ##

一：`#a,b{…………｝` id叫`a`和一个标签是b的样式(平行关系)  
二：`#a b{…………｝` id叫`a`下面的一个标签是b的样式(包含关系)  
三：`#a.b{…………｝` id叫`a`的下面的`class`叫`b`的样式(包含关系，优先级较高)  
四：`#a:b{…………｝` id叫`a`的伪类`b`的样式(如`a:link{background:#00CCFF} a:hover{background:#FF0000}`)(调用伪类的固定用法，不再多说)

## 去除a标签默认样式 ##

`a`标签一个有以下几种状态：

每种的设置方法如下：

/*包含以下五种的链接*/
        a { 
            text-decoration: none;
        }
        /*正常的未被访问过的链接*/
        a:link { 
            text-decoration: none;
        }
        /*已经访问过的链接*/
        a:visited { 
            text-decoration: none;
        }
        /*鼠标划过(停留)的链接*/
        a:hover { 
            text-decoration: none;
        }
        /* 正在点击的链接，鼠标在元素上按下还没有松开*/
        a:active { 
            text-decoration: none;
        }
        /* 获得焦点的时候 鼠标松开时显示的颜色*/
        a:focus { 
            text-decoration: none;
        }