CSS知识点

最新推荐文章于 2024-07-09 18:09:59 发布

转载最新推荐文章于 2024-07-09 18:09:59 发布 · 231 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/WuLex

HTML5+CSS|CSS3 专栏收录该内容

159 篇文章

订阅专栏

本文深入探讨CSS中的z-index属性范围，伪元素与伪类的区别，解决content属性换行问题，阐述Ajax与form表单提交的区别，解读背景图定位语法，并解析CSS属性值组合规则。

`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`表单提交区别？

区别：

ajax在提交，请求，接收时，都是异步进行的，网页不需要刷新。
from表单提交时是新建一个页面，哪怕是提交给自己本身的页面，也是需要刷新的。
ajax在提交时，是在后台新建一个请求。
from表单趋势放弃本页面，再次申请。
ajax必须使用js来实现，不启用js的浏览器，无法完成操作。
from是浏览器的功能，无论是否开启js，都可以提交表单。
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;
    }